react usage tutorial

Use of variables

constructor(props) {
super(props);
this.state = {
sliderSwiper: null,
movies: []
};
this.handleStart = this.handleStart.bind(this);
}

if (!baseHref) {
if (isPc) {
window['location']['href'] = `${location.protocol}//${location.host}/demo/home`;
return;
}
if (!isPc) {
window['location']['href'] = `${location.protocol}//${location.host}/m/home`;
return;
}
} else {
if (isPc && baseHref === 'm') {
window['location']['href'] = `${location.protocol}//${location.host}/demo/home`;
return;
}
if (!isPc && baseHref === 'demo') {
window['location']['href'] = `${location.protocol}//${location.host}/m/home`;
return;
}
}

Parent component passes parameters to child component

this.props.xxx

The child passes parameters to the parent

//Parent component
<ComentList arr={this.state.arr} pfn={this.fn.bind(this)}>
//Subcomponents
clickFun(text) {
        this.props.pfn(text)//This place passes the value to the props event
    }
<button onClick={this.clickFun.bind(this, this.state.childText)}>
                    click me
 </button>

Component Judgment Rendering

const isLoggedIn = this.state.isLoggedIn; 
let button = null; 
if (isLoggedIn) { 
button = <LogoutButton onClick={this.handleLogoutClick} />; 
} else { 
button = <LoginButton onClick={this.handleLoginClick} />; 
} 
return ( 
<div> 
<Greeting isLoggedIn={isLoggedIn} /> 
{button} 
</div> ); 
}

Component Loop Rendering

arr.map((element,index) =>{
    return <div>{index}</div>
})

react life cycle

CompoonentWillMount is called before rendering, and also on the server side at the client side.
CompoonentDidMount: Called after the first rendering, only on the client side.
CompoonentWillReceiveProps are called when a component receives a new prop (after updating). This method is not called when render is initialized.
ShouComponentUpdate returns a Boolean value. Called when a component receives a new props or state. It is not called at initialization or when forceUpdate is used.
CompoonentWillUpdate is called when the component receives a new props or state but has not render yet. It will not be invoked at initialization.
CompoonentDidUpdate is called immediately after the component has completed the update. It will not be invoked at initialization.
CompoonentWillUnmount is called immediately before the component is removed from the DOM.

The use of refs is similar to that of vue

<input type="text" ref="myInput" />
this.refs.myInput.focus();

Use of react routing

//Reference transmission and reference
[react Jump and parameter reception](https://blog.csdn.net/qq_24504591/article/details/78973633)

// routers.js
import React, { Component } from 'react';
import { HashRouter as Router, Route, Switch, Redirect} from 'react-router-dom';
import Home from './views/Home'
import List from './views/List';
import Board from './views/Board';
import Item from './views/Item';
import Search from './views/Search';
class Routes extends Component {
render() {
return (
<div className="App">
<Router>
<Switch>
<Route path="/home" component={Home}></Route>
<Route path="/board" component={Board}></Route>
<Route path="/list" component={List}></Route>
<Route path="/item" component={Item}></Route>
<Route path="/search" component={Search}></Route>
<Redirect from="/" to="/home"></Redirect>
<Route component={Home}></Route>
</Switch>
</Router>
</div>
);
}
}
export default Routes;

// How to Jump
<Link to={`item?id=${item.id}`} ></Link>

<Link to={`/list?type=${item.key.split(',')[0]}&title=${item.title}`}></Link>

<NavLink to="/search" className="nav-link"></NavLink>

// In index.js
import Routes from './routes';
ReactDOM.render(<Routes />, document.getElementById('root'));

react component type

1. Static components

function HelloMessage(props) { return <h1>Hello {props.name}!</h1>; }

2. Dynamic components

class List extends Component {
render() {
return (
<div className="container">
<MovieList type="more-list"/>
</div>
);
}
}

Using scss in z project

npm i sass-loader node-sass --save-dev