Build the whole family bucket of React project from scratch (2)

April 25, 2023 1384hotness 0likes 0comments

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:

path indicates the path, which is easy to understand.

component represents the bound component.

exact indicates whether it is an exact match.

if exact is not set, then:

localhost:3000/ displays the Home page,

localhost:3000/abc also displays the Home page.

because the route matches the preceding "/", the route will be successful.

the last & lt;Redirect> indicates that none of the above matches successfully, the default jump route.

take a look at the effect:

visit http://localhost:3000/#/login effect:

visit http://localhost:3000/#/home effect:

4.3 Route Jump

next, let's briefly introduce how to make a route jump between pages.

add a button to the Login page to jump to the Home page. The code is modified as follows:

    import React, { Component } from 'react'
    import './login.styl'

    class Login extends Component {
        render() {
            return (
               <div className="P-login">
                    <h1>Login page</h1>
+                   <button onClick={this.gotoHome.bind(this)}>Jump to Home page</button>
                </div>
            )
        }

+       gotoHome() {
+           this.props.history.push('/home')
+       }
    }

    export default Login

pay attention to bind (this) in the onClick of button, otherwise, the this in gotoHome is undefined.

of course, you can also write:

<button onClick={() => {this.gotoHome()}}>Jump to Home page</button>

The ultimate goal of

is to make the this in gotoHome point to the correct scope.

5 components introduce

the content of this chapter is also very easy, and students who have come into contact with vue should also know that for the sake of the completeness of the tutorial, let's talk about it briefly. Let's simply implement a common header component.

5.1 create header components

the directory structure is as follows:

    |  ├─ /components   <-- 公共模块组件目录
+   |  |  ├─ /header    <-- Commonheadercomponents
+   |  |  |  ├─ index.js 
+   |  |  |  └─ header.styl

src/components/header/index.js Code:

import React, { Component } from 'react'
import './header.styl'

class Header extends Component {
    render() {
        return (
            <div className="M-header">
                Header
            </div>
        )
    }
}

export default Header

src/components/header/header.styl Code:

.M-header
    height: 40px
    line-height: 40px
    font-size: 36px
    color: #fff
    background: #409EFF

5.2 introduce Header components

then, introduce the Header component in the Home and Login pages.

take the Home page as an example, modify src/pages/home/index.js:

    import React, { Component } from 'react'
+   import Header from '../../components/header'
    import './home.styl'

    class Home extends Component {
        render() {
            return (
                <div className="P-home">
+                   <Header />
                    <h1>Home page</h1>
                </div>
            )
        }
    }

    export default Home

the Header component is introduced into the Login page in the same way, and the code is not released. The effect is as follows:

5.3 components pass parameters

students who have used vue know that vue components have data and props. The corresponding react is state and props.

react passes parameters to child components in the following way:

<Header 
    param1="abc"
    param2="c"
    func1={()=>{console.log('func1')}}
/>

inside the Header component, you can receive it directly using this.props. For example: this.props.param1.

the main purpose of this sharing is to introduce the content of process, and the space is limited. For state and props of react, please refer to the official documentation.