npm install -g babel
npm install -g babel-cli
npm init
npm install webpack --save
npm install webpack-dev-server --save
npm install react --save
npm install react-dom --save
npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015
touch index.html
touch App.jsx
touch main.js
touch webpack.config.js
###webpack.config.js:
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js'
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{ test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
- set webpack entry point to be main.js.
- set development server to 8080 port.
- set babel loaders to search for js files and use es2015 and react presets.
###package.json: Replace
"test": "echo \"Error: no test specified\" && exit 1"
with
"start": "webpack-dev-server --hot"
- ignore testing for now
- '--hot' command will add live reload without refreshing the page
npm start
- open browser & navigate to http://localhost:8080/