Wie installiere ich React? Einführung in die Installationsschritte von React (mit vollständigen Beispielen)

In diesem Artikel werden hauptsächlich die Installationsschritte von React sowie die Erläuterung der Eigenschaften und Konzepte von React vorgestellt. Lassen Sie uns diesen Artikel gemeinsam lesen

One React

1. Konzept

React ist eine Javascript-Bibliothek zum Erstellen von Benutzeroberflächen.
React wird hauptsächlich zum Erstellen einer Benutzeroberfläche verwendet und ist das V (Ansicht) in MVC.
React entstand als internes Projekt bei Facebook, wurde zum Aufbau der Instagram-Website verwendet und wurde im Mai 2013 als Open Source bereitgestellt.
React ist leistungsstark und die Codelogik ist sehr einfach.

2. Funktionen

• 高效 −React minimiert die Interaktion mit DOM durch Simulation von DOM.

• 灵活 −React funktioniert gut mit bekannten Bibliotheken oder Frameworks.

• JSX − JSX ist eine Erweiterung der JavaScript-Syntax. JSX ist für die React-Entwicklung nicht erforderlich, wird aber empfohlen.

• 组件 − Das Erstellen von Komponenten über React erleichtert die Wiederverwendung von Code und kann gut bei der Entwicklung großer Projekte eingesetzt werden.

• 单向响应的数据流 − React implementiert einen unidirektionalen Antwortdatenfluss und reduziert dadurch wiederholten Code, weshalb es einfacher als herkömmliche Datenbindung ist. (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. Komponente

1. ES6-Klasse

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

2. Funktional (zustandslose Komponente)

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

ES5-Schreiben von React.createClass (nur als Referenz)

React.createClass bindet Funktionsmethoden selbst (im Gegensatz zu React.Component, das nur Funktionen bindet, die betroffen sein müssen), was zu unnötigem Leistungsaufwand führt und die Leistung erhöht Möglichkeit, dass Code veraltet ist.

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

Export (Bereitstellung der Schnittstelle)
export default App

5. Props-Attribut

6. Zustandszustand

React betrachtet Komponenten als A-Zustand Maschine (Zustandsmaschinen). Durch die Interaktion mit dem Benutzer werden verschiedene Zustände erreicht und anschließend die Benutzeroberfläche gerendert, um die Benutzeroberfläche und die Daten konsistent zu halten.

In React müssen Sie nur den Status der Komponente aktualisieren und dann die Benutzeroberfläche entsprechend dem neuen Status neu rendern (ohne das DOM zu bedienen) (Wenn Sie mehr sehen möchten, gehen Sie zu React Reference Manual -Spalte der chinesischen PHP-Website Learning)

class Welcome extends React.Component {
    render() {        return (            <h1 id="nbsp-Hello-nbsp-this-props-name-nbsp"> 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 id="nbsp-this-changeText-nbsp-this-state-selected-nbsp-nbsp-zhz-selected-nbsp-nbsp-zhz-nbsp-nbsp"> this.changeText()}> {this.state.selected ? "zhz3-selected" : "zhz3" } </h1>
            </p>
        )
    }
}
export default App;

6. Beachten Sie, dass sich das Klassenattribut

• in className

• tabindex-Attribut ändert sich zu

  tabIndex

• for-Attribut wird zu

  htmlFor

• Der Wert von textarea muss über das

  -Attribut value

  angegeben werden. Der Wert des
• style-Attributs empfängt ein Objekt und das CSS-Attribut ändert sich in die

  -Schreibmethode, z. B.: backgroundColor . 驼峰

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, gehen Sie zur Spalte

React User Manual auf der chinesischen PHP-Website, um mehr zu erfahren). Wenn Sie Fragen haben, können Sie diese unten stellen. Hinterlassen Sie eine Nachricht mit einer Frage.

Das obige ist der detaillierte Inhalt vonWie installiere ich React? Einführung in die Installationsschritte von React (mit vollständigen Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!