Teach you how to build a react+antd project from scratch

The previous articles were all my own learning logs, mainly to prevent myself from forgetting the pitfalls I encountered before. This time we will start from the most basic project construction and make a background management system based on react and antd. I will proceed step by step, so after reading this article, even if you don’t know react, you should be able to use react to make a simple project. Without further ado, let’s get started. Please visit GitHub to view the complete project and click here to experience it. If you think it's okay, please give a star, thank you.

1. Development environment:

node.js -v 12.16.3

create-react-app -v 3.4.1

antd -v 4.3.3

Before starting the project, please install create-react-app globally. For macOS, please add sudo before the command, otherwise there will be an error saying that you do not have permission to access the hard disk.

npm install -g create-react-app

2. Project construction:

Initialize the project directly using the instructions of the scaffolding tool create-react-app. This article will use tsx. If you need the jsx version, please skip the template settings. Here is a brief introduction to jsx, which is the syntax sugar of javascript. It is built by react. In order to achieve multi-platform, react encapsulates some synthetic events based on js. For example, the onClick event in react is actually different from the click event in native js.

The jsx version of the directive is:

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 this with your project name) and execute the command to enter development mode.

npm start 

Next, let's get to the point. Since react does not have a router function by default, you need to install react-router and react-router-dom.

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

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

declare module '@loadable/component'

Students who need to use loadash can install loadash by themselves.

Next, install the antd component 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

By default, create-react-app uses sass. If you need to use other CSS preprocessors such as less, please install them yourself.

Also, let me briefly digress here. create-react-app uses react-scripts by default, and the webpack configuration cannot be modified. If you need to modify the webpack configuration, there are two solutions:

1. Use third-party libraries from the community such as react-app-rewired.

2. Execute the command: npm run eject. This will generate scripts and config folders in the current directory. You can modify webpack's configuration. Note: This operation is permanent and irreversible.

Back to the topic, after installing these basic libraries. Initialize your project directory. 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:

Next, you can use the array to complete the route configuration, 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<RouteComponentProps<any>> | React.ComponentType<any>,
  id: number,
  name?: string,
  routes?: Array<RouteConfigProps>
}
export const routeConfig: Array<RouteConfigProps> = [
  {
    path: '/login',
    exact: true,
    component: Login,
    id: 1,
    name: 'Login',
    routes: []
  },
  {
    path: '/index',
    exact: false,
    component: Index,
    id: 2,
    name: 'Homepage',
    routes: []
  }
]

Next, let’s import the routing configuration into app.tsx and sort out some antd configurations.

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'; // router.tsx
import { ConfigProvider, message, notification } from 'antd'; 
import storeConfig from './store'; // redux warehouseimport moment from 'moment'; // momentjs.
import 'moment/locale/zh-cn'; // Chinese package moment.js
import 'antd/dist/antd.css'; // Import antd's style sheet import './App.css'
moment.locale('zh-cn'); // Set moment.js to Chinese const store = storeConfig(); // Initialize the redux store. If a state manager is not needed, redux related information can be ignored.

message.config({ // Antd's message component configuration, duration is in seconds, maxcount is the maximum number of displayed duration: 2,
  maxCount: 2
});
notification.config({
  placement: 'topRight', // antd notification component configuration, placement pop-up position. bottom The distance from the bottom, during the duration in seconds bottom: 50,
  duration: 2,
});
function App() {
  return (
    <Provider store={store}>
      <ConfigProvider locale={zhCN}>
        <HashRouter>
          <MyRouter />
        </HashRouter>
      </ConfigProvider>
    </Provider>
  );
}

export default App;

That's it, the next step is to write the components you need.

This is the end of this article about teaching you how to build a react+antd project from scratch. For more relevant react+antd project content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!