Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "how to use react+antd to build a project". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Development environment:

Node.js-v 12.16.3

Create-react-app-v 3.4.1

Antd-v 4.3.3

Please install create-react-app,macos globally before the start of the project. Please add sudo before the instruction or there will be an error saying that you do not have permission to access the hard disk.

Npm install-g create-react-app2, project build:

The instructions for initializing the project directly use the scaffolding tool create-react-app, and tsx is used next in this article. For jsx version, skip template settings. Here is a brief introduction that jsx,jsx is the grammatical sugar of javascript. It was created by react, and react encapsulated some synthetic events on the basis of js in order to achieve multi-platform. For example, the onClick event in react is actually quite different from the click event in native js.

The directives for the jsx version are:

Npx create-react-app project-name

The tsx version is as follows:

After waiting for the installation to complete, the initialization of the project has been completed.

Now go to the project directory: cd react-admin (replace here with your project name) and execute the instructions to enter development mode.

Npm start

Next, let's get down to business. Since react has no router function by default, we need to install react-router and react-router-dom.

If you need state management, you can install redux, react-redux, redux-actions.

Students who need to load on demand can install @ loadable/component. Note that the ts version may report an error. The following code can be written in a loadable.d.ts file to solve the problem.

Declare module'@ loadable/component'

Students who need to use loadash install loadash by themselves.

Next, install the antd group build library.

Npm i antd react-router react-router-dom redux react-redux redux-actions @ types/redux-actions @ types/react-router-dom @ loadable/component axios loadash-- save

Create-react-app uses sass by default. If you need to use other css preprocessors such as less, please install it yourself.

In addition, here is a simple digression. Create-react-app uses react-scripts by default and cannot modify the webpack configuration. If you need to modify the webpack configuration, there are two solutions:

1. Use third-party libraries of the community, such as react-app-rewired, etc.

2. Execute the instruction: npm run eject will generate scripts and config folders in the current directory. You can modify the configuration of webpack. Note: this operation is permanent and irreversible.

Let's get to the point, after installing these basic libraries. Initialize your project directory. Here you can set the directory structure according to your preferences. My directory structure is as follows:

Next, open the router directory and write the code for router.tsx. Only the main code is shown here:

You can then use an array to configure the route, for example:

Import loadable from'@ loadable/component';import {RouteComponentProps} from 'react-router';const Index = loadable (() = > import ('.. / pages/index')); const Login = loadable (() = > import ('.. / pages/login')) Export interface RouteConfigProps {path: string, exact: boolean, component: React.ComponentType | React.ComponentType, id: number, name?: string, routes?: Array} export const routeConfig: Array = [{path:'/ login', exact: true, component: Login, id: 1, name: 'login', routes: []}, {path:'/ index', exact: false, component: Index, id: 2 Name: 'home', routes: []}]

Next, let's introduce routing configuration into app.tsx and sort out some configurations of antd by the way.

Import React from 'react';import {Provider} from' react-redux'; / / provider provided by redux. Import zhCN from 'antd/es/locale-provider/zh_CN'; / / antd Chinese package import {HashRouter} from' react-router-dom'; import {MyRouter} from'. / router'; / / the router.tsximport {ConfigProvider, message, notification} from 'antd'; import storeConfig from'. / store'; / / redux's warehouse import moment from 'moment'; / / momentjs. Import 'moment/locale/zh-cn'; / / Chinese package moment.jsimport' antd/dist/antd.css'; / / introduce the stylesheet import'. / App.css'moment.locale ('zh-cn') of antd; / / set moment.js to Chinese const store = storeConfig (); / / initialize the store of redux. If you don't need a state manager, redux correlation can be ignored. Message.config (message component configuration of {/ / antd, during duration is in seconds, and the maximum number of maxcount displays is duration: 2, maxCount: 2}); notification.config ({placement: 'topRight', / / antd notification component configuration, placement pop-up location. The distance from the bottom of bottom, the during duration unit is bottom: 50, duration: 2,}); function App () {return ();} export default App; "how to use react+antd to build a project" ends here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.