Skip to content

Commit 4dde14c

Browse files
silentcloudsilentcloud
committed
add doc for create-react-app, ref #1362 
1 parent 9d22319 commit 4dde14c

File tree

2 files changed

+208
-0
lines changed

2 files changed

+208
-0
lines changed

‎docs/react/use-with-create-react-app.en-US.md

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
---
2+
order: 3
3+
title: Use in create-react(-native)-app
4+
---
5+
6+
[create-react-app](https://github.com/facebookincubator/create-react-app) (Web project) / [create-react-native-app](https://github.com/react-community/create-react-native-app)(React Native project) is one of best React application development tool, we are going to use `antd-mobile` within it；
7+
8+
## Install and Initialization
9+
10+
We need to install the appropriate tools first, you may need install [yarn](https://github.com/yarnpkg/yarn/) too.
11+
12+
```bash
13+
$ npm install -g yarn
14+
$ npm install -g create-react-app (web project)
15+
$ npm install -g create-react-native-app (react-native project)
16+
```
17+
18+
Then we create a new project named antm-demo.
19+
20+
```bash
21+
$ create-react-app antm-demo (web project)
22+
$ create-react-native-app antm-demo (react-native project)
23+
```
24+
25+
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.
26+
27+
Then we go inside antm-demo and start it.
28+
29+
```bash
30+
$ cd antm-demo
31+
$ yarn start
32+
```
33+
34+
- `Web project`: Open browser at http://localhost:3000/, it renders a header saying "Welcome to React" on the page.
35+
- `React Native project`: Run `npm run ios` in terminal, it should be ok if you can see the page content in simulator.
36+
37+
## Import antd-mobile
38+
39+
- ### Web project
40+
41+
- ### React Native project
42+
43+
1. Now we install antd-mobile and [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)(A babel plugin for importing components on demand [principle](https://github.com/ant-design/ant-design/blob/master/docs/react/getting-started#Import-on-Demand)) from yarn or npm.
44+
45+
```bash
46+
$ yarn add antd-mobile
47+
$ yarn add antd-mobile --dev
48+
```
49+
2. Modify the `.babelrc` config, then restart the service.
50+
51+
```json
52+
{
53+
"presets": ["babel-preset-expo"],
54+
"plugins": [["import", { "libraryName": "antd-mobile" }]],
55+
"env": {
56+
...
57+
}
58+
}
59+
```
60+
3. Modify the `App.js` file, import `Button` component from antd-mobile.
61+
62+
```js
63+
...
64+
import { Button } from 'antd-mobile';
65+
66+
...
67+
render() {
68+
return (
69+
...
70+
<Button>antd-mobile button</Button>
71+
...
72+
);
73+
}
74+
```
75+
76+
## Customize Theme
77+
78+
- ### Web project
79+
80+
- ### React Native project
81+
82+
1. Create `theme.js` file in the project root, overwrite the theme variables that you want to change, eg:
83+
84+
```js
85+
module.exports = {
86+
brand_primary: 'red',
87+
color_link: 'red',
88+
border_color_base: 'green',
89+
};
90+
```
91+
2. Create `scripts/custom-rn-theme.js` file in the project root, copy the contents of [rn-custom-ui/scripts/custom-rn-theme.js](https://github.com/ant-design/antd-mobile-samples/blob/master/rn-custom-ui/scripts/custom-rn-theme.js) to `scripts/custom-rn-theme.js`.
92+
93+
3. Modify the `start` script in `package.json` like this:
94+
95+
```json
96+
"scripts": {
97+
...
98+
"start": "node scripts/custom-rn-theme && react-native-scripts start",
99+
...
100+
}
101+
102+
Then restart the service.
103+
104+
> Note: if you want to overwrite some styles for a single component, please see [ant-design-mobile/issues/1174](https://github.com/ant-design/ant-design-mobile/issues/1174#issuecomment-295256831) (currently support 1.x verion)

‎docs/react/use-with-create-react-app.zh-CN.md

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
---
2+
order: 3
3+
title: 在 create-react(-native)-app 中使用
4+
---
5+
6+
[create-react-app](https://github.com/facebookincubator/create-react-app) (Web 项目) / [create-react-native-app](https://github.com/react-community/create-react-native-app)(React Native 项目) 是业界最优秀的 React 相关应用开发工具之一，本文档尝试以此工具来使用 antd-mobile 组件；
7+
8+
## 安装和初始化
9+
10+
首先我们需要在命令行中安装相应工具，你可能还需要安装 [yarn](https://github.com/yarnpkg/yarn/)。
11+
12+
```bash
13+
$ npm install -g yarn
14+
$ npm install -g create-react-app (web 项目)
15+
$ npm install -g create-react-native-app (react-native 项目)
16+
```
17+
18+
然后新建一个项目。
19+
20+
```bash
21+
$ create-react-app antm-demo (web 项目)
22+
$ create-react-native-app antm-demo (react-native 项目)
23+
```
24+
25+
工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。
26+
27+
然后我们进入项目并启动。
28+
29+
```bash
30+
$ cd antm-demo
31+
$ yarn start
32+
```
33+
34+
- `Web 项目`：此时浏览器访问 http://localhost:3000/ ，看到 `Welcome to React` 的界面就算成功了。
35+
- `React Native 项目`：运行 `npm run ios` 能在模拟器中打开页面就算成功了。
36+
37+
## 引入 antd-mobile
38+
39+
- ### Web 项目
40+
41+
- ### React-Native 项目
42+
43+
1. 现在从 yarn 或 npm 安装并引入 antd-mobile 和 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)（一个用于按需加载组件代码和样式的 babel 插件（[原理](https://github.com/ant-design/ant-design/blob/master/docs/react/getting-started#%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD)））
44+
45+
```bash
46+
$ yarn add antd-mobile
47+
$ yarn add antd-mobile --dev
48+
```
49+
2. 修改 `.babelrc` 配置，并重新启动服务
50+
51+
```json
52+
{
53+
"presets": ["babel-preset-expo"],
54+
"plugins": [["import", { "libraryName": "antd-mobile" }]],
55+
"env": {
56+
...
57+
}
58+
}
59+
```
60+
3. 修改 `App.js`, 引入 antd-mobile 按钮组件。
61+
62+
```js
63+
...
64+
import { Button } from 'antd-mobile';
65+
66+
...
67+
render() {
68+
return (
69+
...
70+
<Button>antd-mobile button</Button>
71+
...
72+
);
73+
}
74+
```
75+
76+
## 自定义主题
77+
78+
- ### Web 项目
79+
80+
- ### React-Native 项目：
81+
82+
1. 在项目根目录创建 `theme.js` 文件，并覆盖你要改写的变量值，eg：
83+
84+
```js
85+
module.exports = {
86+
brand_primary: 'red',
87+
color_link: 'red',
88+
border_color_base: 'green',
89+
};
90+
```
91+
2. 项目根目录下创建 `scripts/custom-rn-theme.js` 文件，文件内容 copy [rn-custom-ui/scripts/custom-rn-theme.js](https://github.com/ant-design/antd-mobile-samples/blob/master/rn-custom-ui/scripts/custom-rn-theme.js) 该文件内容即可；
92+
93+
3. 改写 `package.json` 中 `start` 命令如下：
94+
95+
```json
96+
"scripts": {
97+
...
98+
"start": "node scripts/custom-rn-theme && react-native-scripts start",
99+
...
100+
}
101+
```
102+
重新执行 `npm start`。
103+
104+
> Note: 单个组件改写部分样式的方法可以参考： [ant-design-mobile/issues/1174](https://github.com/ant-design/ant-design-mobile/issues/1174#issuecomment-295256831)， 目前 1.x 支持

0 commit comments

Comments
 (0)