Skip to content

Commit e7b9753

Browse files
surfing1231surfing1231
committed
manage docs
1 parent a1b7ad7 commit e7b9753

File tree

5 files changed

+152
-12
lines changed

5 files changed

+152
-12
lines changed

‎README.md

Lines changed: 152 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,155 @@
1-
# Test Template
2-
this folder is used for test.
1+
React Node Starter Kit
2+
======================
3+
4+
This is the starter kit for ReactJS, React-Router and Fluxxor based on NodeJS.
5+
We support Nodejs 0.12.x and 0.10.x.
6+
7+
## Overview
8+
9+
We use the following major modules on both client and server:
10+
* [React](https://github.com/facebook/react) (UI components)
11+
* [Fluxxor](https://github.com/BinaryMuse/fluxxor) (FLUX)
12+
* [React-Router](https://github.com/rackt/react-router) (routing)
13+
* [axios](https://github.com/mzabriskie/axios) (HTTP request)
14+
* [lodash](https://github.com/lodash/lodash) (Utility lib)
15+
* [mocha](https://github.com/mochajs/mocha) (Test Framework)
16+
* [chai](https://github.com/chaijs/chai) (Test assertion framework)
17+
18+
On top of a basic [Express](https://github.com/visionmedia/express) app.
19+
20+
We use [Webpack](http://webpack.github.io/) and [Grunt](https://gruntjs.com/) to
21+
package our server-side CommonJS modules in a way that allows us to use them in
22+
the client-side.
23+
24+
## Features
25+
26+
- React.js + React Router + Fluxxor on the client and server
27+
- Cient side render and Server side render
28+
- Grunt + Webpack for watch + production builds, extract third party lib to a js bundle.
29+
- React Hot Loader for instant client updates
30+
- Multi Themes Mechanism
31+
- API request with Promsie. Intercept request and response
32+
- Localization and Internationalisation
33+
- Test With Mocha and Chai, Integrate with Grunt for automatic test.
34+
35+
## Installation
36+
37+
NodeJS with npm binaries and installers are available at http://nodejs.org.
38+
Grunt and CLI binaries and installers are available at http://gruntjs.com.
39+
40+
After you clone or download this starter kit, you need run this command inside your source directory to install module dependencies.
41+
42+
```bash
43+
npm install
44+
```
45+
46+
Run `grunt server` and `grunt hot` in two terminal windows.
47+
48+
Run `open -a /Applications/Google\ Chrome.app --args --disable-web-security` on Mac to open Chrome with disable security model. (Because we use gcc api to get data which does not support CROS, so we need disable security. If you use Windows, please search how to disable web security on Windows)
49+
50+
Then type `http://locahost:8000` on Chrom to see the example.
51+
52+
## Usage
53+
54+
We provide these commands for node server, hot loader server, build and test. node and hot servers should run in two different terminals.
55+
56+
```bash
57+
# start node dev server as default
58+
grunt server
59+
# explicitly start node server for development
60+
grunt server:dev
61+
# explicitly start node server for production
62+
grunt server:prod
63+
64+
# start react hot loader server
65+
grunt hot
66+
67+
# build js and css file for dev as default
68+
grunt build
69+
# explicitly for development build
70+
grunt build:dev
71+
# explicitly for produtions build
72+
grunt build:prod
73+
74+
# run mocha test
75+
grunt test
76+
77+
```
78+
79+
## Source Code Structure
80+
81+
```
82+
.
83+
├── app
84+
│   ├── actions // Fluxxor actions
85+
│   ├── stores // Fluxxor stores
86+
│   ├── constants // define some contants here, like action dispatch type
87+
│   ├── utils // utility function
88+
│   ├── views // put all reactjs component here
89+
│ │ ├── layout.hbs // template used for page render
90+
│ │ ├── components // put reusable component here, do not mixin with Fluxxor
91+
│ │ │   ├── Button.jsx
92+
│ │ │   └── CategoryItem.jsx
93+
│ │ └── pages // use for generate routes. It should mixin with Fluxxor to get data from stores.
94+
│ │ ├── App.jsx
95+
│ │ ├── Category.jsx
96+
│ │ ├── Dock.jsx
97+
│ │ ├── Home.jsx
98+
│ │ ├── Html.jsx
99+
│ │ ├── Login.jsx
100+
│ │ └── Product.jsx
101+
│   ├── api_client.js // api request client, we use "axios"
102+
│   ├── client.js // client entry
103+
│   ├── init.js // init Fluxxor
104+
│   ├── routes.jsx // define routes here, require component from ./views/pages
105+
│   └── server.js // node server container
106+
├── assets // put css and image and font here.
107+
│   ├── images
108+
│   └── themes
109+
├── lib
110+
│   ├── Localization
111+
│   └── cookie
112+
├── node_modules
113+
├── public // build file will put here
114+
│   ├── dist
115+
│   └── favicon.ico
116+
├── test
117+
│   ├── Readme.md
118+
│   ├── component.js
119+
│   ├── data
120+
│   ├── localization.js
121+
│   └── setup
122+
├── index.js // start node server. suggest with pm2 when run on production
123+
├── Gruntfile.js
124+
├── build.config.js // build configruation, when do webpack will get config from this.
125+
├── webpack.config.js // webpack base config file.
126+
├── webpack.dev.js // webpack development configuration
127+
├── webpack.prod.js // webpack production configuration
128+
├── package.json
129+
└── README.md
130+
131+
```
132+
133+
## How to Use
134+
135+
1. [Server Side Render](./docs/ServerSideRender.md)
136+
2. [Hot Loader](/docs/HotLoader.md)
137+
3. [Multi Themes Mechanism](/docs/Theme.md)
138+
4. [API Client](/docs/API_Cliet.md)
139+
5. [Localization](/lib/Localization)
140+
6. [Test](/test)
141+
142+
## Contributing
143+
144+
1. Fork it!
145+
2. Create your feature branch: git checkout -b my-new-feature
146+
3. Commit your changes: git commit -m 'Add some feature'
147+
4. Push to the branch: git push origin my-new-feature
148+
5. Submit a pull request :D
149+
150+
151+
152+
3153

4-
## in this structure:
5-
data folder is used for store the datas which will be use in test.
6-
setup folder is test system initialize script. the file in this folder will run before your test start.
7154

8-
## we use some test framework to handle the test process:
9-
1. mocha is test framework
10-
2. chai and chai-spies is test utility for test
11-
3. React test utils is used to test React components
12155

13-
## run "grunt test" to run test.
14-
**you can check "localization.js" to know how to do normal**
15-
**you can check "component.js" to know how to do react test**

‎doc/API_Cliet.md renamed to ‎docs/API_Cliet.md

File renamed without changes.

‎doc/HotLoader.md renamed to ‎docs/HotLoader.md

File renamed without changes.

‎doc/ServerSideRender.md renamed to ‎docs/ServerSideRender.md

File renamed without changes.

‎doc/Theme.md renamed to ‎docs/Theme.md

File renamed without changes.

0 commit comments

Comments
 (0)