1. React Scaffolding

If you have downloaded Node. js, go to ---- CMD in the desired location.Copy the code
npm i -g react-cli
Copy the code

Create a React project

Create-react-app is a fixed script. The app behind it is the project name, which can be customizedCopy the code
create-react-app app
Copy the code

3. Start the React project

cd app
yarn start/npm run start
yarn build
Copy the code

4. Open the project file in vscode or webstrom

Delete files in SRC and create two new files index.js and app.jsxCopy the code

5, index.js is the main file internal code as follows

import React from 'react'
import ReactDOM from 'react-dom'
import App frrom './App'

ReactDOM.render(<App />,document.getElementById('root')
Copy the code

6. App.jsx is the main entry file

import React,{Component} from 'react'
export default class App extends Component {
    render() {
        return( <div> <! --> HTML </div>)}}Copy the code

7. The SRC directory generally has six subdirectories

Pages, Assets, Components, API, config, utils -- The components of pages where the home page is located -- Assets are public resource files, such as public CSS. Img etc --components is for public components -- API is for methods required by components --config is for data --utils is for files defining constantsCopy the code

8. The format of the component is the same as app.jsx, only the content of the return is different, especially the routing component

There are two ways to download the react-router package yarn add react-router/ NPM run react-router --save Note You can select only one of the two methods to download the react-router package. Otherwise, the downloaded package will be deleted.Copy the code
    import { NavLink } from 'react-router-dom'// Remember also to introduce this // the following content is written inreturn<div className="footerNavWrap"> // Each NavLink is a route <NavLink to='/' className='footerItem'>
        <span className="iconfont icon-caidan06"></span> <span> <span> <NavLink >< NavLink className='footerItem' to='/category'>
        <span className="iconfont icon-categorynormal"<span> <span> </span> </NavLink> </div> <! NavLink is like a tag, you can click to jump; However, unlike the A tag, the route only re-renders part of the page, while the A jumps to refresh. to='/'Inside is written to jump to the route path; As to ='/category'
    -->
Copy the code

9. If you want to redirect the routing component, you need to perform the following steps

1. Add the --BrowserRouter library to index.js Wrap the App in the <BrowserRouter></BrowserRouter> tagCopy the code
BrowserRouter import {BrowserRouter} from'react-router-dom'// Reactdom.render (<BrowserRouter> <App /> </BrowserRouter>, document.getelementById ('root'));Copy the code

10. Write the route configuration in the imported route component

Import {Switch,Route,Redirect} from'react-router-dom'
    import Admin from './pages/admin'
    import Category from './pages/category'
    import Discern from './pages/discern'
    import Personal from './pages/personal'
    import ShopingCar from './pages/shopingCar'// The following content is written inreturn<Switch> <Route path= as in the HTML file"/admin" component={Admin} />
      <Route path="/category" component={Category} />
      <Route path="/discern" component={Discern} />
      <Route path="/personal" component={Personal} />
      <Route path="/shopingCar" component={ShopingCar} />
      <Redirect to="/admin"/>
    </Switch>
Copy the code

The above is a simple route jump page completed ~~~, you do not believe we two touch, you are not good!