Script to install ReactJS with Babel and Webpack
npm install -g babel
npm install -g babel-cli
X:\projects>mkdir <nameoftheapp>
cd <nameoftheapp>
npm init
Just enter through all the questions.
npm install webpack --save
npm install --save-dev webpack-dev-server react-hot-loader
npm install --save html-webpack-plugin
npm install react --save
npm install react-dom --save
npm install file-loader --save-dev
npm install --save-dev babel babel-core babel-loader
npm install --save-dev babel-preset-es2015 babel-preset-react
touch .babelrc
Edit the .babelrc
file with the following code:
{
presets: ['es2015', 'react']
}
touch webpack.config.js
Open webpack.config.js
in your favorite editor and put the following code in it, then save it.
var webpack = require("webpack");
module.exports = {
entry: {
"react-reading-time": [
"webpack-dev-server/client?http://localhost:8881/",
"webpack/hot/only-dev-server",
"./react-reading-time.jsx"
]
},
output: {
path: __dirname,
filename: "[name].js",
publicPath: "http://localhost:8881/",
chunkFilename: "[id].chunk.js",
sourceMapFilename: "[name].map"
},
resolve: {
extensions: ["", ".js", ".jsx", ".es6"],
modulesDirectories: ["node_modules"]
},
module: {
loaders: [{
test: /\.jsx$|\.es6$|\.js$/,
loader: "babel",
query: {
presets: ["es2015", "react"]
},
exclude: /node_module/
},
{
test: /\.scss$|\.css$/,
loader: "style-loader!style!css!sass"
}
]
},
plugins: [
new webpack.NoErrorsPlugin()
],
devtool: "eval-source-map"
};
Open the package.json and add the following line to the scripts
tag:
"start": "webpack-dev-server --config ./webpack.config.js --hot --port 8881"
Create a src
folder in the root of your application
mkdir src
Create an index.html in the src
folder of the application with following content:
<html lang="en">
<head>
<title>My First React Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="react"> Hello !!</div>
</div>
<script src="/react-reading-time.js"></script>
</body>
</html>
npm --save install react-transform
npm install --save-dev style-loader css-loader
npm install --save-dev extract-text-webpack-plugin html-webpack-plugin
npm --save install rimraf
npm --save install modernizr-webpack-plugin
npm --save install webpack-hot-middleware
npm install --save-dev style-loader css-loader
npm install --save-dev postcss-loader autoprefixer