Kursinhalt
React-Meisterschaft
React-Meisterschaft
1. Einführung in die Grundlagen von React
Was Ist React?SPAs vs. MPAs in der WebentwicklungWie React mit dem Virtuellen DOM ArbeitetEinführung in JSX in ReactErstellen Komplexer JSX-ElementeElemente in React RendernHerausforderung: Rendering-ElementReact-KomponenteProps in ReactHerausforderung: Funktionale KomponentenBedingte DarstellungHerausforderung: Bedingte Darstellung - Chat-BenachrichtigungHerausforderung: Bedingte Darstellung - BankalarmRendern Einer DatensammlungHerausforderung: Rendern Einer DatensammlungZusammenfassung des Abschnitts Einführung in React
2. Styling in React Apps
Einführung in das Styling in ReactInline-StileInline-Stile in der PraxisHerausforderung: Inline-StileStyling mit der CSS-DateiStyling mit der CSS-Datei in der PraxisHerausforderung: Styling mit der CSS-DateiStyling mit CSS-ModulenDatei- und Ordnerstruktur-OrganisationHerausforderung: CSS-ModuleZusammenfassung des Abschnitts Styling in React
3. React Hooks und Context
Einführung: React Hooks und ContextUseState-HookHerausforderung: Sichtbarkeit UmschaltenuseRef-HookHerausforderung: Erstellen Einer Formular-KomponenteUseEffect-HookHerausforderung: Daten Abrufen und AnzeigenuseMemo-HookHerausforderung: AutolistenfilteringKontextKontext in der PraxisHerausforderung: Welt der Astronomie AppZusammenfassung des Abschnitts React Hooks und Context
Zusammenfassung des Abschnitts 'React in der Realen Welt'
Folgen Sie diesen Schritten, um eine React-App auf Ihrem lokalen Rechner zu entwickeln:
Installieren Sie Node.js und npm:
- Besuchen Sie die offizielle Node.js-Website unter https://nodejs.org;
- Laden Sie das Installationsprogramm für Ihr Betriebssystem herunter und folgen Sie den Installationsanweisungen, um Node.js und npm zu installieren.
Installieren Sie einen Code-Editor:
- Wählen Sie einen Code-Editor, der Ihren Vorlieben entspricht, wie zum Beispiel Visual Studio Code;
- Installieren Sie den Code-Editor auf Ihrem Computer;
- Dieser Code-Editor wird Ihr Werkzeug zum Schreiben von React-Code sein.
Erstellen Sie einen Projektordner:
- Erstellen Sie einen leeren Ordner auf Ihrem Computer, um Ihr React-Projekt zu speichern;
- Dieser Ordner dient als Stammverzeichnis für Ihr Projekt.
Öffnen Sie den Code-Editor:
- Starten Sie den Code-Editor Ihrer Wahl;
- Navigieren Sie zum Projektordner, den Sie in Schritt 3 erstellt haben;
- Dies ermöglicht es Ihnen, an Ihrem React-Projekt innerhalb des Code-Editors zu arbeiten.
Öffnen Sie das Terminal:
- Öffnen Sie innerhalb des Code-Editors das Terminal oder die Befehlszeilenschnittstelle;
- Hier führen Sie Befehle aus, um Ihr React-Projekt einzurichten und zu verwalten.
Richten Sie das Projekt ein:
- Führen Sie im Terminal den Befehl
npx create-react-app .
aus; - Dieser Befehl initialisiert ein neues React-Projekt mit dem Create React App-Tool.
Starten Sie die Live-Seite:
- Führen Sie den Befehl
npm start
aus, sobald das Projekt erstellt ist; - Dies startet den Entwicklungsserver und öffnet eine Live-Vorschau Ihrer React-App im Browser.
Projekt anpassen:
- Öffnen Sie den
src
-Ordner in Ihrem Projektverzeichnis; - Sie können alle Standarddateien löschen, die von Create React App erstellt wurden;
- Erstellen Sie Ihre React-Komponenten, fügen Sie Stile hinzu und implementieren Sie die Funktionalität im
src
-Ordner.
Viel Spaß beim Programmieren!
Wenn Sie diese Schritte befolgen, haben Sie ein grundlegendes React-Projekt eingerichtet und bereit für die Entwicklung. Sie können nun beginnen, Ihre React-Komponenten zu erstellen, Ihre App zu stylen und die Funktionalität nach Bedarf für Ihr Projekt hinzuzufügen.
War alles klar?
Danke für Ihr Feedback!
Abschnitt 4. Kapitel 6