ReactJS - Installation: A Beginner's Guide

Hallo da, zukünftige React-Entwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von ReactJS zu sein. Als jemand, der seit Jahren Informatik unterrichtet, kann ich Ihnen versichern, dass das Lernen von React wie das Fahrradfahren ist – es mag am Anfang einschüchternd erscheinen, aber wenn Sie den Dreh raus haben, werden Sie im Handumdrehen cruisen!

ReactJS - Installation

Was ist ReactJS?

Bevor wir uns der Installation zuwenden, lassen Sie uns schnell verstehen, was ReactJS ist. React ist eine beliebte JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen, insbesondere für Einzelseitenanwendungen. Es geht darum, wiederverwendbare UI-Komponenten zu erstellen, die ihren eigenen Zustand verwalten, was die Erstellung komplexer Oberflächen einfacher macht.

Nun, lassen Sie uns an die Arbeit gehen und mit der Einrichtung von React beginnen!

Toolchain: Dein React-Werkzeugkasten

Wenn man mit React arbeitet, verwendet man ein Satz von Tools, der als "Toolchain" bezeichnet wird. Denke daran als deinen React-Schweizer Taschenmesser – es hat alles, was du brauchst, um erstaunliche Webanwendungen zu erstellen.

Wesentliche Tools in unserer Toolchain

Tool	Zweck
Node.js	JavaScript-Laufzeitumgebung
npm (Node Package Manager)	Paketmanager für JavaScript
Babel	JavaScript-Compiler
Webpack	Modul-Bundler
ESLint	Code-Linter
Jest	Test-Framework

Mach dir keine Sorgen, wenn diese Begriffe jetzt wie eine fremde Sprache klingen. Wir werden jeden einzelnen im Laufe der Zeit erkunden!

Der Serve Static Server: Dein lokaler Spielplatz

Bevor wir uns komplexen Einrichtungen zuwenden, lassen Sie uns mit etwas Einfachem beginnen – einem statischen Server. Dies ermöglicht es uns, unsere React-Anwendung lokal auf unserem Computer zu betreiben.

Einrichtung eines einfachen statischen Servers

Stelle sicher, dass Node.js installiert ist. Du kannst es von nodejs.org herunterladen.
Öffne dein Terminal oder deine Kommandozeile und führe aus:

npm install -g serve

Dieser Befehl installiert das 'serve'-Paket global auf deinem System.

Erstelle ein neues Verzeichnis für dein Projekt:

mkdir my-react-app
cd my-react-app

Erstelle eine einfache HTML-Datei namens index.html:

<!DOCTYPE html>
<html>
<head>
<title>Meine erste React-App</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, React!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>

Führe den serve-Befehl aus:

serve

Voilà! Du solltest eine Nachricht sehen, die dir mitteilt, wo deine App bereitgestellt wird. Normalerweise ist es http://localhost:5000. Öffne diese URL in deinem Browser, und du wirst deine erste React-App sehen!

Babel-Compiler: Übersetzung in die Zukunft

Erinnern Sie dich an Babel aus unserer Toolchain? Es ist Zeit, diesen magischen Übersetzer kennenzulernen! Babel ist ein JavaScript-Compiler, der es dir ermöglicht, die neuesten JavaScript-Funktionen zu verwenden, selbst wenn die Browser sie noch nicht unterstützen.

Warum brauchen wir Babel?

Stelle dir vor, du schreibst einen Brief an einen Freund, der eine andere Sprache spricht. Babel ist wie ein Übersetzer, der deinen Brief sofort in die Sprache deines Freundes übersetzt. In der React-Welt übersetzt Babel modernes JavaScript und JSX (React's Syntax-Erweiterung) in eine Version von JavaScript, die alle Browser verstehen können.

Babel in unserem Projekt verwenden

Wir haben tatsächlich bereits Babel in unserer einfachen HTML-Datei oben eingeschlossen. Lassen Sie uns diesen Teil analysieren:

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Dein React-Code hier
</script>

Die erste Zeile schließt die Babel-Standalone-Bibliothek ein. Die zweite Zeile weist Babel an, den Code innerhalb des Script-Tags zu kompilieren.

Create React App Toolchain: Die All-in-One-Lösung

Nun, da wir unsere Füße in die React-Wasser getaucht haben, tauchen wir mit der Create React App Toolchain ein. Dies ist eine komfortable, funktionsreiche Umgebung zum Lernen und Erstellen neuer React-Einzelseitenanwendungen.

Einrichtung von Create React App

Öffne dein Terminal und führe aus:

npx create-react-app my-app

Wenn es fertig ist, navigiere zu deiner neuen App:

cd my-app

Starte den Entwicklungsserver:

npm start

Deine neue React-App sollte automatisch in deinem Browser geöffnet werden, normalerweise unter http://localhost:3000.

Was ist drinnen?

Create React App richtet eine vollständig konfigurierte Entwicklungsumgebung ein. Lassen Sie uns einen Blick darauf werfen, was wir bekommen:

Funktion	Beschreibung
React	Die Kern-React-Bibliothek
webpack	Bündelt deinen Code und deine Assets
Babel	Kompiliert modernes JavaScript
ESLint	Überprüft deinen Code auf Fehler
Jest	Ermöglicht dir das Schreiben von Tests
Hot Reloading	Sieh deine Änderungen sofort im Browser

Dein erstes Komponente

Lass uns ein einfaches React-Komponente erstellen. Öffne src/App.js und ersetze deren Inhalt mit:

import React from 'react';

function App() {
return (
<div>
<h1>Willkommen in meiner React-App</h1>
<p>Dies ist mein erstes Komponente!</p>
</div>
);
}

export default App;

Speichere die Datei und überprüfe deinen Browser. Du solltest dein neues Komponente gerendert sehen!

Schlussfolgerung

Glückwunsch! Du hast gerade deine ersten Schritte in die aufregende Welt der React-Entwicklung gemacht. Wir haben viel Boden covered – von der Einrichtung eines einfachen statischen Servers bis hin zur Verwendung der leistungsstarken Create React App Toolchain.

Denke daran, dass das Lernen von React eine Reise ist. Mach dir keine Sorgen, wenn nicht alles sofort klar wird. Übe weiter, baue weiter und vor allem, habe Spaß dabei!

In unserer nächsten Lektion werden wir tiefer in React-Komponenten eintauchen und anfingen, komplexere Anwendungen zu erstellen. Bis dahin, happy coding!

Credits: Image by storyset