React.js environment for development

Prepare docker container for development

Prepare docker container for development

Prepare environment for development

$ cd /project/
$ npm init -y

$ npm install --save react react-dom
$ npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

$ npm install --save-dev webpack webpack-dev-server


Babel config file


# echo '{ "presets": ["es2015", "react"] }' > .babelrc



$ mkdir -p public
$ mkdir -p src


$ vi public/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
    <head>
        <title></title>
    </head>

    <body>

        <div id="root"></div>

        <script src="bundle.js"></script>

    </body>

</html>
    


$ vi src/App.jsx


1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react';
import ReactDOM from 'react-dom';

function App(){
    return (
            <div>
                <h1>React</h1>
            </div>
        );
}

ReactDOM.render(<App />, document.getElementById('root'));
    


$ vi webpack.config.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var webpack = require('webpack');
const path = require('path');


module.exports = {

    entry: './src/App.jsx',
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },
    
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    
    devtool: 'eval-source-map',
    
    resolve: {
        EXTENSIONS: ['', '.js', '.jsx']
    }
};



$ vi package.json


1
2
3
"scripts": {
    "start": "webpack-dev-server --host 0.0.0.0 --port 8080 --inline --content-base ./public"
  },


$ npm run start

http://localhost/