Reagieren Sie auf den Schulungskurs, Teil 28: Reagieren Sie auf moderne Funktionen, Projektideen und Schlussfolgerungen

Heute, im letzten Teil der Übersetzung des React-Kurses, werden wir über die modernen Funktionen von React sprechen und die Ideen von React-Anwendungen diskutieren. So können Sie wiederholen, was Sie während dieses Kurses gelernt haben, und viel lernen.



→ Teil 1: Kursübersicht, Gründe für die Beliebtheit von React, ReactDOM und JSX
→ Teil 2: Funktionskomponenten
→ Teil 3: Komponentendateien, Projektstruktur
→ Teil 4: übergeordnete und untergeordnete Komponenten
→ Teil 5: Beginn der Arbeit an einer TODO-Anwendung, Grundlagen des Stylings
→ Teil 6: Über einige Funktionen des Kurses, JSX und JavaScript
→ Teil 7: Inline-Stile
→ Teil 8: Fortsetzung der Arbeit an der TODO-Anwendung, Vertrautheit mit den Eigenschaften von Komponenten
→ Teil 9: Komponenteneigenschaften
→ Teil 10: Workshop zum Arbeiten mit Komponenteneigenschaften und Styling
→ Teil 11: Dynamische Markup-Generierung und Map-Arrays-Methode
→ Teil 12: Workshop, dritte Phase der Arbeit an einer TODO-Anwendung
→ Teil 13: Klassenbasierte Komponenten
→ Teil 14: Workshop zu klassenbasierten Komponenten, Komponentenstatus
→ Teil 15: Komponentengesundheitsworkshops
→ Teil 16: Die vierte Phase der Arbeit an einer TODO-Anwendung, die Ereignisbehandlung
→ Teil 17: Fünfte Phase der Arbeit an einer TODO-Anwendung, Änderung des Status von Komponenten
→ Teil 18: Die sechste Phase der Arbeit an einer TODO-Anwendung
→ Teil 19: Methoden des Komponentenlebenszyklus
Teil 20: Die erste Lektion in bedingtem Rendern
→ Teil 21: Zweite Lektion und Workshop zum bedingten Rendern
→ Teil 22: Die siebte Phase der Arbeit an einer TODO-Anwendung, bei der Daten aus externen Quellen heruntergeladen werden
→ Teil 23: Erste Lektion zum Arbeiten mit Formularen
→ Teil 24: Lektion der zweiten Form
→ Teil 25: Workshop zum Arbeiten mit Formularen
→ Teil 26: Anwendungsarchitektur, Container- / Komponentenmuster
→ Teil 27: Kursprojekt
→ Teil 28: Aktuelle Reaktionsfunktionen, Projektideen, Abschluss
→ Das Ende!

Lektion 46. Entwicklung moderner Reaktionsanwendungen

→ Original

Viele Programmierer auf Facebook arbeiten an der React-Bibliothek, und Mitglieder der großen Community rund um React tragen zum Projekt bei. All dies führt dazu, dass sich React sehr schnell entwickelt. Wenn Sie beispielsweise React Anfang 2019 studiert und sich beispielsweise vor zwei Jahren Materialien in dieser Bibliothek angesehen haben, konnten Sie die Änderungen in React seit der Veröffentlichung dieser Materialien nicht übersehen. In React 16.3 wurden beispielsweise einige neue Methoden für den Komponentenlebenszyklus angezeigt, und einige Methoden wurden nicht mehr unterstützt. In React 16.6 gibt es beispielsweise noch mehr neue Funktionen. In React 17.0 und in zukünftigen Versionen dieser Bibliothek wird eine Vielzahl von Innovationen erwartet.

Jetzt werden wir über einige moderne React-Funktionen sprechen.

Viele dieser Funktionen hängen davon ab, welche Version der ECMAScript-Spezifikation von den zur Entwicklung des React-Projekts verwendeten Tools unterstützt wird. Wenn Sie beispielsweise den Babel-Transporter verwenden, bedeutet dies, dass Sie über die neuesten JavaScript-Funktionen verfügen. Es ist zu beachten, dass bei Verwendung von JavaScript-Funktionen in Projekten, die noch nicht im Standard enthalten sind, möglicherweise die Tatsache auftritt, dass sie sich ändern, wenn sie im Standard enthalten sind.

Eine der modernen JavaScript-Funktionen, die Sie bei der Entwicklung von React-Anwendungen verwenden können, ist die Möglichkeit, Klassenmethoden mithilfe der Pfeilfunktionssyntax zu deklarieren.

Hier ist der Code für die App Komponente, die das Textfeld anzeigt:

 import React, {Component} from "react" class App extends Component {   //        constructor() {       super()       this.state = {           firstName: ""       }       this.handleChange = this.handleChange.bind(this)   }     //        handleChange(event) {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

So sieht die Seite dieser Anwendung in einem Browser aus.


Anwendung im Browser

Wir schreiben die handleChange() -Methode als handleChange() neu und bringen den Komponentencode in die folgende Form:

 import React, {Component} from "react" class App extends Component {   //        constructor() {       super()       this.state = {           firstName: ""       }   }     //        handleChange = (event) => {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

Während dieser Konvertierung wurden kleine Änderungen am Code vorgenommen, die sich jedoch erheblich auf die Funktionsweise der Methode auswirken. Das this in den Pfeilfunktionen gibt den lexikalischen Bereich an, in dem sie sich befinden. Diese Funktionen unterstützen this Bindung nicht. Diese Funktion von Pfeilfunktionen führt dazu, dass Methoden, die mit ihnen deklariert wurden, im Klassenkonstruktor nicht daran gebunden werden müssen.

Eine andere Möglichkeit, die wir hier betrachten werden, ist die Verwendung von Klasseneigenschaften. Beim Initialisieren des Status im Konstruktor verwenden wir this.state . Also erstellen wir eine Instanzeigenschaft der Klasse. Jetzt können Eigenschaften außerhalb des Konstruktors erstellt werden. Infolgedessen können Sie den Code wie folgt konvertieren:

 import React, {Component} from "react" class App extends Component {   //        state = { firstName: "" }     //        handleChange = (event) => {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

Bitte beachten Sie, dass wir hier den Konstruktor durch Initialisieren des Status beim Deklarieren der entsprechenden Eigenschaft entfernt haben. Alles deutet darauf hin, dass diese JS-Funktion auf absehbare Zeit in den Standard aufgenommen wird.

Hier ist eine Liste der React-Funktionen.

• Kontext-API Es kann anstelle von Redux verwendet werden, obwohl dies nicht bedeutet, dass die Redux-Bibliothek ihre Relevanz verloren hat.
• Fehlergrenzen .
• Requisitenvorlage rendern .
• Komponenten höherer Ordnung .
• Router reagieren .
• Haken reagieren .
• Neue Funktionen von React 16.6 .

Im Allgemeinen kann festgestellt werden, dass, da sich React sehr schnell entwickelt, empfohlen wird, dass alle an der React-Entwicklung Beteiligten die Innovationen dieser Bibliothek ständig überwachen.

Lektion 47. Projektideen reagieren

→ Original

Während der Entwicklung von React haben Sie und ich einige Projekte erstellt - eine Todo-Anwendung und einen Meme-Generator. Möglicherweise wissen Sie bereits, was Sie mit React erstellen möchten. Vielleicht entwickeln Sie bereits Ihre eigene Anwendung. Wenn Sie sich noch nicht entschieden haben und die Praxis der beste Weg ist, Computertechnologie zu erlernen, finden Sie hier Materialien, in denen Sie eine ganze Reihe von Ideen für Webanwendungen finden, die mit React erstellt werden können.

Lektion 48. Fazit

→ Original

Glückwunsch! Sie haben gerade einen Kurs über die React-Bibliothek abgeschlossen. Sie haben sich mit den Grundbausteinen von React-Anwendungen vertraut gemacht, mit denen Sie bereits eigene Projekte erstellen können. Wenn Sie mit React etwas erstellen möchten, müssen Sie darauf vorbereitet sein, dass Sie noch viel zu lernen haben.

Lassen Sie uns die grundlegenden Konzepte durchgehen, die Sie während der Entwicklung dieses Kurses gelernt haben.

• JSX. Mit JSX können Sie Benutzeroberflächen mit einer Syntax beschreiben, die dem normalen HTML-Code sehr ähnlich ist.
• Zwei Ansätze zur Komponentenentwicklung. Klassenbasierte und funktionale Komponenten.
• Verschiedene Möglichkeiten zum Stylen von React-Anwendungen.
• Übergeben von Eigenschaften von übergeordneten Komponenten an untergeordnete Komponenten.
• Verwenden des Status von Komponenten zum Speichern und Arbeiten mit Daten.
• Bedingtes Rendern.
• Arbeiten Sie mit Formularen in React.

Vielen Dank für Ihre Aufmerksamkeit!

Liebe Leser! Wir bitten Sie, Ihre Eindrücke von diesem Kurs mitzuteilen und uns mitzuteilen, was Sie mit React entwickeln möchten (oder bereits entwickeln).