Ant Design allows to customize some basic design aspects in order to meet the needs of UI diversity from business and brand, including primary color, border radius, border color, etc.
Ant Design allows you to customize some basic design aspects in order to meet the needs of UI diversity from business and brand, including primary color, border radius, border color, etc.
We are using [Less](http://lesscss.org/) as the development language of style. A set of less variables are defined for each design aspect that can be customized to your needs.
We are using [Less](http://lesscss.org/) as the development language for styling. A set of less variables are defined for each design aspect that can be customized to your needs.
@ -23,7 +23,7 @@ You can use this [example](https://github.com/ant-design/antd-init/tree/master/e
### 1) Using `theme` property (recommended way)
Specify the `theme` property in `package.json` or `.roadhogrc` file, whose value can be either an object or the path to a JS file that contains the custom values of specific variables:
Specify the `theme` property in the `package.json` or `.roadhogrc` file, whose value can be either an object or the path to a JS file that contains the custom values of specific variables:
- example of directly specifying the custom values as an object:
```js
"theme": {
@ -35,15 +35,15 @@ Specify the `theme` property in `package.json` or `.roadhogrc` file, whose value
"theme": "./theme.js",
```
This approach is available only when using [antd-init](https://github.com/ant-design/antd-init) or [dva-cli](https://github.com/dvajs/dva-cli). If you choose other boilerplates, you can write webpack config about [less-loader modifyVars](https://github.com/webpack/less-loader#less-options) like [atool-build ](https://github.com/ant-tool/atool-build/blob/a4b3e3eec4ffc09b0e2352d7f9d279c4c28fdb99/src/getWebpackCommonConfig.js#L131-L138) does.
This approach is available only when using [antd-init](https://github.com/ant-design/antd-init) or [dva-cli](https://github.com/dvajs/dva-cli). If you choose other boilerplates, you can write a webpack config about [less-loader modifyVars](https://github.com/webpack/less-loader#less-options) like [atool-build ](https://github.com/ant-tool/atool-build/blob/a4b3e3eec4ffc09b0e2352d7f9d279c4c28fdb99/src/getWebpackCommonConfig.js#L131-L138) does.
Note:
- Importing style from less files is necessary.
- If you import styles by specifying the `style` option of [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), change it from `'css'` to `true`, which will importing the `less` version of antd.
- Importing styles from less files is necessary.
- If you import styles by specifying the `style` option of [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), change it from `'css'` to `true`, which will import the `less` version of antd.
- If you import styles from `'antd/dist/antd.css'`, change it to `antd/dist/antd.less`.
- When using `dva-cli@0.7.0+`, you should add the `theme` block to [.roadhogrc](https://github.com/dvajs/dva-example-user-dashboard/commit/d6da33b3a6e18eb7f003752a4b00b5a660747c31) instead of `package.json`.
- If you want to override `@icon-url`, the quotes must be contained in value like `"@icon-url": "'your-icon-font-path'"` ([A fix sample](https://github.com/visvadw/dvajs-user-dashboard/pull/2)).
- If you want to override `@icon-url`, the value must be contained in quotes like `"@icon-url": "'your-icon-font-path'"` ([A fix sample](https://github.com/visvadw/dvajs-user-dashboard/pull/2)).
### 2) Overriding Less variables (alternative way)
Ant Design React is dedicated to providing a **good development experience** for programmers and make sure that you had installed [Node.js](https://nodejs.org/)(> v6.5) correctly.
Ant Design React is dedicated to providing a **good development experience** for programmers. Make sure that you had installed [Node.js](https://nodejs.org/)(> v6.5) correctly.
---
@ -11,15 +11,15 @@ Before delving into Ant Design React, a good knowledge of [React](http://faceboo
## First Example
The following CodePen demo is the simplest usage case, and it's also a good habit to fork this demo to provide a re-producible demo while reporting a bug. Please don't use this demo as a scaffold in production.
The following CodePen demo is the simplest use case, and it's also a good habit to fork this demo to provide a re-producible demo while reporting a bug. Please don't use this demo as a scaffold in production.
During development, you may need to compile and debug JSX and ES2015 code, and even proxy some of the request to mocked data or some external services. And all of these to be done with a quick feedback provided through hot reloading of changes.
During development, you may need to compile and debug JSX and ES2015 code, and even proxy some of the requests to mock data or other external services. All of these can be done with quick feedback provided through hot reloading of changes.
Such features, together with packaging the production version are covered in this work flow.
Such features, together with packaging the production version, are covered in this work flow.
### 1. Installation
@ -106,7 +106,7 @@ $ npm start
$ npm run build
```
Entry files will be built and generated in `dist` directory, then we can deploy it to different environments.
Entry files will be built and generated in `dist` directory, where we can deploy it to different environments.
> This guide is designed to help you to understand how to use antd, so it may not be similar to what you do in the real world.
> But you can use those tools in your project, depending on your context and needs.
@ -117,11 +117,11 @@ Ant Design React supports all the modern browsers and IE9+.
You need to provide [es5-shim](https://github.com/es-shims/es5-shim) and [es6-shim](https://github.com/paulmillr/es6-shim) and other polyfills for IE browsers.
If you are using babel, we strongly recommend to use [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) and [babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/) instead of those two shims.
If you are using babel, we strongly recommend using [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) and [babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/) instead of those two shims.
> Please avoid using both the babel and shim way at the same time
> Please avoid using both the babel and shim methods at the same time.
> If you run into problem about [startsWith ](https://github.com/ant-design/ant-design/issues/3400#issuecomment-253181445), you should import [es6-shim](https://github.com/paulmillr/es6-shim) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) as workaround.
> If you run into problems with [startsWith ](https://github.com/ant-design/ant-design/issues/3400#issuecomment-253181445), you should import [es6-shim](https://github.com/paulmillr/es6-shim) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) as a workaround.
```html
<!DOCTYPE html>
@ -155,15 +155,15 @@ You may encounter problems like [#28](https://github.com/ant-tool/atool-build/is
## Customized Work Flow
If you want to customize your work flow, we recommend to use [webpack](http://webpack.github.io/) to build and debug code.
If you want to customize your work flow, we recommend using [webpack](http://webpack.github.io/) to build and debug code.
Also, you can use any [scaffold](https://github.com/enaqx/awesome-react#boilerplates) available in React ecosystem. If you encounter problems, you can use our [webpack config](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) and [modify it](http://ant-tool.github.io/webpack-config.html).
Also, you can use any [scaffold](https://github.com/enaqx/awesome-react#boilerplates) available in the React ecosystem. If you encounter problems, you can use our [webpack config](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) and [modify it](http://ant-tool.github.io/webpack-config.html).
There are some [scaffolds](https://github.com/ant-design/ant-design/issues/129) which have already integrated antd, so you can try and start with one of these, and even contribute.
## Import on Demand
If you see logs like below screenshot, you might import all components by writing `import { Button } from 'antd';`, this will affect your app's network perfermance.
If you see logs like below screenshot, you might be importing all components by writing `import { Button } from 'antd';`. This will affect your app's network perfermance.
```
You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
@ -178,7 +178,7 @@ import Button from 'antd/lib/button';
import 'antd/lib/button/style'; // or antd/lib/button/style/css for css format file
```
We strongly recommend to use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), which can convert the following code to the 'antd/lib/xxx' way:
We strongly recommend using [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), which can convert the following code to the 'antd/lib/xxx' way:
```jsx
import { Button } from 'antd';
@ -196,4 +196,4 @@ And this plugin can load styles too, read [usage](https://github.com/ant-design/
## Tips
- You can use any `npm` modules.
- We recommend to write code in [ES2015](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) as `babel` has been integrated in our work flow.
- We recommend to write code in [ES2015](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) as `babel` has been integrated into our work flow.
@ -49,7 +49,7 @@ You can subscribe to this feed for new version notifications: https://github.com
### Using npm or yarn
**We recommend using npm or yarn to install**，it not only makes development easier，but also allow you to take advantage of the rich ecosystem of javascript packages and tooling.
**We recommend using npm or yarn to install**，it not only makes development easier，but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
```bash
$ npm install antd --save
@ -67,7 +67,7 @@ Add `script` and `link` tags in your browser and use the global variable `antd`.
We provide `antd.js``antd.css` and `antd.min.js``antd.min.css` under `antd/dist` in antd's npm package. You can also download these files directly from [](https://cdnjs.com/libraries/antd) or [unpkg](https://unpkg.com/).
> **We strongly discourage loading these entire files** this will add bloat to your application and make it more difficult to receive bugfixes and updates. Ant is intended to be used in conjunction with a build tool, such as [webpack](https://webpack.github.io/), which will make it easy to import only the parts of antd that you are using.
> **We strongly discourage loading the entire files** this will add bloat to your application and make it more difficult to receive bugfixes and updates. Antd is intended to be used in conjunction with a build tool, such as [webpack](https://webpack.github.io/), which will make it easy to import only the parts of antd that you are using.
## Usage
@ -125,7 +125,7 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
> Note:
> - set `allowSyntheticDefaultImports` to prevent `error TS1192: Module 'react' has no default export`.
> - Don't use @types/antd, antd provides a built-in ts definition already.
> - Don't use @types/antd, as antd provides a built-in ts definition already.
[dva](https://github.com/dvajs/dva) is a React and redux based, lightweight and elm-style framework, which supports side effects, hot module replacement, dynamic on demand, react-native, SSR. And it has been widely used in production environment.
[dva](https://github.com/dvajs/dva) is a React and redux based, lightweight and elm-style framework, which supports side effects, hot module replacement, dynamic on demand, react-native, and SSR. It has been widely used in production environments.
This article will guide you to create a simple application from zero using dva and antd.
@ -13,7 +13,7 @@ Include the following:
## Install dva-cli
Install dva-cli with npm, and make sure the version is larger than `0.8.1`.
Install dva-cli with npm, and make sure the version is later than `0.8.1`.
```bash
$ npm install dva-cli -g
@ -146,7 +146,7 @@ export default ProductList;
After completing the UI, we will begin processing the data and logic.
dva manages the 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 updates, effects for async logic, and subscriptions for data source subscribe.
Let's create a model `models/products.js` by typing:
@ -166,8 +166,8 @@ export default {
In this model:
- `namespace` represent the key on global state
- `state` is the initial value, here is an empty array
- `namespace` represents the key on global state
- `state` is the initial value, here it is an empty array
- `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,7 +179,7 @@ Then don't forget to require it in `index.js`:
## Connect
So far, we have completed a separate model and component. Then how do we connect them together?
So far, we have completed a separate model and component. How do we connect them together?
dva provides a `connect` method. If you are familiar with redux, this `connect` is from react-router.
@ -271,7 +271,7 @@ We have completed a simple application, but you may still have lots of questions
You can:
- Visit [dva official website](https://github.com/dvajs/dva).
- Be familiar with the [8 Conpects](https://github.com/dvajs/dva/blob/master/docs/Concepts.md), and understand how they are connected together
- Be familiar with the [8 Concepts](https://github.com/dvajs/dva/blob/master/docs/Concepts.md), and understand how they are connected together
- Know all [dva APIs](https://github.com/dvajs/dva/blob/master/docs/API.md)
- Checkout [dva knowledgemap](https://github.com/dvajs/dva-knowledgemap), including all the basic knowledge with ES6, React, dva
`antd` is designed to provide high-quality React UI components which following Ant Design Specification. So, we are not going to implement other functions which are not relative to `antd`'s target, and recommend to use excellent third-party library which came from React community:
`antd` is designed to provide high-quality React UI components which follow the Ant Design Specification. So, we are not going to implement other functions which are not relative to `antd`'s target, and recommend using the excellent third-party library which have come from the React community:
@ -21,8 +21,8 @@ Create a new project named `antd-demo`.
$ create-react-app antd-demo
```
The tool will create and initialize environment and dependencies automaticly,
please try config your proxy setting or use other npm registry if any network errors happen during it.
The tool will create and initialize environment and dependencies automatically,
please try config your proxy setting or use another npm registry if any network errors happen during it.
Then we go inside `antd-demo` and start it.
@ -91,15 +91,15 @@ Add `antd/dist/antd.css` at the top of `src/App.css`.
...
```
Ok, you now see a blue primary button displaying on the page. Next you can choose any components of `antd` to develop your application. Visit other workflow of `create-react-app` at its [User Guide ](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
Ok, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `create-react-app` at its [User Guide ](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
## Advanced Guides
We are successfully running antd components now but in the real world, there are still lots of problems about antd-demo.
For instance, we actually import all styles of components in the project which maybe a network perfermance issue.
For instance, we actually import all styles of components in the project which may be a network performance issue.
Now we need to customize the default webpack config. We can achieve that by using [react-app-rewired](https://github.com/timarney/react-app-rewired) which is one of custom create-react-app config solutions.
Now we need to customize the default webpack config. We can achieve that by using [react-app-rewired](https://github.com/timarney/react-app-rewired) which is one of create-react-app's custom config solutions.
Import react-app-rewired and modify the `scripts` field in package.json.
@ -167,11 +167,11 @@ Remove the `@import '~antd/dist/antd.css';` statement added before because `babe
export default App;
```
Then reboot with `yarn start` and visit demo page, you should not find any [warning message](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/docs/react/getting-started#Import-on-Demand).
Then reboot with `yarn start` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/docs/react/getting-started#Import-on-Demand).
### Customize Theme
According to [Customize Theme documentation](/docs/react/customize-theme), we need `less` variables modify ability of [less-loader](https://github.com/webpack/less-loader). We could use [react-app-rewire-less](http://npmjs.com/react-app-rewire-less) to achieve that, import it and modify `config-overrides.js` like below.
According to the [Customize Theme documentation](/docs/react/customize-theme), to customize the theme, we need to modify `less` variables with tools such as [less-loader](https://github.com/webpack/less-loader). We can also use [react-app-rewire-less](http://npmjs.com/react-app-rewire-less) to achieve this. Import it and modify `config-overrides.js` like below.
We use `modifyVars` option of [less-loader](https://github.com/webpack/less-loader#less-options) here, you can see a green button rendered on the page after reboot start server.
We use `modifyVars` option of [less-loader](https://github.com/webpack/less-loader#less-options) here, you can see a green button rendered on the page after rebooting the start server.
## eject
You can also could try [yarn run eject](https://github.com/facebookincubator/create-react-app#converting-to-a-custom-setup) for custom setup of create-react-app, although you should dig into it by yourself.
You can also could try [yarn run eject](https://github.com/facebookincubator/create-react-app#converting-to-a-custom-setup) for a custom setup of create-react-app, although you should dig into it by yourself.
## Source code and other boilerplates
Finally, we used antd with create-react-app successfully, you can learn these practice for your own webpack workflow too, and find more webpack configs in the [atool-build](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js). (For instance, add [moment noParse](https://github.com/ant-tool/atool-build/blob/e4bd2959689b6a95cb5c1c854a5db8c98676bdb3/src/getWebpackCommonConfig.js#L90) to avoid loading all language files)
Finally, we used antd with create-react-app successfully, you can learn these practices for your own webpack workflow too, and find more webpack configs in the [atool-build](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js). (For instance, add [moment noParse](https://github.com/ant-tool/atool-build/blob/e4bd2959689b6a95cb5c1c854a5db8c98676bdb3/src/getWebpackCommonConfig.js#L90) to avoid loading all language files.)
There are a lot of great boilerplates like create-react-app in React community. There are some source code samples of importing antd in them if you encounter some problems.
There are a lot of great boilerplates like create-react-app in the React community. There are some source code samples of importing antd in them if you encounter some problems.
henryv0
7 years ago
偏右