cra-template-ant-concent v1.2.1

cra-template-ant-concent

🎉 A react template, based on creact-react-app, support antd demand importing, concent, less, decorator, webpack alias。

😁 Happy coding!!!

Start

1. create procjet

# if you had installed cra as global module
$ create-react-app your-project-name --template ant-concent
# or use npx
$ npx create-react-app your-project-name --template ant-concent

2. start project

$ npm start

Wait a moment, you can see your site on http://localhost:3000.

Config

mobile config

remove antd and install antd-mobile

$ npm uninstall antd
$ npm install antd-mobile -S
# if you use yarn
$ yarn remove antd
$ yarn add antd-mobile

modify craco.config.js, change antd to antd-mobile in libraryName.

Attention: if you don't use antd-mobile, you could remove babel-plugin-import directly.

modify webpack alias

See craco.config.js and jsconfig.json, modify them correspondingly.

modify devServer port

modify start script in package.json start like this：

{
  "scripts": {
    "start": "cross-env PORT=4000 craco start"
  }
}

add source map for build

remove env variable in build script in package.json GENERATE_SOURCEMAP=false.

set proxy for devServer

See src/setupProxy.js.

config webpack, babel or eslint

We use craco to customize webpack, babel, eslint. Read offical document to get addvanced usages.

router config

We draw lessons from convention routing of umi for router rendering, most of them are same but still have a number of different:

• No SSR, we eliminate that part of code
• We use React.lazy() to Wrapp a page component
• Add title key to modify page title
• Default props for <Route /> is different, see defaultRouteProps in src/router/renderRoutes.js.

UmiJS Convention Routing

Feature

• antd/antd-mobile demand importing
• less
• decorator
• webpack alias and VSCode support
• custom webpack, eslint, babel config
• react demand loading and code splitting
• eslint check
• git hooks check
• concent demo codes
• ts support
• mock support

LICENSE

MIT