Steps:

1. modify the codes in /src

2. npm install

3. npm run build

4. npm start

5. open chrome to localhost:8080

Tools:

1. ESlint : A javascript linter

2. npm : A node module manager

3. prettier A code formatter

4. travis ci A unit/integration test schedulor

5. webpack A javascript bundler(make multiple js files together)

6. expressjs A totally awesome webapp framework

7. babeljs A javascript compiler

8. [react bootstrap]

9. [react native]

npm install --save-dev @babel/core@^7.0.0-0

1. Use express / react to create a simple web App. Create a server.js in the root folder. Add run script to package.json. Use npm start as the main start script.

import express from 'express';
import path from 'path';

const port = process.env.PORT || 8080;
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'dist/index.html'));
});
console.log(`Listening on port ${port}`);
app.listen(port);

1. Define webpack.config.js
2. Run webpack to create bundle.js
3. embed the bundle.js into page.html

1. Install babeljs to run the js codes

npm install --save-dev @babel/core @babel/node @babel/preset-react 

2. Install webpack to bundle the js sourc

npm install --save-dev webpack webpack-cli

3. Istall babel loader for webpack bundle

npm install --save-dev babel-loader

4. Install eslint

npm install eslint-loader eslint  --save-dev

5. Install flowJs for babel

npm install --save-dev babel-cli babel-preset-flow