React Setting Up React Environment
We want to be able to compile below component and render it in our webpage
Filename: src/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class ToDo extends React.Component {
render() {
return (<div>I am working</div>);
}
}
ReactDOM.render(<ToDo />, document.getElementById('App'));Install all dependencies
# install react and react-dom
$ npm i react react-dom --save
# install webpack for bundling
$ npm i webpack -g
# install babel for module loading, bundling and transpiling
$ npm i babel-core babel-loader --save
# install babel presets for react and es6
$ npm i babel-preset-react babel-preset-es2015 --saveConfigure webpack
Create a file webpack.config.js in the root of your working directory
Filename: webpack.config.js
module.exports = {
entry: __dirname + "/src/index.jsx",
devtool: "source-map",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader"}
]
}
}