8.1 KiB
| order | title |
|---|---|
| 3 | Use in create-react-app |
create-react-app is one of the best React application development tools. We are going to use antd within it and modify the webpack config for some customized needs.
Install and Initialization
Before all start, you may need install yarn.
$ yarn create react-app antd-demo
# or
$ npx create-react-app antd-demo
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.
$ cd antd-demo
$ yarn start
Open the browser at http://localhost:3000/. It renders a header saying "Welcome to React" on the page.
Import antd
Below is the default directory structure.
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ └── logo.svg
└── yarn.lock
Now we install antd from yarn or npm.
$ yarn add antd
Modify src/App.js, 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, 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 .
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 styles of all components in the project which may be a css bundle size issue (It is OK then if you don't care the gzipped 60kb css file size).
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
Note: antd support ES6 tree shaking by default even without this babel plugin for js part.
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';
class App extends Component {
render() {
return (
<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.
Replace momentjs to Day.js
You can use antd-dayjs-webpack-plugin plugin to replace momentjs to Day.js to reduce bundle size dramatically.
$ yarn add antd-dayjs-webpack-plugin
const { override, addWebpackPlugin } = require('customize-cra');
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
module.exports = override(addWebpackPlugin(new AntdDayjsWebpackPlugin()));
eject
You can also eject your application using yarn run eject 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 practices for your own webpack workflow too, and find more webpack configs in the atool-build. (For instance, add moment noParse to avoid loading all language files.)
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.