ReactJS - Erstellung einer React-Anwendung

Hallo da draußen, zukünftige React-Entwickler! Ich freue mich sehr, euch durch die aufregende Reise der Erstellung eurer ersten React-Anwendung zu führen. Als jemand, der seit Jahren Informatik unterrichtet, kann ich euch versichern, dass React nicht nur leistungsstark, sondern auch Spaß beim Lernen ist. Also tauchen wir ein!

ReactJS - Creating a React Application

Was ist React?

Bevor wir mit dem Coden beginnen, lassen wir uns anschauen, was React ist. React ist eine beliebte JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen. Sie wurde von Facebook entwickelt und wird jetzt von vielen großen Unternehmen wie Netflix, Instagram und Airbnb verwendet. Denkt an React als eine Sammlung von Lego-Steinen, die ihr verwenden könnt, um komplexe Webanwendungen leicht zu erstellen.

Erste Schritte

Um eine React-Anwendung zu erstellen, benötigen wir einige Werkzeuge. Keine Sorge, wenn ihr diese noch nie verwendet habt - wir gehen jeden Schritt gemeinsam durch!

Voraussetzungen

Node.js und npm (Node Package Manager)
Ein Code-Editor (ich empfehle Visual Studio Code)

Wenn ihr diese noch nicht installiert habt, nehmt euch einen Moment Zeit dazu. Es ist wie das Vorbereiten eurer Küche, bevor ihr ein leckeres Gericht kocht!

Verwendung des Rollup-Bündlers

Lassen Sie uns mit der Erstellung einer React-Anwendung mit Rollup beginnen. Rollup ist ein Modul-Bündler für JavaScript, der kleine Code-Teile in etwas Größerem und Komplexerem kompiliert.

Schritt 1: Projekt einrichten

Zuerst erstellen wir ein neues Verzeichnis für unser Projekt und initialisieren es:

mkdir my-react-app
cd my-react-app
npm init -y

Dies erstellt einen neuen Ordner und initialisiert ein neues Node.js-Projekt. Es ist wie das Legen des Fundaments unseres Hauses!

Schritt 2: Abhängigkeiten installieren

Jetzt installieren wir die notwendigen Pakete:

npm install react react-dom
npm install --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-replace rollup-plugin-babel @rollup/plugin-babel @babel/preset-react rollup-plugin-terser

Lass dich von diesen langen Namen nicht überwältigen. Denke daran, dass sie wie Zutaten für unser React-Rezept sind!

Schritt 3: Konfigurationsdateien erstellen

Lassen Sie uns zwei wichtige Dateien erstellen:

rollup.config.js:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
sourcemap: true,
},
plugins: [
resolve(),
commonjs(),
replace({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
babel({
presets: ['@babel/preset-react'],
}),
terser(),
],
};

Diese Datei tells Rollup, wie es unsere Anwendung bündeln soll. Es ist wie das Geben von Anweisungen an einen Koch, wie ein Gericht zuzubereiten ist.

.babelrc:

{
"presets": ["@babel/preset-react"]
}

Diese Datei konfiguriert Babel, das hilft, modernes JavaScript in eine Version zu übersetzen, die ältere Browser verstehen können.

Schritt 4: Erstellen unserer React-Komponenten

Jetzt erstellen wir unsere erste React-Komponente! Erstellen Sie eine neue Datei src/App.js:

import React from 'react';

function App() {
return (
<div>
<h1>Hello, React!</h1>
<p>Willkommen in meiner ersten React-Anwendung!</p>
</div>
);
}

export default App;

Dies ist unsere Hauptkomponente. Es ist wie die Hauptdarstellerin unseres Stückes!

Als nächstes erstellen wir src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

Diese Datei ist verantwortlich für das Rendern unserer App-Komponente in das HTML.

Schritt 5: Erstellen der HTML-Datei

Erstellen Sie eine neue Datei public/index.html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine React-App</title>
</head>
<body>
<div id="root"></div>
<script src="../dist/bundle.js"></script>
</body>
</html>

Dies ist, wo unsere React-Anwendung eingebettet wird.

Schritt 6: Skripte zu package.json hinzufügen

Aktualisiert eure package.json, um diese Skripte hinzuzufügen:

"scripts": {
"build": "rollup -c",
"start": "rollup -c -w"
}

Diese Skripte werden uns helfen, unsere Anwendung zu bauen und zu starten.

Schritt 7: Anwendung bauen und starten

Jetzt lassen wir unsere Kreation zum Leben erwecken! Führt aus:

npm run build

Dies erstellt unsere gebündelte JavaScript-Datei. Um eure App anzusehen, öffnet public/index.html in einem Webbrowser. Gratulation! Ihr habt gerade eure erste React-Anwendung mit Rollup erstellt!

Verwendung des Parcel-Bündlers

Nun, da wir gesehen haben, wie man Rollup verwendet, lassen uns einen anderen beliebten Bündler ausprobieren: Parcel. Parcel ist bekannt für seinen Zero-Configuration-Ansatz, der es super einfach macht, loszulegen.

Schritt 1: Projekt einrichten

Lassen Sie uns ein neues Projekt erstellen:

mkdir my-parcel-react-app
cd my-parcel-react-app
npm init -y

Schritt 2: Abhängigkeiten installieren

Installiert React und Parcel:

npm install react react-dom
npm install --save-dev parcel-bundler

Schritt 3: Erstellen unserer React-Komponenten

Erstellt src/App.js:

import React from 'react';

function App() {
return (
<div>
<h1>Hello, React with Parcel!</h1>
<p>Diese App wurde mit Parcel gebündelt.</p>
</div>
);
}

export default App;

Erstellt src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

Schritt 4: Erstellen der HTML-Datei

Erstellt src/index.html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine Parcel React App</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>

Beachtet, wie wir direkt auf unsere index.js-Datei verlinken. Parcel wird die Bündelung für uns erledigen!

Schritt 5: Skripte zu package.json hinzufügen

Aktualisiert eure package.json:

"scripts": {
"start": "parcel src/index.html",
"build": "parcel build src/index.html"
}

Schritt 6: Anwendung starten

Jetzt starten wir unsere Anwendung:

npm start

Parcel wird automatisch eure App in einem Browser öffnen. Jegliche Änderungen, die ihr vornimmt, werden sofort reflektiert!

Um für die Produktion zu bauen:

npm run build

Dies erstellt optimierte Dateien im dist-Verzeichnis.

Vergleichen von Rollup und Parcel

Hier ist ein schneller Vergleich der beiden Bündler, die wir verwendet haben:

Feature	Rollup	Parcel
Konfiguration	Erfordert Konfigurationsdatei	Zero-Configuration
Geschwindigkeit	Schnell	Sehr schnell
Bündelgröße	Im Allgemeinen kleiner	Etwas größer
Lernkurve	Steiler	Sanft
Flexibilität	Hoch anpassungsfähig	Weniger anpassungsfähig

Beide Bündler haben ihre Stärken, und die Wahl zwischen ihnen hängt oft von den spezifischen Bedürfnissen eures Projekts ab.

Fazit

Gratulation! Ihr habt jetzt mit beiden, Rollup und Parcel, React-Anwendungen erstellt. Denkt daran, die Reise von tausend Meilen beginnt mit einem Schritt, und ihr habt gerade eure ersten Schritte in die aufregende Welt der React-Entwicklung gemacht.

Wenn ihr weiter lernt und wächst, werdet ihr entdecken, dass React eine ganze neue Welt der Möglichkeiten in der Webentwicklung eröffnet. Es ist wie das Lernen zu malen - anfangs könnt ihr vielleicht nur grundlegende Formen zeichnen, aber bald werdet ihr Meisterwerke schaffen!

Bleibt dran, bleibt neugierig und vor allem, habt Spaß! React ist ein leistungsstarkes Werkzeug, aber es ist auch eine Freude zu verwenden. Frohes Coden!

Credits: Image by storyset

Vorheriges Tutorial:

ReactJS - Architektur

Nächstes Tutorial:

ReactJS - JSX