Javascript

npm init -y //create package.json
npm install react --save //install react
npm install react-dom --save //install react-dom

npm install webpack webpack-dev-server webpack-cli --save

//install babel 7
npm install --save-dev @babel/core @babel/preset-env
npm install --save-dev babel-loader
npm install @babel/preset-react --save-dev
npm install html-webpack-plugin --save-dev

touch index.html App.js main.js webpack.config.js .babelrc

//webpack-config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8001
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

//add the following two lines into "scripts" in the package.json
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

//index.html
<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

//App.js
import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>Hello World</h1>
         </div>
      );
   }
}
export default App;

//main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

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

//.babelrc
{
   "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Running the Server

npm start

Build Static Files

npm run build //build static files and save to ./bundle
cp ./bundle/* /Application/AMPPS/www/react //copy static files to web server

//install create-react-app
npm install -g create-react-app

Running the Server

npm start

Build Static Files

npm run build //build static files and save to ./bundle
cp ./bundle/* /Application/AMPPS/www/react //copy static files to web server