Comment installer React ? Introduction aux étapes d'installation de React (avec exemples complets)

Cet article présente principalement les étapes d'installation de react, ainsi que l'explication des caractéristiques et des concepts de React. Lisons cet article ensemble

.

One React

1. Concept

React est une bibliothèque javascript permettant de créer des interfaces utilisateur.
React est principalement utilisé pour créer une interface utilisateur et est le V (vue) dans MVC.
React est né d'un projet interne à Facebook visant à créer le site Web Instagram et a été open source en mai 2013.
React a des performances élevées et la logique du code est très simple.

2. Caractéristiques

• 高效 −React minimise l'interaction avec le DOM en simulant le DOM.

• 灵活 −React fonctionne bien avec des bibliothèques ou des frameworks connus.

• JSX - JSX est une extension de la syntaxe JavaScript. JSX n'est pas requis pour le développement de React, mais il est recommandé.

• 组件 − La création de composants via React facilite la réutilisation du code et peut être bien appliquée dans le développement de grands projets.

• 单向响应的数据流 - React implémente un flux de données de réponse unidirectionnel, réduisant ainsi le code répété, c'est pourquoi il est plus simple que la liaison de données traditionnelle. (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. Composant

Classe ES6

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.

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 (pour référence uniquement)

React.createClass auto-liera les méthodes de fonction (contrairement à React.Component qui lie uniquement les fonctions qui doivent être concernées) Causes une surcharge de performances inutile et augmente la probabilité d’obsolescence du code.

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 (fournissant l'interface)

export default App

5. Attribut Props

6. Statut de l'état

React examine le composant C'est une machine à états (State Machines). En interagissant avec l'utilisateur, différents états sont obtenus, puis l'interface utilisateur est rendue pour maintenir la cohérence de l'interface utilisateur et des données.

Dans React, il vous suffit de mettre à jour l'état du composant, puis de restituer l'interface utilisateur en fonction du nouvel état (sans manipuler le DOM) (Si vous voulez en voir plus, rendez-vous sur

React Reference Manual colonne du site Web PHP chinois 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 Notez que l'attribut

• class devient

  className

l'attribut tabindex devient

• tabIndex

pour l'attribut devient

• htmlFor

La valeur de textarea doit être spécifiée via l'attribut

• value

  style reçoit un objet, et l'attribut css passe à la méthode d'écriture
, telle comme : backgroundColor.

• 驼峰

  Cet article se termine ici (si vous voulez en voir plus, rendez-vous dans la colonne
React User Manual

du site Web PHP chinois pour en savoir plus). questions, vous pouvez les poser ci-dessous. Laisser un message avec une question.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!