# Global installation
npm install -g create-react-app
# Build a my-app Item
npx create-react-app my-app
cd my-app
#  Tap on the key points of the blackboard, if you want to use less,Or it depends on the use webpack Configuration files, exposing webpack Profiles, using create-react-app The created project is invisible by default webpack We need to expose the related configuration file by using the following command: it must be processed before this
npm run eject

Create react app create react project using less modification process.

Step 1: expose the configuration file

npm run eject

Step 2: modify config/webpack.config.js

//Find the following code

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;

Change to the following code

const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.(css|less)$/;

...

Find this code

test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction && shouldUseSourceMap,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true

Change to the following code

test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
    importLoaders: 2,    Where to modify
    sourceMap: isEnvProduction && shouldUseSourceMap,
  },
    'less-loader'       Where to modify
),

sideEffects: true,

This is an on-demand load with the introduction of antd

npm install babel-plugin-import --save-dev

You need to add the following code to the plugins array in the module module, loader: require.resolve('babel loader ') object

[
  "import",
  {libraryName: "antd", style: 'css'} // Add "libraryname" on the mobile side: "antd mobile"
] //antd load on demand

The point is to add these codes to the plugins array
The point is to add these codes to the plugins array
The point is to add these codes to the plugins array
The point is to add these codes to the plugins array
The point is to add these codes to the plugins array

Finally, there is the problem of antd in Chinese and English, which uses LocaleProvider to build packages

import { Pagination, Button, LocaleProvider } from "antd";
import zhCN from "antd/es/locale-provider/zh_CN";
 <LocaleProvider locale={zhCN}>
            <Pagination
              showQuickJumper
              defaultCurrent={1}
              total={25}
              onChange={this.onChange}
            />
          </LocaleProvider>
         

Start compiling the current React project and automatically open http://localhost:3000/
npm start

For the react project built with the create react app scaffold, the package file generated after using npm run build can only be accessed in the root directory, so that it can't be accessed in the server directory. For you, don't cry about Baidu solution after packing like me. Let's release it here:

Find the paths.js file under the config folder. After opening, there are the following codes around lines 34-39:

function getServedPath(appPackageJson) {

const publicUrl = getPublicUrl(appPackageJson);

const servedUrl =envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');

return ensureSlash(servedUrl, true);

}

Change this sentence to: (look carefully, the last "/" is preceded by a "."