ant-design/docs/react/use-in-typescript.en-US.md

199 lines
6.6 KiB
Markdown
Raw Normal View History

---
2018-10-28 17:35:09 +08:00
order: 4
title: Use in TypeScript
---
Let's create a TypeScript project by using `create-react-app`, then import `antd` step by step.
---
## Install and Initialization
Ensure your system has installed latest version of [yarn](https://yarnpkg.com) or [npm](https://www.npmjs.com/).
Create a new project named `antd-demo-ts` using yarn.
```bash
2019-01-30 15:03:11 +08:00
$ yarn create react-app antd-demo-ts --typescript
```
If you are using npm (we will use yarn in the following instructions, it's ok to replace yarn with npm)
```bash
2019-01-30 15:03:11 +08:00
$ npx create-react-app antd-demo-ts --typescript
```
Then we go inside `antd-demo-ts` and start it.
```bash
$ cd antd-demo-ts
$ yarn start
```
Open browser at http://localhost:3000/, it renders a header saying "Welcome to React" on the page.
## Import antd
```bash
$ yarn add antd
```
Modify `src/App.tsx`, import Button component from `antd`.
```jsx
2019-01-30 15:03:11 +08:00
import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';
2019-01-30 15:03:11 +08:00
class App extends Component {
render() {
return (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
}
}
export default App;
```
Add `antd/dist/antd.css` at the top of `src/App.css`.
```css
@import '~antd/dist/antd.css';
.App {
text-align: center;
}
...
```
Ok, reboot with `yarn start`, 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
2019-05-07 14:57:32 +08:00
We are successfully running antd components now but in the real world, there are still lots of problems about antd-demo-ts. 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 create-react-app's custom config solutions.
Import react-app-rewired and modify the `scripts` field in package.json. Due to new [react-app-rewired@2.x](https://github.com/timarney/react-app-rewired#alternatives) issue, you shall need [customize-cra](https://github.com/arackaf/customize-cra) along with react-app-rewired.
```
$ yarn add react-app-rewired customize-cra
```
```diff
/* package.json */
"scripts": {
2019-01-30 15:03:11 +08:00
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
}
```
Then create a `config-overrides.js` at root directory of your project for further overriding.
```js
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
```
2019-01-31 17:17:24 +08:00
### Use babel-plugin-import
2019-01-31 17:17:24 +08:00
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([How does it work?](/docs/react/getting-started#Import-on-Demand)). We are now trying to install it and modify `config-overrides.js`.
```bash
2019-01-31 17:17:24 +08:00
$ yarn add babel-plugin-import
```
2019-01-31 17:17:24 +08:00
```diff
+ const { override, fixBabelImports } = require('customize-cra');
2019-01-31 17:17:24 +08:00
- module.exports = function override(config, env) {
- // do stuff with the webpack config...
- return config;
- };
+ module.exports = override(
+ fixBabelImports('import', {
+ libraryName: 'antd',
+ libraryDirectory: 'es',
+ style: 'css',
+ }),
+ );
```
Remove the `@import '~antd/dist/antd.css';` statement added before because `babel-plugin-import` will import styles and import components like below:
```diff
2019-01-31 17:17:24 +08:00
// src/App.js
import React, { Component } from 'react';
- import Button from 'antd/lib/button';
+ import { Button } from 'antd';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
}
}
2019-01-31 17:17:24 +08:00
export default App;
```
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
2019-01-31 17:17:24 +08:00
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 [addLessLoader](https://github.com/arackaf/customize-cra#addlessloaderloaderoptions) to achieve this. Import it and modify `config-overrides.js` like below.
```bash
2019-01-31 17:17:24 +08:00
$ yarn add less less-loader
```
```diff
2019-01-31 17:17:24 +08:00
- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
2019-01-31 21:14:29 +08:00
- style: 'css',
+ style: true,
2019-01-31 17:17:24 +08:00
}),
+ addLessLoader({
+ javascriptEnabled: true,
+ modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);
```
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.
2019-01-31 17:23:49 +08:00
> You could also try [craco](https://github.com/sharegate/craco) and [craco-antd](https://github.com/FormAPI/craco-antd) to customize create-react-app webpack config same as customize-cra does.
2019-01-31 17:23:49 +08:00
## Alternative ways
2019-05-07 14:57:32 +08:00
You can also follow instructions in [Use in create-react-app](/docs/react/use-with-create-react-app.en-US.md), then use to setup the TypeScript development environment by yourself.
2019-01-31 17:17:24 +08:00
2019-01-31 17:23:49 +08:00
And you can use [react-scripts-ts-antd](https://www.npmjs.com/package/react-scripts-ts-antd) which includes ts-import-plugin, react-app-rewired, scss, less and etc. You can create a new project that without any configurations by running just one command.
2019-01-31 17:17:24 +08:00
2019-01-31 17:23:49 +08:00
## Alternative ways
2019-01-31 17:23:49 +08:00
- [Create React apps (with Typescript and antd) with no build configuration](https://github.com/SZzzzz/react-scripts-ts-antd)
- [react-app-rewire-typescript][https://github.com/lwd-technology/react-app-rewire-typescript]
- [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin)
2019-01-31 17:17:24 +08:00
- [create-react-app Adding TypeScript](https://facebook.github.io/create-react-app/docs/adding-typescript)
- [Migrating from create-react-app-typescript to Create React App](https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/)