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/