package.json
{
"name": "giccoo",
"version": "1.0.0",
"main": "main.js",
"author": "Kelvin",
"license": "MIT",
"scripts": {
"dev": "webpack-dev-server --devtool eval-source-map --colors --hot --inline --content-base ./dist",
"build": "webpack --colors"
},
"dependencies": {
"path": "^0.12.7",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"webpack": "^3.8.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^2.30.1",
"webpack-dev-server": "^2.9.4"
}
}
Run code npm install
webpack.config.js
const path = require('path');
// const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['./src/main.js'],
output: {
path: path.resolve('dist'),
filename: '[name]-build.js'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
]
},
watch: true
}
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
if (document.getElementById('root')) {
ReactDOM.render(<App name="kelvin" />, document.getElementById('root'));
}
App.jsx
/*
./client/components/App.jsx
*/
import React from 'react';
const TEMP = "nice"
const MSUM = (i) => i + 1
export default class App extends React.Component {
constructor(props) {
super(props)
console.log(`${TEMP} job!`,MSUM(5),props)
this.props = props
}
render() {
return(
<div style={{textAlign: 'center'}}>
<h1>Hello World {this.props.name}</h1>
</div>
);
}
}
.babelrc
/*
./.babelrc
*/
{
"presets":[
"es2015", "react"
]
}
Run code npm run dev
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。