and001 | 💻 React-App erstellen

Inhaltsverzeichnis

Einleitung

Das Erstellen einer React-App war noch nie so einfach. Dieser Leitfaden führt Sie durch den Prozess der Einrichtung einer einfachen React-App sowohl unter macOS als auch unter Windows.

🌟 Ihr Leitfaden zur Erstellung einer React-App

Bevor Sie beginnen:

📚 Vorteile erkunden: Verstehen Sie die Vorteile der Verwendung von React. Mehr lesen.
🛠 Voraussetzungen: Stellen Sie sicher, dass Node.js und npm installiert sind. Node.js für Mac/Windows herunterladen.
🖥 IDE: Wählen Sie einen guten Code-Editor wie Visual Studio Code. VS Code herunterladen.

 React-App unter macOS erstellen

Terminal öffnen: Navigieren Sie zu dem Ordner, in dem Sie Ihre React-App erstellen möchten.
Führen Sie den folgenden Befehl aus:
```
npx create-react-app meine-app
```
Zum App-Verzeichnis navigieren:
```
cd meine-app
```
App starten:
```
npm start
```

⊞ React-App unter Windows erstellen

Eingabeaufforderung öffnen: Navigieren Sie zu dem Ordner, in dem Sie Ihre React-App erstellen möchten.
Führen Sie den folgenden Befehl aus:
```
npx create-react-app meine-app
```
Zum App-Verzeichnis navigieren:
```
cd meine-app
```
App starten:
```
npm start
```

Projektstruktur erkunden

Nach dem Ausführen des Befehls sehen Sie ein neues Verzeichnis namens meine-app. Darin finden Sie:

node_modules/: Enthält alle Pakete und Bibliotheken.
public/: Hält statische Assets wie HTML-Dateien.
src/: Hier befinden sich Ihre React-Komponenten und die Logik.
package.json: Verwaltet Abhängigkeiten und Skripte für Ihr Projekt.

👩🏽‍💻🧑🏼‍💻Jetzt src/App.js öffnen

Dies ist JSX, die Methode, die von React verwendet wird, um XML-Syntax zu JavaScript hinzuzufügen.

// src/App.js

import logo from "./logo.svg";
import "./App.css";

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Bearbeiten Sie <code>src/App.js</code> und speichern Sie, um neu zu laden.
</p>
<a
className="App-link"
href="https://de.reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
React lernen
</a>
</header>
</div>
);
}

export default App;

Lokale Bereitstellung

Um Ihre App lokal bereitzustellen, führen Sie einfach npm start im Projektverzeichnis aus. Ihre App wird unter http://localhost:3000/ zugänglich sein.

Sie werden etwas Ähnliches wie das folgende Bild auf dem Bildschirm sehen:

Auf GitHub hochladen

Git-Repository initialisieren:
git init
Dateien zu Git hinzufügen:
git add .
Änderungen übernehmen:
git commit -m "Erster Commit"
Remote-Repository hinzufügen:
git remote add origin [Ihre GitHub Repo URL]
Auf GitHub hochladen:
git push -u origin master

🗽 React-App bauen und bereitstellen

Nun sind wir nur noch wenige Schritte davon entfernt, eine React-App bereitzustellen.

Jetzt müssen wir den folgenden Befehl ausführen, um die App zu bauen:

npm run build

Dieser Befehl erstellt einen Produktionsbuild, der für unser React-Projekt optimiert ist, und gibt die generierten Dateien zusammen mit ihren Größen aus:

Compiled successfully.

File sizes after gzip:

46.62 KB build/static/js/2.1500c654.chunk.js\
1.59 KB build/static/js/3.8022f77f.chunk.js\
1.17 KB build/static/js/runtime-main.86c7b7c2.js\
649 B build/static/js/main.ef6580eb.chunk.js\
430 B build/static/css/main.5ae9c609.chunk.css\

Wir sehen die endgültige Ausgabe des Build-Tools Webpack. Es gibt uns eine Vorstellung davon, wie groß unsere App-Dateien sind, da die Größe unserer .js-Dateien die Leistung unserer App erheblich beeinflussen kann.

🎥 YouTube-Video

👀 Siehe unten:

💻 React-App erstellen - MAC/WINDOWS