- engineering structure
- Development and debugging
- unit testing
- Static deployment
- Related documents
If you are a real beginner, this project can be a good tutorial. If you are planning to create a large spa using react technology stack, this project is just right for you. If this project is helpful to you, please do not hesitate to give star or watch support.
After confirming that your development environment is aboveEnvironment configuration, you can start creating your application based on this scaffold:
First, clone the project.
$ git clone https://github.com/yuthelloworld/vortex-react.git <my-project-name> $ cd <my-project-name>
$ yarn # Install project dependencies (or `npm install` or `cnpm install`)
Finally, use the command
npm startTo start the application.
$ yarn start # Start the development server (or `npm start`)
Here are some other processing commands:
||Start and hot updatehttp://localhost:3000|
||Build to directory. / dist|
||Unit testing via karma|
||When the code changes, re execute the unit test through the monitoring mode|
||Code check and repair|
. ├── build # Packaging configuration ├── public # Public static resources ├── server # Express Service │ └── main.js # Service entry JS ├── src # Application source file │ ├── index.html # html template │ ├── main.js # Program startup and rendering │ ├── normalize.js # Browser compatibility and gasket │ ├── components # Global reusable component │ ├── layouts # Home page layout │ │ └── PageLayout # Navigation │ ├── routes # Dynamic routing │ │ ├── index.js # Main route │ │ ├── Home # Sub route home │ │ │ ├── index.js # Route definition and asynchronous loading │ │ │ ├── assets # Static files for components │ │ │ ├── components # Display components │ │ │ └── routes ** # Sub route │ │ └── Counter # Sub route couner │ │ ├── index.js # Route definition │ │ ├── container # Container assembly │ │ ├── modules # module(reducers/constants/actions) │ │ └── routes ** # Sub route │ ├── store # Redux related modules │ │ ├── createStore.js # Create and use Redux store │ │ └── reducers.js # Registration and injection of reducer │ └── styles # style sheet └── tests # unit testing
Development and debugging
In the development environment, web dev middleware and web hot middleware are used. Code real-time hot update.
It is highly recommended to install the Google browser plug-inRedux DevTools Chrome ExtensionTo view the status of the entire application.
React-routerofplainRouteTo define the logical unit of the application.
Add a unit test, you just need to
If you pass
nginxWeb service to start the application, please ensure that the route points to
~/dist/index.html, and then let the react router handle the rest, for more referenceThis document。 Express is used in scaffolding to extend service and agent APIs.