ReactJS-Tutorial: Erstellung Ihrer ersten React-App

Hallo da draußen, zukünftige React-Entwickler! Ich freue mich, diese Reise mit Ihnen anzutreten, während wir in die Welt von ReactJS eintauchen. Als jemand, der seit über einem Jahrzehnt Informatik unterrichtet, kann ich Ihnen versichern, dass React nicht nur leistungsstark, sondern auch unglaublich unterhaltsam zu lernen ist. Also, los geht's!

Was ist ReactJS?

React ist eine JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen. Sie wurde von Facebook entwickelt und hat sich seitdem zu einer der beliebtesten Frontend-Bibliotheken der Welt entwickelt. Aber keine Sorge, wenn das beängstigend klingt - wir werden es Schritt für Schritt auseinandernehmen.

Warum React?

Stellen Sie sich vor, Sie bauen ein Kartenhaus. Jedes Mal, wenn Sie etwas ändern möchten, müssen Sie jedes Karten sorgfältig anpassen, oder? React ist wie magische Karten, die sich automatisch anpassen, wenn Sie einen Teil ändern. Es macht das Erstellen und Aktualisieren von Webanwendungen viel einfacher und schneller.

Voraussetzungen

Bevor wir loslegen, lassen Sie uns sicherstellen, dass wir alles Notwendige haben:

1. Grundverständnis von HTML und CSS
2. Vertrautheit mit JavaScript (keine Sorge, wir werden dabei üben)
3. Ein Texteditor (ich empfehle Visual Studio Code)
4. Node.js auf Ihrem Computer installiert

Einrichtung Ihres ersten React-Projekts

Lassen Sie uns mit der Erstellung unseres ersten React-Projekts beginnen. Wir verwenden ein Tool namens Create React App, das alles, was wir brauchen, mit nur einem Befehl einrichtet.

1. Öffnen Sie Ihr Terminal oder Ihre Kommandozeile
2. Navigieren Sie zu dem Ordner, in dem Sie Ihr Projekt erstellen möchten
3. Führen Sie den folgenden Befehl aus:

npx create-react-app mein-erstes-react-app

Das kann ein paar Minuten dauern. Wenn es erledigt ist, navigieren Sie in Ihren neuen Projektordner:

cd mein-erstes-react-app

Nun starten wir unsere App:

npm start

Voilà! Sie sollten ein neues Browserfenster öffnen sehen, in dem Ihre erste React-App läuft. Es ist noch nicht viel, aber wir sind erst am Anfang!

Verständnis der Projektstruktur

Schauen wir uns an, was Create React App für uns eingerichtet hat:

mein-erstes-react-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg

Die wichtigsten Dateien für uns sind derzeit im src-Ordner. App.js ist där, wo wir den Großteil unseres Codes schreiben werden.

Ihr erster React-Component

Öffnen Sie src/App.js in Ihrem Texteditor. Sie sollten etwas wie folgendes sehen:

import React from 'react';
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://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
React lernen
</a>
</header>
</div>
);
}

export default App;

Dies ist eine React-Komponente. Keine Sorge, wenn es verwirrend aussieht - wir werden es auseinandernehmen:

1. Wir importieren React und andere notwendige Dateien
2. Wir definieren eine Funktion namens App
3. Diese Funktion gibt einige JSX (JavaScript XML) zurück - eine spezielle Syntax, die wie HTML aussieht, aber es uns ermöglicht, JavaScript darin zu verwenden
4. Schließlich exportieren wir die Komponente, damit sie woanders verwendet werden kann

Lassen Sie uns diese Komponente anpassen, um sie zu unserer zu machen:

import React from 'react';
import './App.css';

function App() {
return (
<div className="App">
<h1>Willkommen in meiner ersten React-App!</h1>
<p$Ich freue mich darauf, React zu lernen!</p>
</div>
);
}

export default App;

Speichern Sie die Datei und überprüfen Sie Ihren Browser - er sollte automatisch aktualisiert werden!

Interaktivität hinzufügen mit Zustand

Nun machen wir unsere App ein bisschen interaktiver, indem wir eine Schaltfläche hinzufügen, die zählt, wie oft sie geklickt wurde.

Ersetzen Sie den Inhalt von App.js durch folgendes:

import React, { useState } from 'react';
import './App.css';

function App() {
const [count, setCount] = useState(0);

function handleClick() {
setCount(count + 1);
}

return (
<div className="App">
<h1>Willkommen in meiner ersten React-App!</h1>
<p$Ich freue mich darauf, React zu lernen!</p>
<button onClick={handleClick}>
Du hast mich {count} Mal geklickt
</button>
</div>
);
}

export default App;

Lassen Sie uns das auseinandernehmen:

1. Wir importieren useState, ein React-Hook, das es uns ermöglicht, Zustand zu unserer Komponente hinzuzufügen
2. Wir verwenden useState(0) um eine Zustandsvariable count und eine Funktion setCount zu erstellen, um sie zu aktualisieren
3. Wir definieren eine handleClick-Funktion, die den Zähler erhöht
4. In unserem JSX fügen wir eine Schaltfläche hinzu, die den Zähler anzeigt und handleClick aufruft, wenn sie geklickt wird

Speichern und überprüfen Sie Ihren Browser - Sie sollten jetzt eine funktionierende Schaltfläche haben, die Ihre Klicks zählt!

Erstellen einer neuen Komponente

Wenn unsere App wächst, möchten wir sie in kleinere, wiederverwendbare Komponenten aufteilen. Lassen Sie uns eine neue Komponente für unseren Zähler erstellen.

Erstellen Sie eine neue Datei src/Counter.js und fügen Sie folgenden Code hinzu:

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

function handleClick() {
setCount(count + 1);
}

return (
<div>
<button onClick={handleClick}>
Du hast mich {count} Mal geklickt
</button>
</div>
);
}

export default Counter;

Nun verwenden wir diese neue Komponente in unserem App.js:

import React from 'react';
import './App.css';
import Counter from './Counter';

function App() {
return (
<div className="App">
<h1>Willkommen in meiner ersten React-App!</h1>
<p$Ich freue mich darauf, React zu lernen!</p>
<Counter />
<Counter />
</div>
);
}

export default App;

Schauen Sie sich das an! Wir haben jetzt zwei unabhängige Zähler auf unserer Seite.

Fazit

Glückwunsch! Sie haben gerade Ihre erste React-App erstellt, haben sich mit Komponenten, Zustand und selbst mit der Erstellung einer wiederverwendbaren Komponente vertraut gemacht. Dies ist erst der Anfang Ihrer React-Reise, aber Sie sind bereits weit gekommen.

Denken Sie daran, dass das Lernen zu programmieren wie das Lernen einer neuen Sprache ist - es erfordert Übung und Geduld. Lassen Sie sich nicht entmutigen, wenn etwas nicht sofort klar wird. Halten Sie experimentierfreudig, bauen Sie weiter und vor allem: haben Sie Spaß dabei!

In unserer nächsten Lektion tauchen wir tiefer in React-Props, komplexere Zustandsverwaltung und beginnen mit der Erstellung einersubstanzielleren Anwendung. Bis dahin, viel Spaß beim Programmieren!

Credits: Image by storyset