Let's create a TypeScript project by using create-react-app
, then import antd
step by step.
We build
antd
based on latest stable version of TypeScript (>=4.0.0
), please make sure your project dependency matches it.
Ensure your system has installed latest version of yarn or npm.
Create a new cra-template-typescript project named antd-demo-ts
using yarn.
$ yarn create react-app antd-demo-ts --template typescript
If you are using npm (we will use yarn in the following instructions, it's ok to replace yarn with npm)
$ npx create-react-app antd-demo-ts --template typescript
Then we go inside antd-demo-ts
and start it.
$ cd antd-demo-ts$ yarn start
Open browser at http://localhost:3000/, it renders a header saying "Welcome to React" on the page.
$ yarn add antd
Modify src/App.tsx
, import Button component from antd
.
import React from 'react';import type { FC } from 'react';import { Button } from 'antd';import 'antd/dist/reset.css';import './App.css';const App: FC = () => (<div className="App"><Button type="primary">Button</Button></div>);export default App;
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 it's User Guide.
antd
is written in TypeScript with complete definitions, try out and enjoy the property suggestion and typing check.
Don't install
@types/antd
.
In the real world, we usually have to modify default webpack config for custom needs such as themes. We can achieve that by using craco which is one of create-react-app's custom config solutions.
Install craco and modify the scripts
field in package.json
.
$ yarn add @craco/craco
/* package.json */"scripts": {- "start": "react-scripts start",- "build": "react-scripts build",- "test": "react-scripts test",+ "start": "craco start",+ "build": "craco build",+ "test": "craco test",}
Then create a craco.config.js
at root directory of your project for further overriding.
/* craco.config.js */module.exports = {// ...};
Ref to the Customize Theme documentation. Modify theme with ConfigProvider:
import React from 'react';import { ConfigProvider } from 'antd';export default () => (<ConfigProvidertheme={{token: {colorPrimary: '#00b96b',},}}><MyApp /></ConfigProvider>);
Follow manual in Adding TypeScript to setup TypeScript development environment if you already create a project by Use in create-react-app.