- clone repo
git clone https://github.com/react-native-training/manual-react-setup.git
- cd into directory
cd manual-react-setup
- install dependencies using npm or yarn
yarn OR npm i
- Create directory and create package.json
mkdir react-boilerplate
cd react-boilerplate
npm init -y
- Create basic sub directories
mkdir dist
cd dist
touch index.html
- Create index.html
<!DOCTYPE html>
<html>
<head>
<title>React Webpack Babel Setup</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
- Install webpack (from root of directory)
npm install --save-dev webpack webpack-dev-server
- Add start script to package.json
"scripts": {
"start": "webpack-dev-server --progress --colors --hot --config ./webpack.config.js",
...
}
- Create webpack.config.js
touch webpack.config.js
- Add to webpack.config.js
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};
- Create main app subdirectories (from root folder)
mkdir src
cd src
touch index.js
- Add test console.log to index.html
console.log('React Webpack Babel Setup Working!');
- Test the application
npm start
- Add hot realoading to webpack
npm install --save-dev react-hot-loader
- Add new entries to webpack.config.js
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080', // new
'webpack/hot/only-dev-server', // new
'./src/index.js'
],
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true // new
}
};
- Update index.js to add hot reloading
console.log('My Minimal React Webpack Babel Setup');
module.hot.accept(); // new
- Test the application
npm start
- Install babel dependencies
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
- If you would like Experimental features, install preset-stage-2
npm install --save-dev babel-preset-stage-2
- Create .babelrc
touch .babelrc
- Add configuration to .babelrc
{
"presets": [
"es2015",
"react",
"stage-2" // if you installed babel-preset-stage-2
]
}
- Add babel configuration to webpack.config.js
...
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'react-hot-loader!babel-loader'
}]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
...
- Add style loader and css loader to webpack.config.js
npm i css-loader style-loader --save-dev
- Update webpack.config.js to add style and css configuration
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'react-hot-loader!babel-loader'
},
{ // new
test: /\.css$/,
exclude: /^node_modules$/,
loader: 'style-loader!css-loader',
}
]
},
- Install React (from root directory)
npm i --save react react-dom
- Update src/index.js to render application
import React from 'react';
import ReactDOM from 'react-dom';
const title = 'React Webpack Babel Setup Complete!';
ReactDOM.render(
<div>{title}</div>,
document.getElementById('app')
);
module.hot.accept();