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

order	title
4	Use in create-react-app

create-react-app is one of best React application development tool, we are going to use antd within it and modify the webpack config for some customized needs.

---

Install and Initialization

We need to install create-react-app first, you may need install yarn too.

$ npm install -g create-react-app yarn

Create a new project named antd-demo.

$ create-react-app antd-demo

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.

Then we go inside antd-demo and start it.

$ cd antd-demo
$ yarn start

Open browser at http://localhost:3000/, it renders a header saying "Welcome to React" on the page.

Import antd

It is the default directory structure below.

├── 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/lib/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 now see a blue primary button displaying in page now, next you can choose any components of antd to develop your application. Visit other workflow 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 all styles of components in the project which maybe a network perfermance issue.

Sometimes it could be necessary to customize the default webpack config. We can achieve that by using eject script command.

$ yarn run eject

Use babel-plugin-import

babel-plugin-import is a babel plugin for importing components on demand (principle). After eject all config files to antd-demo, we allowed to install it and modify config/webpack.config.dev.js now.

$ yarn add babel-plugin-import --dev

// Process JS with Babel.
{
  test: /\.(js|jsx)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
+   plugins: [
+     ['import', { libraryName: 'antd', style: 'css' }],
+   ],
    // This is a feature of `babel-loader` for webpack (not Babel itself).
    // It enables caching results in ./node_modules/.cache/babel-loader/
    // directory for faster rebuilds.
    cacheDirectory: true
  }
},

Note: because there is no .babelrc file after config eject, so we have to put the babel option into webpack.config.js or babel field of package.json.

Remove the @import '~antd/dist/antd.css'; statement added before because babel-plugin-import will import styles and import components like below:

  // scr/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>
      );
    }
  }

  export default App;

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

Customize Theme

According to Customize Theme documentation, we need less variables modify ability of less-loader, so we add it.

$ yarn add less less-loader --dev

  {
    exclude: [
      /\.html$/,
      /\.(js|jsx)$/,
      /\.css$/,
+     /\.less$/,
      /\.json$/,
      /\.bmp$/,
      /\.gif$/,
      /\.jpe?g$/,
      /\.png$/,
    ],
    loader: require.resolve('file-loader'),
    options: {
      name: 'static/media/[name].[hash:8].[ext]',
    },
  }

...

  // Process JS with Babel.
  {
    test: /\.(js|jsx)$/,
    include: paths.appSrc,
    loader: 'babel',
    options: {
      plugins: [
-       ['import', [{ libraryName: 'antd', style: 'css' }]],
+       ['import', [{ libraryName: 'antd', style: true }]],  // import less
      ],
   },

...

+  // Parse less files and modify variables
+  {
+    test: /\.less$/,
+    use: [
+      require.resolve('style-loader'),
+      require.resolve('css-loader'),
+      {
+        loader: require.resolve('postcss-loader'),
+        options: {
+          ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
+          plugins: () => [
+            require('postcss-flexbugs-fixes'),
+            autoprefixer({
+              browsers: [
+                '>1%',
+                'last 4 versions',
+                'Firefox ESR',
+                'not ie < 9', // React doesn't support IE8 anyway
+              ],
+              flexbox: 'no-2009',
+            }),
+          ],
+        },
+      },
+      {
+        loader: require.resolve('less-loader'),
+        options: {
+          modifyVars: { "@primary-color": "#1DA57A" },
+        },
+      },
+    ],
+  },
],

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

Note, we only modified webpack.config.dev.js now, if you wish this config working on production environment, you need to update webpack.config.prod.js as well.

Source code and other boilerplates

Finally, we use antd with create-react-app successfully, you can learn these practice for your own webpack workflow too, and find more webpack config 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 React community. There are some source code samples of importing antd in them if you encounter some problems.

• create-react-app-antd
• react-boilerplate/react-boilerplate
• kriasoft/react-starter-kit