8 Mock.js installation and use in the process of development, in order to make it easier for the front end to debug the interface alone, Mock.js is often used to intercept Ajax requests and return preset data. This section describes how to use Mock.js in a react project. perform installation: npm install mockjs --save create a new mock.js under src, as follows: import Mock from 'mockjs' const domain = '/api/' // Simulating the getData interface Mock.mock(domain + 'getData', function () { let result = { code: 200, message: 'OK', data: 'test' } return result }) then introduce mock.js: into src/index.js import React from 'react' import ReactDOM from 'react-dom' import App from './App' import { Provider } from 'react-redux' import store from './store' + import './mock' import './common/style/frame.styl' ...（summary） it's so simple. In this way, when a / api/getData is requested in a project, it is intercepted by Mock.js and the data written in mock.js is returned. 9 solve the cross-domain problem of local development in the react development environment, port 3000 is started by default, while the back-end API service may be on port 80 of the machine, so cross-domain problems may occur during ajax requests. Reverse proxy can be implemented with the help of http-proxy-middleware tools. perform installation: npm install http-proxy-middleware --save-dev create a setupProxy.js under src, as follows: const proxy = require('http-proxy-middleware'); module.exports = function (app) { app.use( '^/api', proxy({ target: 'http://localhost', changeOrigin: true }) ) } this code means that as long as the request address starts with "/ api", it will reverse proxy to the http://localhost…

the relative basics of the React project have been explained in detail in 1BI 2 of this tutorial. In 3pr 4, continue to explain the advanced part of React. Build the whole family bucket of React project from scratch (1) Build the whole family bucket of React project from scratch (2) before we begin, review the content introduced in the previous article: 1 create React-APP 2 streamlined items 2.1 Delete files 2.2 simplify the code 2.3 use Fragment to remove the outer tag of the component 3 Project directory structure 3.1 introduce global common styles 3.2 support Sass/Less/Stylus 4 routes 4.1 Page build 4.2 use react-router-dom 4.3 Route Jump 5 components introduce 5.1 create header components 5.2 introduce Header components 5.3 components pass parameters 6 React Developer Tools browser plug-in in this second article, continue to share the following: take a peek at it 7 Redux and related plug-ins 7.1 install redux 7.2 install react-redux 7.3 install redux-thunk 7.4 install the browser Redux plug-in 7.5 create store 7.6complex project store decomposition 7.7 docking react-redux with store 7.8 start Redux DevTools 7.9 install using immutable 8 Mock.js installation and use 9 solve the cross-domain problem of local development 10 other commonly used tools 11 complimentary chapter: integrated Ant Design 11.1 install Ant Design 11.2 implement on-demand loading 11.3 Custom theme colors 7 Redux and related plug-ins students who have done vue development know that the corresponding tool for vuex,react is Redux, and of course there are some ancillary tools, such as react-redux, redux-thunk, and immutable. redux involves a lot of content…

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:…