Update practical-project.en-US.md

Fix some grammatical errors
pull/6689/head
iamcastelli 8 years ago committed by GitHub
parent 950c321b25
commit 6bbbeb4a03

@ -13,7 +13,7 @@ Include the following:
## Install dva-cli
Install dva-cli with npm, and make sure the version is larger then `0.7.0`.
Install dva-cli with npm, and make sure the version is larger than `0.7.0`.
```bash
$ npm install dva-cli -g
@ -23,15 +23,15 @@ $ dva -v
## Create New App
After installed dva-cli, you can have access to the `dva` command in terminal ([can't access?](http://stackoverflow.com/questions/15054388/global-node-modules-not-installing-correctly-command-not-found)). Now, create a new application with `dva new`.
After you have installed dva-cli, you can have access to the `dva` command in terminal ([can't access?](http://stackoverflow.com/questions/15054388/global-node-modules-not-installing-correctly-command-not-found)). Now, create a new application with `dva new`.
```bash
$ dva new dva-quickstart
```
This creates `dva-quickstart` directory, that contains the project directories and files, and provides development server, build script, mock service, proxy server and so on.
This creates a `dva-quickstart` directory, that contains the project directories and files, and provides a development server, build script, mock service, proxy server and so on.
Then `cd` the `dva-quickstart` directory, and start the development server.
Then `cd` to the `dva-quickstart` directory, and start the development server.
```bash
$ cd dva-quickstart
@ -51,11 +51,11 @@ Note that the development build is not optimized.
To create a production build, use npm run build.
```
Open http://localhost:8000 in your browser, you will see dva welcome page.
Open http://localhost:8000 in your browser, you will see the dva welcome page.
## Integrate antd
Install `antd` and `babel-plugin-import` with npm. `babel-plugin-import` is used to automatically import scripts and stylesheets from antd in demand. See [repo](https://github.com/ant-design/babel-plugin-import) 。
Install `antd` and `babel-plugin-import` with npm. `babel-plugin-import` is used to automatically import scripts and stylesheets from antd on demand. See [repo](https://github.com/ant-design/babel-plugin-import) 。
```bash
$ npm install antd babel-plugin-import --save
@ -71,7 +71,7 @@ Edit `.roadhogrc` to integrate `babel-plugin-import`.
],
```
> Notice: dva-cli's build and server is bases on roadhog, view [roadhog#Configuration](https://github.com/sorrycc/roadhog/blob/master/README_en-us.md#configuration) for more `.roadhogrc` Configuration.
> Notice: dva-cli's build and server is based on roadhog, view [roadhog#Configuration](https://github.com/sorrycc/roadhog/blob/master/README_en-us.md#configuration) for more `.roadhogrc` Configuration.
## Define Router
@ -105,7 +105,7 @@ As your application grows and you notice you are sharing UI elements between mul
Let's create a `ProductList` component that we can use in multiple places to show a list of products.
Create `components/ProductList.js` and typing:
Create `components/ProductList.js` by typing:
```javascript
import React from 'react';
@ -144,11 +144,11 @@ export default ProductList;
## Define Model
After complete the UI, we will begin processing the data and logic.
After completing the UI, we will begin processing the data and logic.
dva manages domain model with `model`, with reducers for synchronous state update, effects for async logic, and subscriptions for data source subscribe.
dva manages the domain model with `model`, with reducers for synchronous state update, effects for async logic, and subscriptions for data source subscribe.
Let's create a model `models/products.js` and typing:
Let's create a model `models/products.js` by typing:
```javascript
import dva from 'dva';
@ -168,7 +168,7 @@ In this model:
- `namespace` represent the key on global state
- `state` is the initial value, here is an empty array
- `reducers` is equal to reducer in redux, accepting action, and update state synchronously
- `reducers` is equivalent to a reducer in redux, accepting an action, and update state simultaneously
Then don't forget to require it in `index.js`:
@ -179,11 +179,11 @@ Then don't forget to require it in `index.js`:
## Connect
So far, we have completed a separate model and component. Then how to connect these together?
So far, we have completed a separate model and component. Then how do we connect them together?
dva provides a `connect` method. If you are familiar with redux, this `connect` is from react-router.
Edit `routes/Products.js` and replace with following:
Edit `routes/Products.js` and replace it with the following:
```javascript
import React from 'react';
@ -233,7 +233,7 @@ Refresh your browser, you should see the following result:
## Build
Now that we've written our application and verified that it works in development, it's time to get it ready to deploy to our users. To do so, run the following command:
Now that we've written our application and verified that it works in development, it's time to get it ready for deployment to our users. To do so, run the following command:
```bash
$ npm run build
@ -260,7 +260,7 @@ The `build` command packages up all of the assets that make up your application
We have completed a simple application, but you may still have lots of questions, such as:
- How to dealing with async logic
- How to deal with async logic
- How to load initial data elegantly
- How to handle onError globally and locally
- How to load Routes and Models on demand

Loading…
Cancel
Save