React Intermediate Tutorial: 3 Schritte

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:17

React Intermediate Tutorial

Sehen Sie sich hier das fertige Produkt an.

Was wirst du lernen?

Sie erstellen mit React.js eine einfache To-Do-Liste und lernen die komplizierteren Teile von React kennen. Voraussetzungen (sehr zu empfehlen) vervollständigen den Leitfaden für die ersten Schritte von response.js. Kenntnisse in HTMLKenntnisse in CSSGrundlegende Shell-BefehleGute Kenntnisse in JavaScript

Lieferungen

Die gesamte Software wird im Tutorial behandelt.

Sie benötigen einen Computer mit der folgenden installierten Software:

• npm/garn
• Eine IDE, die js unterstützt
• Ein Webbrowser

Schritt 1: React Intermediate Tutorial

Einstieg

Warum React.js?

Bei React.js geht es darum, Code wiederzuverwenden. Angenommen, Sie haben eine Navigationsleiste auf 100 Seiten. Wenn Sie eine neue Seite hinzufügen müssen, müssen Sie die Navigationsleiste auf jeder Seite ändern, dh Sie müssen für 100 Seiten dasselbe tun. Selbst mit Makros wird das sehr mühsam.

Erforderliche Software/Pakete installieren

Du wirst brauchen:

npm/garn

Wie installiert man:

1. Gehen Sie und installieren Sie das neueste LTS von Node.js
2. OPTIONAL: Wenn Sie Garn als Paketmanager bevorzugen, installieren Sie Garn, indem Sie Powershell npm install -g Garn eingeben
3. Öffnen Sie powershell/cmd.exe
4. Navigieren Sie zu dem Verzeichnis, in dem Sie Ihr Projekt erstellen möchten
5. Geben Sie npx create-react-app ein.

Sie haben die Einrichtungsphase abgeschlossen. Um es zu testen, öffnen Sie Powershell, navigieren Sie zu Ihrem Projektverzeichnis und geben Sie npm start ein. Sie sollten eine Webseite in Ihrem Standardbrowser laden.

Schritt 2: Schritt 1: Erste Schritte

Löschen Sie zunächst die folgenden Dateien aus Ihrem /src-Verzeichnis:

• App.test.js
• index.css
• logo.svg
• serviceWorker.js
• setupTests.js

Wir brauchen diese Dateien nicht.

Lassen Sie uns auch unser Dateisystem organisieren. Erstellen Sie diese Verzeichnisse in /src/:

• js
• CSS

lege App.js in das js-Verzeichnis und App.css in das CSS-Verzeichnis.

Als Nächstes reorganisieren wir die Abhängigkeiten.

Entfernen Sie in index.js die Importe für serviceWorker und index.css. Löschen Sie serviceWorker.register(). Leiten Sie die Pfade für App um.

Entfernen Sie in App.js den Import für logo.svg, da wir ihn nicht mehr benötigen. App.css umleiten. Löschen Sie die App()-Funktion und den Export für App.

In React haben wir zwei Möglichkeiten, Elemente zu definieren. Wir haben Funktionen und Klassen. Funktionen sind für weniger komplizierte Elemente und Klassen sind im Allgemeinen für kompliziertere Komponenten gedacht. Da eine Todo-Liste komplizierter ist als ein Haufen HTML, verwenden wir die Klassensyntax.

Fügen Sie dies zu Ihrem Code hinzu:

pastebin.com/nGXeCpaH

der html wird innerhalb der 2 divs gehen.

definieren wir das Element.

pastebin.com/amjd0jnb

Beachten Sie, wie wir den Wert im Staat definiert haben. Das werden wir später brauchen.

Ersetzen Sie in der Render-Funktion hi durch {this.state.value}

Wir rendern den Wert, der aus dem von uns definierten Zustand übergeben wird.

also lass es uns testen!

Ersetzen Sie es in der Render-Funktion der App durch Folgendes:

pastebin.com/aGLX4jVE

es sollte einen Wert anzeigen: "test".

Mal sehen, ob wir mehrere Aufgaben rendern können!

Anstatt React dazu zu bringen, nur ein Element zu rendern, können wir ein Array von erstellen und React anweisen, stattdessen das Array zu rendern.

ändere die Render-Funktion wie folgt:

pastebin.com/05nqsw71

Dies sollte 10 verschiedene Aufgaben rendern. Beachten Sie, wie wir Schlüssel hinzugefügt haben. Diese Schlüssel werden als Identifikatoren für React und uns verwendet, falls wir sie benötigen.

Nachdem unsere Aufgabenliste nun funktioniert, finden wir eine Möglichkeit, die Aufgaben zu laden. Hier kommt unser Staat ins Spiel.

fügen wir unserem Konstruktor einen Konstruktor hinzu.

pastebin.com/9jHAz2AS

In diesem Konstruktor haben wir das taskArray von der Renderfunktion in den Zustand verschoben. Löschen Sie das taskArray und die for-Schleife in der Render-Funktion. ändere das taskArray im div in this.state.taskArray.

Ihr App.js-Code sollte jetzt so aussehen:

pastebin.com/1iNtUnE6

Schritt 3: Hinzufügen einer Möglichkeit zum Hinzufügen und Entfernen von Objekten

Fügen wir eine Möglichkeit zum Hinzufügen und Entfernen von Objekten hinzu. Lass es uns planen.

Was brauchen wir?

• Eine Möglichkeit für den Benutzer, Objekte hinzuzufügen
• Ein Ort zum Aufbewahren von Gegenständen
• Eine Möglichkeit, die Objekte abzurufen

Was werden wir verwenden?

• Ein Element
• Die localstorage-API mit JSON

Beginnen wir mit dem Eingabeelement.

Fügen Sie unterhalb von {this.state.taskArray} eine Eingabe und eine Schaltfläche zu Ihrem Code hinzu

Hinzufügen

Es sollte jetzt eine Texteingabe und eine Schaltfläche zum Hinzufügen geben.

Es tut im Moment nichts, also fügen wir unserer App-Methode 6 Methoden hinzu.

Wir brauchen eine Methode, wenn auf die Schaltfläche geklickt wird und auch wenn jemand die Eingabe eingibt. Wir brauchen auch eine Möglichkeit, das Aufgabenarray zu generieren sowie Aufgaben zu speichern, zu laden und zu entfernen.

fügen wir diese 6 Methoden hinzu:

buttonKlick()

inputTyped(evt)

GenerateTaskArray()

speichernAufgaben(Aufgaben)

getTasks()

removeTask(id)

fügen wir auch diese Variable zu unserem Zustand hinzu:

Eingang

Daran müssen wir auch unsere Funktionen binden.

pastebin.com/syx465hD

Beginnen wir mit dem Hinzufügen von Funktionen.

füge 2 Attribute zu ähnlichem hinzu:

Dadurch wird die Funktion ausgeführt, wenn der Benutzer etwas in die Eingabe eingibt.

Fügen Sie dem Add ein onClick-Attribut wie folgt hinzu:

Hinzufügen

Wenn der Benutzer auf die Schaltfläche klickt, wird die Funktion ausgeführt.

Nun, da der HTML-Teil fertig ist, können wir mit der Funktionalität fortfahren.

Ich habe die localStorage-API-Schnittstelle bereits vorgefertigt, also ersetzen Sie die Funktionen saveTasks, getTasks und removeTask durch diese:

pastebin.com/G02cMPbi

Beginnen wir mit der inputTyped-Funktion.

Wenn der Benutzer tippt, müssen wir den internen Wert der Eingabe ändern.

Lassen Sie uns dies tun, indem Sie die setState-Funktion verwenden, die mit React bereitgestellt wird.

this.setState({input: evt.target.value});

Auf diese Weise können wir den Wert der Eingabe erhalten.

Sobald das erledigt ist, können wir an der buttonClick-Funktion arbeiten.

Wir müssen der Aufgabenliste eine Aufgabe hinzufügen. Wir ziehen zuerst die Aufgabenliste aus localStorage, bearbeiten sie und speichern sie dann. Anschließend rufen wir ein erneutes Rendern der Aufgabenliste auf, um sie zu aktualisieren.

var taskList = this.getTasks();

taskList.tasks.push(this.state.input);

this.saveTasks (Aufgabenliste);

this.generateTaskArray();

Wir rufen die Aufgaben ab, übertragen den Eingabewert in die Aufgaben und speichern ihn dann. Anschließend generieren wir das Task-Array.

Lassen Sie uns nun an der Funktion generateTaskArray() arbeiten.

wir müssen:

• Aufgaben bekommen
• Erstellen Sie eine Reihe von Aufgabenkomponenten
• Übergeben Sie die Aufgabenkomponenten zum Rendern

wir können die Aufgaben abrufen und mit getTasks() in einer Variablen speichern

var Aufgaben = getTasks().tasks

Wir müssen dann ein Array erstellen und auffüllen.

pastebin.com/9gNXvNWe

es sollte jetzt funktionieren.

QUELLCODE:

github.com/bluninja1234/todo_list_instructables

ZUSÄTZLICHE IDEEN:

Entfernungsfunktion (sehr einfach, onclick hinzufügen und mit removeTask aus Schlüsselindex löschen)

CSS (auch einfach, schreiben Sie Ihr eigenes oder verwenden Sie Bootstrap)