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.
6 React Developer Tools browser plug-in
to make it easier to debug react projects, it is recommended that you install the chrome plug-in.
search for "React Developer Tools" in the chrome web app store and install it.
after the installation is complete, open the chrome debugging tool and you can clearly see the code structure of the react project.
