React/Mobx/React-Router V4 /Webpack V3 scaffolding

directory

§ Technology stack

§ Quick start

  • The installation
  • Start the
  • The script

§ The project architecture

  • The directory structure
  • The data flow

§ Static deployment

§ specification

§ More documentation

§ technology stack

  • React
  • ES6/7/8 + Babel
  • Webpack 3
  • Mobx
  • React-Router v4
  • Reactstrap + the Bootstrap ^ 4.0.0 – alpha. 6 (UI)
  • Sass
  • Eslint
  • Express

§ Start fast

Before you begin, you are expected to have read through the following documentation

  • React
  • Mobx
  • React-Router-Dom
  • ES6

See the React Knowledge Map series

You can verify es6-to-ES5, JSX syntax in Babel REPL.

X + NPM 5.x + YARN ^0.27.5 is recommended. It is highly recommended to use CNPM installation dependency or manually switch to Taobao NPM source: NPM set registry https://registry.npm.taobao.org/ (tested, CNPM for node – sass PhantomJS problems of Package has the ability to kill)

Even though the installation 

git clone https://github.com/yuthelloworld/vortex-react.git <my-project-name>
cd <my-project-name>
yarn  # Install project dependencies (or `cnpm install`)Copy the code

You start the 

yarn start  # Start the development server (or `npm start`)Copy the code

It’s a script

yarn <script> describe
start Start thehttp://localhost:3000
build Package the build to directory./dist
lint Static checking
lint:fix Static check and repair

§ Project structure

⊙ Directory Structure 

.├ ─ build # ├─ Public # ├─ Server # ├─ ├─ SRC # ├─ index.html # HTML template │ ├ ─ ─ main. Js # program start and render │ ├ ─ ─ the normalize the js # browser compatibility and gasket │ ├ ─ ─ components # global reusable components │ ├ ─ ─ layouts # page layout │ │ └ ─ ─ # # PageLayout navigation │ ├ ─ ─ routes dynamic routing │ │ ├ ─ ─ index. The js # main by │ │ ├ ─ ─ Home # zi lu by Home │ │ │ ├ ─ ─ index. The js # route definition and asynchronous loading │ │ │ ├── ├─ exercises # ├─ exercises # ├─ exercises # ├─ exercises # ├─ exercises # │ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ │ ├─ ├─ ├─ ├─ ├─ │ ├─ ├─ ├─ ├─ │ ├─ ├─ ├─ ├─ ├ ─ ├ ─ exercises # ├ ─ exercises #Copy the code

Even though the data flow

§ Static Deployment

Nginx reverse proxy static Web services are recommended to start applications. Point the route to ~/dist/index.html and let the React-Router do the rest. See this documentation for more. Express is used in scaffolding to extend service and proxy apis.

Here is an example of how to set up a reverse proxy using Nginx.

  • Install nginx:
sudo apt-get install nginxCopy the code
  • Modifying a configuration file:
sudo vi /etc/nginx/sites-available/defaultCopy the code
  • Paste the following into the file:
server{ listen 8001; Server_name 127.0.0.1; Location / {proxy_pass http://127.0.0.1:3000; }}Copy the code
  • Restart the nginx service, start the application, and open a browser to visit http://localhost:8081.
Sudo service nginx restart // Switch to the project directory YARN startCopy the code

§ specification

Configure.eslintrc with Airbnb /javascript, Javascript Standard Style, and standard-React

§ More documentation

React Knowledge map series