4 routes 4.1 Page build first, build the home and login pages. src/pages/home/index.js Code: import React, { Component } from 'react' import './home.styl' class Home extends Component { render() { return ( <div className="P-home"> <h1>Home page</h1> </div> ) } } export default Home src/pages/home/home.styl Code .P-home h1 padding: 20px 0 font-size: 30px color: #fff background: #67C23A text-align: center src/pages/login/index.js Code: import React, { Component } from 'react' import './login.styl' class Login extends Component { render() { return ( <div className="P-login"> <h1>Login page</h1> </div> ) } } export default Login src/pages/login/login.styl Code .P-login h1 background: #E6A23C my personal habit is for reference only: className at the global public level (no modularization is required), using G-xxx. For example, G-autocut (truncation), G-color-red (text red). page-level className, using P-xxx. module-level className, using M-xxx. Next, we use react-router-dom to implement routing. 4.2 use react-router-dom execute the installation command: npm install react-router-dom --save modify src/App.js, the code is as follows: import React, { Fragment } from 'react' import Login from './pages/login' import Home from './pages/home' import { HashRouter, Route, Switch, Redirect } from 'react-router-dom' function App() { return ( <Fragment> <HashRouter> <Switch> <Route path="/login" component={Login} /> <Route path="/home" component={Home} /> <Route exact path="/" component={Home} /> <Redirect to={"/home"} /> </Switch> </HashRouter> </Fragment> ) } export default App App.js introduces two page-level components, Home and Login. Then the paths are set using react-router-dom. The mechanism of import is to find index.js by default, so the primary file name of each component is set to index.js, which can be omitted when referenced. explain the attributes of & lt;Route> here:…

take a peek at it before we officially begin, let's take a look at what we can learn through this sharing. create a React project from scratch supports Sass/Scss/Less/Stylus Route usage: react-router-dom component creation and reference React Developer Tools browser plug-in redux, react-redux use redux-thunk creation and use of store Redux DevTools installation and use immutable.js uses Mock.js uses resolve local cross-domain reverse proxy Summary of other commonly used tools Super value bonus: integrated Ant Design even if you are a novice, after following the operation, you can quickly get started with the React project! Note: the "+" at the beginning of each line in the code area of this article indicates addition, "-" indicates deletion, and "M" indicates modification. Indicates omission. 1 create React-APP through the official create-react-app, find a favorite directory and execute: npx create-react-app react-app The last react-app of the command is the name of the project, which you can change on your own. wait a moment to complete the installation. After the installation is complete, you can start the project using npm or yarn. enter the project directory and start the project: cd react-app yarn start （or use npm start） if you do not have yarn installed, you can go to the website to install: https://yarnpkg.com after startup, you can access the project at the following address: http://localhost:3000/ 2 streamlined items 2.1 Delete files next, delete the files that are not used in the general project to simplify the project. ├─ /node_modules ├─ package.json ├─ /public | ├─ favicon.ico | ├─ index.html - | ├─ logo192.png…