How to install React? Introduction to the installation steps of react (with complete examples)

This article mainly introduces the installation steps of react, as well as the explanation of the characteristics and concepts of react. Let us read this article together

一 React

1. Concept

React is a javascript library for building user interfaces.
React is mainly used to build UI and is the V (view) in MVC.
React originated as an internal project at Facebook, used to build the Instagram website, and was open sourced in May 2013.
React has high performance and the code logic is very simple.

2. Features

• Efficiency −React minimizes interaction with the DOM by simulating the DOM.

• Flexible −React works well with known libraries or frameworks.

• JSX − JSX is an extension of JavaScript syntax. JSX is not required for React development, but it is recommended.

• Component − Building components through React makes it easier to reuse code and can be well applied in the development of large projects.

• One-way response data flow − React implements one-way response data flow, thereby reducing repeated code, which is why it is better than traditional data binding simpler. (Redux)

3. [Installation] (https://doc.react-china.org/docs/installation.html)

yarn init
yarn add react react-dom react-scripts

package.json

{  "name": "test",  "version": "1.0.0",  "description": "zzz",  "main": "index.js",  "license": "MIT",  "dependencies": {    "react": "^16.2.0",    "react-dom": "^16.2.0",    "react-scripts": "^1.0.17"
  },  "scripts": {    "start": "react-scripts start"
  }
}

4. Component

1. ES6 class

class Welcome extends React.Component {
    render() {        return (            <h1> Hello, {this.props.name} </h1>
        )
    }
} 
class App extends React.Component {
    render() {
        return (            <p>
                <Welcome name = "zhz1" />
                <Welcome name = "zhz2" />
                <Welcome name = "zhz3" />
            </p>
        )
    }
}

2. Functional (stateless component)

function Welcome(props) {
    return <h1> Hello, {props.name} </h1>}
function App() {
    return (        <p>
            <Welcome name = "zhz1" />
            <Welcome name = "zhz2" />
            <Welcome name = "zhz3" />
        </p>
    )
}

3. ES5-Writing React.createClass (for reference only)

React.createClass will self-bind function methods (unlike React.Component which only binds functions that need to be concerned), resulting in unnecessary Performance overhead, increasing the likelihood of code becoming obsolete.

const Welcome = (props) => {    return <h1> Hello, {this.props.name} </h1>}
const App = React.createClass ({
    render() {
        return (            <p>
                <Welcome name1 = "ss" />
                <Welcome name1 = "zhz2" />
                <Welcome name1 = "zhz3" />
            </p>
        )
    }
});

Export (providing interface)
export default App

5. Props attribute

6. State state

React treats components as state machines. By interacting with the user, different states are achieved, and then the UI is rendered to keep the user interface and data consistent.

In React, you only need to update the state of the component, and then re-render the user interface according to the new state (do not operate the DOM) (If you want to see more, go to the React Reference Manual column on the PHP Chinese website Middle school)

class Welcome extends React.Component {
    render() {        return (            <h1 onClick={this.props.onClick} > Hello, {this.props.name} </h1>
        )
    }
} 
class App extends React.Component {
    constructor() {
        super();
        this.state = {
            selected: false
        }
    }
    changeText() {
        this.setState((preState, props) => ({
            selected: !preState.selected
        }))
    }
    render() {
        return (            <p> 
                <Welcome name= {this.state.selected ? "zhz3-selected" : "zhz3" } onClick={() => this.changeText()} />                <h1 onClick={() => this.changeText()}> {this.state.selected ? "zhz3-selected" : "zhz3" } </h1>
            </p>
        )
    }
}
export default App;

6. Note that the

• class attribute changes to the className

• tabindex attribute Changes to tabIndex

• for attribute changes to htmlFor

• The value of textarea needs to be passed The value attribute is used to specify the value of the

• style attribute. The value of the style attribute receives an object. The css attribute becomes camel case, such as: backgroundColor.

This article ends here (if you want to see more, go to the PHP Chinese website React User Manual column to learn). If you have any questions, you can leave them below Leave a message with a question.

The above is the detailed content of How to install React? Introduction to the installation steps of react (with complete examples). For more information, please follow other related articles on the PHP Chinese website!