ant-design

6.8 KiB

Raw Blame History

order	title
5	Use in TypeScript

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 (>=3.8.4), please make sure your project dependency matches it.

Install and Initialization

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

# or

npx create-react-app my-app --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 --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.

Import antd

$ yarn add antd

Modify src/App.tsx, import Button component from antd.

import React, { Component } from 'react';
import Button from 'antd/es/button';
import './App.css';

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.

@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 it's User Guide.

Advanced Guides

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 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 issue, you shall need customize-cra along with react-app-rewired.

$ yarn add react-app-rewired customize-cra

/* package.json */
"scripts": {
-   "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.

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

Use babel-plugin-import

babel-plugin-import is a babel plugin for importing components on demand (How does it work?). We are now trying to install it and modify config-overrides.js.

$ yarn add babel-plugin-import

+ const { override, fixBabelImports } = require('customize-cra');

- 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:

  // src/App.js
  import React, { Component } from 'react';
- import Button from 'antd/es/button';
+ import { Button } from 'antd';
  import './App.css';

  const App: React.FC<{}> = () => (
    <div className="App">
      <Button type="primary">Button</Button>
    </div>
  );

  export default App;

Then reboot with yarn start and visit the demo page, you should not find any warning messages in the console, which prove that the import on demand config is working now. You will find more info about it in this guide.

Customize Theme

According to the Customize Theme documentation, to customize the theme, we need to modify less variables with tools such as less-loader. We can also use addLessLoader to achieve this. Import it and modify config-overrides.js like below.

$ yarn add less less-loader

- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
-   style: 'css',
+   style: true,
  }),
+ addLessLoader({
+   javascriptEnabled: true,
+   modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);

We use modifyVars option of less-loader here, you can see a green button rendered on the page after rebooting the start server.

You could also try craco and craco-antd to customize create-react-app webpack config same as customize-cra does.

Alternative ways

You can also follow instructions in Use in create-react-app, then use to setup the TypeScript development environment by yourself.

And you can use 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.

6.8 KiB Raw Blame History