React Tutorial => Erste Schritte mit React

Bemerkungen

React ist eine deklarative, komponentenbasierte JavaScript-Bibliothek, die zum Erstellen von Benutzeroberflächen verwendet wird.

MVC - Framework wie Funktionalitäten zu erreichen in Reaktion, Entwickler verwenden es in Verbindung mit einem Flux Geschmack der Wahl, zB Redux .

Versionen

Ausführung	Veröffentlichungsdatum
0,3,0	2013-05-29
0,4,0	2013-07-17
0,5,0	2013-10-16
0,8,0	2013-12-19
0,9,0	2014-02-20
0,10,0	2014-03-21
0,11,0	2014-07-17
0,12,0	2014-10-28
0,13,0	2015-03-10
0,14,0	2015-10-07
15.0.0	2016-04-07
15.1.0	2016-05-20
15.2.0	2016-07-01
15.2.1	2016-07-08
15.3.0	2016-07-29
15.3.1	2016-08-19
15.3.2	2016-09-19
15.4.0	2016-11-16
15.4.1	2016-11-23
15.4.2	2017-01-06
15.5.0	2017-04-07
15.6.0	2017-06-13

Installation oder Setup

ReactJS ist eine JavaScript-Bibliothek, die in einer einzelnen Datei react-<version>.js kann in jede HTML-Seite react-<version>.js werden. react-dom-<version>.js auch die React-DOM-Bibliothek react-dom-<version>.js zusammen mit der React react-dom-<version>.js installiert:

Grundlegende Inklusion

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script type="text/javascript">
        // Use react JavaScript code here or in a separate file
    </script>
    </body>
</html>

Um die JavaScript-Dateien zu erhalten, rufen Sie die Installationsseite der offiziellen React-Dokumentation auf.

React unterstützt auch die JSX-Syntax . JSX ist eine von Facebook erstellte Erweiterung, die JavaScript um XML-Syntax erweitert. Um JSX verwenden zu können, müssen Sie die Babel-Bibliothek einschließen und <script type="text/javascript"> in <script type="text/babel"> ändern, um JSX in Javascript-Code zu übersetzen.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
    <script type="text/babel">
        // Use react JSX code here or in a separate file
    </script>
    </body>
</html>

Installation über npm

Sie können React auch mit npm installieren, indem Sie folgende Schritte ausführen :

npm install --save react react-dom

Um React in Ihrem JavaScript-Projekt zu verwenden, haben Sie folgende Möglichkeiten:

var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<App />, ...);

Installation über Garn

Facebook hat seinen eigenen Paketmanager namens Yarn veröffentlicht , mit dem auch React installiert werden kann. Nach der Installation von Yarn müssen Sie nur diesen Befehl ausführen:

yarn add react react-dom

Sie können React dann in Ihrem Projekt genauso verwenden, als wenn Sie React über npm installiert hätten.

Hallo Weltkomponente

Eine React-Komponente kann als eine ES6-Klasse definiert werden, die die Basisklasse React.Component . In seiner Minimalform, muss eine Komponente mit einer definieren render - Methode , die angibt , wie die Komponente auf das DOM macht. Die render gibt React-Knoten zurück, die mithilfe der JSX-Syntax als HTML-ähnliche Tags definiert werden können. Das folgende Beispiel zeigt, wie eine minimale Komponente definiert wird:

import React from 'react'

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, World!</h1>
    }
}

export default HelloWorld

Eine Komponente kann auch props erhalten. Dies sind Eigenschaften, die vom übergeordneten Element übergeben werden, um einige Werte anzugeben, die die Komponente nicht selbst kennen kann. Eine Eigenschaft kann auch eine Funktion enthalten, die von der Komponente aufgerufen werden kann, nachdem bestimmte Ereignisse onClick Beispielsweise könnte eine Schaltfläche eine Funktion für ihre onClick Eigenschaft onClick und bei jedem Klick aufrufen. Wenn Sie eine Komponente schreiben, können Sie auf ihre props über das props auf der Komponente selbst zugreifen:

import React from 'react'

class Hello extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>
    }
}

export default Hello

Das obige Beispiel zeigt , wie die Komponente kann eine beliebige Zeichenfolge in den vergangen machen name von ihrer Mutter prop. Beachten Sie, dass eine Komponente die empfangenen Requisiten nicht ändern kann.

Eine Komponente kann in einer anderen Komponente oder direkt in das DOM gerendert werden, wenn es sich um die oberste Komponente handelt. Verwenden Sie dazu ReactDOM.render und stellen Sie ihm sowohl die Komponente als auch den DOM-Knoten zur Verfügung, auf dem der React-Baum dargestellt werden soll:

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'

ReactDOM.render(<Hello name="Billy James" />, document.getElementById('main'))

Inzwischen wissen Sie, wie Sie eine grundlegende Komponente herstellen und props annehmen. Lasst uns noch einen Schritt weiter gehen und den state einführen.

Lassen Sie uns der Demo halber unsere Hello World-App erstellen und nur den Vornamen anzeigen, wenn ein vollständiger Name angegeben ist.

import React from 'react'

class Hello extends React.Component {

    constructor(props){

        //Since we are extending the default constructor,
        //handle default activities first.
        super(props);

        //Extract the first-name from the prop
        let firstName = this.props.name.split(" ")[0];
        
        //In the constructor, feel free to modify the
        //state property on the current context.
        this.state = {
            name: firstName
        }

    } //Look maa, no comma required in JSX based class defs!

    render() {
        return <h1>Hello, {this.state.name}!</h1>
    }
}

export default Hello

Hinweis: Jede Komponente kann ihren eigenen Status haben oder den Status ihrer Eltern als Requisite akzeptieren.

Codepen Link zum Beispiel.

Hallo Welt

Ohne JSX

Hier ein einfaches Beispiel, in dem die Haupt-API von React zum Erstellen eines React-Elements und die React-DOM-API zum Rendern des React-Elements im Browser verwendet wird.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>

  </head>
  <body>
    <div id="example"></div>

    <script type="text/javascript">

      // create a React element rElement
      var rElement = React.createElement('h1', null, 'Hello, world!');

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

Mit JSX

Anstatt ein React-Element aus Strings zu erstellen, können Sie JSX (eine von Facebook erstellte Javascript-Erweiterung zum Hinzufügen von XML-Syntax zu JavaScript) verwenden, die das Schreiben ermöglicht

var rElement = React.createElement('h1', null, 'Hello, world!');

als Äquivalent (und für jemanden, der mit HTML vertraut ist, besser lesbar)

var rElement = <h1>Hello, world!</h1>;

Der Code, der JSX enthält, muss in einem Tag <script type="text/babel"> . Alles innerhalb dieses Tags wird mit der Babel-Bibliothek (die zusätzlich zu den React-Bibliotheken enthalten sein muss) in einfaches Javascript umgewandelt.

So wird schließlich das obige Beispiel:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>
    <!-- Include the Babel library -->
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>

  </head>
  <body>
   <div id="example"></div>

    <script type="text/babel">

      // create a React element rElement using JSX
      var rElement = <h1>Hello, world!</h1>;

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

Was ist ReactJS?

ReactJS ist eine komponentenbasierte Open-Source-Frontend-Bibliothek, die nur für die Ansichtsebene der Anwendung verantwortlich ist. Es wird von Facebook gepflegt.

ReactJS verwendet einen virtuellen DOM-basierten Mechanismus, um Daten (Ansichten) in HTML-DOM einzufügen. Das virtuelle DOM funktioniert schnell, da nur einzelne DOM-Elemente geändert werden, anstatt jedes Mal ein vollständiges DOM zu laden

Eine React-Anwendung besteht aus mehreren Komponenten , von denen jede für die Ausgabe eines kleinen, wiederverwendbaren HTML-Teils verantwortlich ist. Komponenten können in andere Komponenten geschachtelt werden, damit komplexe Anwendungen aus einfachen Bausteinen aufgebaut werden können. Eine Komponente kann auch den internen Zustand beibehalten. Beispielsweise kann eine TabList-Komponente eine Variable speichern, die der aktuell geöffneten Registerkarte entspricht.

Mit React können wir Komponenten in einer domänenspezifischen Sprache namens JSX schreiben. Mit JSX können wir unsere Komponenten mithilfe von HTML schreiben und JavaScript-Ereignisse einmischen. React konvertiert dies intern in ein virtuelles DOM und gibt schließlich unseren HTML-Code für uns aus.

React " reagiert " auf Zustandsänderungen in Ihren Komponenten schnell und automatisch, um die Komponenten im HTML-DOM mithilfe des virtuellen DOM erneut zu rendern. Das virtuelle DOM ist eine In-Memory-Darstellung eines tatsächlichen DOM. Durch den Großteil der Verarbeitung innerhalb des virtuellen DOMs und nicht direkt im DOM des Browsers kann React schnell reagieren und nur Komponenten hinzufügen, aktualisieren und entfernen, die seit dem letzten Renderzyklus geändert wurden.

Hallo Welt mit Staatenlosen Funktionen

Zustandslose Komponenten erhalten ihre Philosophie durch funktionale Programmierung. Was bedeutet: Eine Funktion gibt immer das gleiche wieder, genau das, was ihr gegeben wird.

Zum Beispiel:

const statelessSum = (a, b) => a + b;

let a = 0;
const statefulSum = () => a++;

Wie Sie im obigen Beispiel sehen können, gibt statelessSum immer die gleichen Werte zurück, wenn a und b angegeben sind. Die statefulSum-Funktion gibt jedoch nicht dieselben Werte zurück, auch wenn keine Parameter vorhanden sind. Dieses Funktionsverhalten wird auch als Nebeneffekt bezeichnet . Da wirkt sich die Komponente auf etwas weiter aus.

Es wird daher empfohlen, häufiger zustandslose Komponenten zu verwenden, da diese frei von Nebenwirkungen sind und immer dasselbe Verhalten erzeugen. Das ist es, was Sie in Ihren Apps suchen wollen, denn schwankender Zustand ist der ungünstigste Fall für ein wartbares Programm.

Die grundlegendste Art der reagierenden Komponente ist eine ohne Zustand. Reaktionskomponenten, die reine Funktionen ihrer Requisiten sind und keine interne Zustandsverwaltung erfordern, können als einfache JavaScript-Funktionen geschrieben werden. Diese werden als Stateless Functional Components da sie nur eine Funktion von props , ohne einen state zu haben, den man verfolgen kann.

Hier ist ein einfaches Beispiel, um das Konzept einer Stateless Functional Component zu veranschaulichen:

// In HTML
<div id="element"></div>

// In React
const MyComponent = props => {
    return <h1>Hello, {props.name}!</h1>;
};

ReactDOM.render(<MyComponent name="Arun" />, element);
// Will render <h1>Hello, Arun!</h1>

Beachten Sie, dass diese Komponente lediglich ein h1 Element enthält, das den name prop enthält. Diese Komponente verfolgt keinen Zustand. Hier ist auch ein ES6-Beispiel:

import React from 'react'

const HelloWorld = props => (
    <h1>Hello, {props.name}!</h1>
)

HelloWorld.propTypes = {
    name: React.PropTypes.string.isRequired
}

export default HelloWorld

Da diese Komponenten keine Hintergrundinstanz zur Verwaltung des Status benötigen, bietet React mehr Raum für Optimierungen. Die Implementierung ist sauber, aber bisher wurden keine derartigen Optimierungen für zustandslose Komponenten implementiert .

React App erstellen

create -react-app ist ein von Facebook erstellter React-App-Boilerplate-Generator. Es bietet eine Entwicklungsumgebung, die für eine einfache Verwendung mit minimalem Setup konfiguriert ist, einschließlich:

ES6- und JSX-Transpilation
Dev-Server mit Hot-Modul-Nachladen
Code fusseln
CSS-Präfix
Erstellen Sie ein Skript mit JS, CSS und Bildbündelung sowie Quellcaps
Jest-Test-Framework

Installation

Installieren Sie zuerst create-react-app global mit dem Node Package Manager (npm).

npm install -g create-react-app

Führen Sie dann den Generator in Ihrem ausgewählten Verzeichnis aus.

create-react-app my-app

Navigieren Sie zu dem neu erstellten Verzeichnis und führen Sie das Startskript aus.

cd my-app/
npm start

Aufbau

Create-React-App ist absichtlich nicht standardmäßig konfigurierbar. Wenn eine nicht standardmäßige Verwendung erforderlich ist, um beispielsweise eine kompilierte CSS-Sprache wie Sass zu verwenden, kann der Befehl Eject verwendet werden.

npm run eject

Dies ermöglicht die Bearbeitung aller Konfigurationsdateien. NB: Dies ist ein irreversibler Prozess.

Alternativen

Alternative React Boilerplates umfassen:

Build React App

Um Ihre App für die Produktionsbereitschaft zu erstellen, führen Sie den folgenden Befehl aus

npm run build

Absolute Grundlagen zum Erstellen wiederverwendbarer Komponenten

Komponenten und Requisiten

Da sich React nur mit der Sicht einer Anwendung befasst, wird der Hauptteil der Entwicklung in React die Erstellung von Komponenten sein. Eine Komponente repräsentiert einen Teil der Ansicht Ihrer Anwendung. "Requisiten" sind einfach die Attribute, die auf einem JSX-Knoten verwendet werden (z. B. <SomeComponent someProp="some prop's value" /> ) und sind die hauptsächliche Art und Weise, wie unsere Anwendung mit unseren Komponenten interagiert. Im obigen Snippet hätten wir innerhalb von SomeComponent Zugriff auf this.props , dessen Wert das Objekt {someProp: "some prop's value"} .

Es kann hilfreich sein, React-Komponenten als einfache Funktionen zu verstehen - sie nehmen Eingaben in Form von "Requisiten" an und erzeugen Ausgaben als Markup. Viele einfache Komponenten gehen noch einen Schritt weiter und machen sich selbst zu "reinen Funktionen", was bedeutet, dass sie keine Nebeneffekte auslösen und idempotent sind (bei einer Reihe von Eingaben erzeugt die Komponente immer die gleiche Ausgabe). Dieses Ziel kann formal durchgesetzt werden, indem Komponenten anstelle von "Klassen" als Funktionen erstellt werden. Es gibt drei Möglichkeiten, eine React-Komponente zu erstellen:

Funktionale ("zustandslose") Komponenten

const FirstComponent = props => (
    <div>{props.content}</div>
);

React.createClass ()

const SecondComponent = React.createClass({
    render: function () {
        return (
            <div>{this.props.content}</div>
        );
    }
});

ES2015 Klassen

class ThirdComponent extends React.Component {
    render() {
        return (
            <div>{this.props.content}</div>
        );
    }
}

Diese Komponenten werden genauso verwendet:

const ParentComponent = function (props) {
    const someText = "FooBar";
    return (
        <FirstComponent content={someText} />
        <SecondComponent content={someText} />
        <ThirdComponent content={someText} />
    );
}

Die obigen Beispiele werden alle zu identischem Markup führen.

Funktionale Komponenten können keinen "Zustand" enthalten. Wenn Ihre Komponente also einen Status haben muss, sollten Sie sich für klassenbasierte Komponenten entscheiden. Weitere Informationen finden Sie unter Erstellen von Komponenten .

Als letzte Bemerkung sind reagierende Requisiten nach der Übergabe unveränderlich, dh sie können nicht innerhalb einer Komponente geändert werden. Wenn das übergeordnete Element einer Komponente den Wert einer Requisite ändert, behandelt React die alten Requisiten durch die neuen ersetzt, und die Komponente rendert sich selbst mit den neuen Werten.

In Thinking in React und wiederverwendbaren Komponenten finden Sie tiefere Einblicke in die Beziehung von Requisiten zu Komponenten.

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

React Tutorial
Erste Schritte mit React

Suche…