React Technology Stack

React is currently the hottest front-end framework. Facebook launched the best community support and ecosystem in 2013 with a large number of third-party tools

Advantages of React component mode: Code reuse and Team work virtual DOM: Performance Advantage Mobile Support: The disadvantage of cross-terminal React learning curve a new set of concepts, distinct from all other frameworks only using its entire technology stack, to play the most Great Power

Summary: React is very advanced and powerful, but learning and implementing costs are not low JSX syntax

React uses JSX syntax, which can write HTML code in JavaScript code.

let myTitle = <h1> Hello, world! </ h1>;
JSX syntax explanation
(1) The outermost layer of JSX syntax can only have one node.

// error
let myTitle = <p> Hello </ p> <p> World </ p>;
(2) JavaScript code can be inserted in the JSX syntax, using braces.

let myTitle = <p> {'Hello' + 'World'} </ p>
Babel transcoder
JavaScript engines (including browsers and Node) do not recognize JSX, and need to use Babel transcoding before they can run.

<script src = "react.js"> </ script>
<script src = "react-dom.js"> </ script>
<script src = "babel.min.js"> </ script>
<script type = "text / babel">
  // ** Our code goes here! **
</ script>
React needs to load two libraries: React and React-DOM, the former is the core library of React, and the latter is React's DOM adaptation library.

Babel is used to convert the JSX syntax in the browser. If the server has already been converted, the browser does not need to load this library. Class Exercise: JSX Grammar

Open demos / jsx-demo / index.html in the browser, and follow the "operation instructions" to complete the exercise.

ReactDOM.render (
  <span> Hello World! </ span>,
  document.getElementById ('example')
);
Example: React component
React allows users to define their own components and insert them into web pages.

Open demos / react-component-demo / index1.html in the browser and follow the "Operation Instructions" to carefully check the source code.

class MyTitle extends React.Component {
  render () {
    return <h1> Hello World </ h1>;
  }
};

ReactDOM.render (
  <MyTitle />,
  document.getElementById ('example')
);
Class Exercise: Parameters of Components
Components can pass in parameters from outside, and use this.props to get parameters internally.

Open demos / react-component-demo / index2.html and follow the "operation instructions" to complete the exercise.

class MyTitle extends React.Component {
  render () {
    return <h1
      style = {{color: this.props.color}}
    > Hello World </ h1>;
  }
};

<MyTitle color = "red" />,
Example: State of component
Components often have internal states, which are represented by this.state.

Open demos / react-component-demo / index3.html in the browser and follow the "Operation Instructions" to carefully check the source code.

React Technology Stack Classroom Practice: React Components in Action

Open demos / react-component-demo / index4.html in the browser, and follow the "operation instructions" to complete the exercise. Component life cycle

React provides nearly ten hook methods for different life stages of components. componentWillMount (): call componentDidMount () before component loading: call componentWillUpdate () after component loading: call componentDidUpdate () before component update: call componentWillUnmount () after component update: call componentWillReceiveProps () before component uninstall: when component accepts new parameters transfer

We can use these hooks to automatically complete some operations. Class practice: component life cycle

Components can obtain data from the server through Ajax requests. Ajax requests are generally issued in the componentDidMount method.

componentDidMount () {
  const url = '...';
  $ .getJSON (url)
    .done ()
    .fail ();
}
Open demos / react-lifecycle-demo / index.html and follow the "Operation Instructions" to complete the exercise. React component library

A major advantage of React is that there are many component libraries written on the Internet that can be used.

React-Bootstrap: https://react-bootstrap.github.io/

React Technology Stack Example: ReCharts

ReCharts is a library of React charting components. http://recharts.org/

Open demos / recharts-demo / index.html in the browser, follow the "Operation Instructions", carefully check the source code, and appreciate the advantages of JSX syntax for expressing complex components.

<LineChart width = {1000} height = {400} data = {data}>
  <XAxis dataKey = "name" />
  <YAxis />
  <CartesianGrid stroke = "# eee" strokeDasharray = "5 5" />
  <Line type = "monotone" dataKey = "uv" stroke = "# 8884d8" />
  <Line type = "monotone" dataKey = "pv" stroke = "# 82ca9d" />
</ LineChart>
React's core idea
View is the output of State.

view = f (state)