Create simple react project manually

$ 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


<html>
  <head>
    <title></title>
  </head>

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

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


$ vi src/App.jsx


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


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/