react-app introduction to a subject, build with redux, react-router, es6, webpack, ant design, browserSync, express
Based on project react-app-kit
Use react-app-kit to start your first SPA(Single Page Application) with configurable.
用react-app-kit去开始你的第一个可配置的SPA(单页应用).
Its purpose is not to dictate your project structure or to demonstrate a complete sample application.Which contains a landing page to obtain the background Token,and a home page.
它的目的不是指定你的项目结构或者演示一个完整的示例程序,其中包含了一个登陆页面获取后台Token和一个首页
Most of the code is given a bilingual note.
大部分代码都给予了双语注释.
Before you begin, think about whether these features are needed in our project process
在开始之前,思考一下我们的项目程序是否需要这些特性:
| Tech | Description | Learn More |
|---|---|---|
| React | Fast, composable client-side components,Virtual Dom | react-demo , React Gitbook |
| Redux | Predictable state container, live code editing combined with a time traveling debugger | redux-tutorial-CN Redux Gitbook |
| React-Router | A complete routing library for React | react-router-tutorial react-router gitbook |
| Ant | Component library | ant |
| Babel | Compiles ES6 to ES5. Enjoy the new version of JavaScript today. | ES6 REPL, ES6 vs ES5, ES6 Katas, ES6-tutorial |
| Webpack | Bundles npm packages and our JS into a single file. Includes hot reloading via react-transform-hmr. | Quick Webpack How-to webpack-tutorial Webpack gitbook |
| Mocha | Automated tests with chai | Mocha-tutorial |
| ESLint | Lint JS. Reports syntax and style issues. Using eslint-plugin-react for additional React specific linting rules. | ESlint-tutorial |
| SASS | Compiled CSS styles with variables, functions, and more. | sass-tutorial |
| BrowserSync | Time-saving synchronised browser testing. | browserSync-tutorial |
This is a Sketch for a real React App, it could be used for you introduction to a subject
- node
^6.8.0 - npm
^3.10.x
After confirming that your development environment meets the specified requirements, you can create a new project based on react-app-kit in one of two ways:
First, clone the project:
$ git clone https://github.com/onweer/react-app-kit.git <my-project-name>
$ cd <my-project-name>
Then install dependencies and check to see it works
$ npm install # Install project dependencies
$ npm start # Compile and launch
If everything works, you should see the following:
While developing, you will probably rely mostly on npm start however, there are additional scripts at your disposal:
开发过程中，你用得最多的会是npm start，但是这里还有很多其它的处理：
npm run <script> |
|
|---|---|
start |
Serves your app at localhost:3000. HMR will be enabled in development. |
compile |
Compiles the application to disk (~/dist by default). |
dev |
Same as npm start, extra NODE_ENV: development |
test |
Runs unit tests with Karma and generates a coverage report. |
test:dev |
Runs Karma and watches for changes to re-run tests; does not generate coverage reports. |
deploy |
Runs linter, tests, and then, on success, compiles your application to disk. |
deploy:dev |
Same as deploy but overrides NODE_ENV to "development". |
deploy:prod |
Same as deploy but overrides NODE_ENV to "production". |
lint |
Lint all .js files. |
lint:fix |
Lint and fix all .js files. Read more on this. more |
react-app-kit-server work with jwt and cors
This is a server-side application that works with the react-app-kit.
$ git clone https://github.com/onweer/react-app-kit-server.git <my-project-server-name>
$ cd <my-project-server-name>
Then install dependencies and check to see it works
$ npm install # Install project dependencies
$ npm start # Compile and launch
Server is listing at 9527.
Before you start, take a moment to see how the project structure looks like:
.
├── bin # Build/Start scripts
├── build # All build-related configuration
│ └── webpack # Environment-specific configuration files for webpack
├── config # Project configuration settings
├── server # Express application that provides webpack
├── src # Application source code
│ ├── index.html # Main HTML page container for app
│ ├── main.js # Application bootstrap and rendering
│ ├── static # Static assets (not imported anywhere in source code)
└── tests # Unit tests