ReactJS ist eine JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen. Sie wird von Facebook entwickelt und ist eine der beliebtesten Bibliotheken für die Frontend-Entwicklung. Wenn du dich mit HTML, CSS und JavaScript auskennst, solltest du in der Lage sein, ReactJS relativ schnell zu erlernen.
Bevor wir starten, stellen sicher, dass du NodeJS und NPM (Node Package Manager) installiert hast. Du kannst diese auf der offiziellen NodeJS-Website herunterladen: https://nodejs.org/en/download/.
Sobald NodeJS und NPM installiert sind, kannst du mit der Installation von ReactJS beginnen.
Du bist eher so der Video Typ?
Hier findest Du unsere Auswahl an React.JS Onlinekursen, die wir für dich bereitgestellt haben.
Schritt 1: Erstellen des React-Projekts
Das Erstellen eines neuen React-Projekts ist einfach. Öffne deinen Terminal oder deine Befehlszeile und führe den folgenden Befehl aus:
npx create-react-app my-app
Dieser Befehl erstellt ein neues React-Projekt namens “my-app”. Es wird auch alle erforderlichen Dateien und Abhängigkeiten installieren, die du benötigst, um mit der Entwicklung von ReactJS zu beginnen.
Schritt 2: Starten des Projekts
Sobald das Projekt erstellt wurde, navigiere in das Verzeichnis des Projekts:
cd my-app
Führe dann den folgenden Befehl aus, um das Projekt zu starten:
npm start
Dieser Befehl startet einen lokalen Server und öffnet deinen Browser, um das React-Projekt zu sehen.
Schritt 3: Öffnen des Projekts in deiner IDE
Eine IDE (Integrated Development Environment) ist die Anwendung, in der Du den Quellcode bearbeitest.
Die beliebtesten sind zB. WebStorm von Jetbrains (€) oder Visual Studio Code von Microsoft (kostenfrei).
Schritt 4: Erste Veränderungen deiner React-Komponente
ReactJS ist eine komponentenbasierte Bibliothek. Eine Komponente ist eine wiederverwendbare Einheit, die eine bestimmte Funktion erfüllt. Jede Komponente hat eine bestimmte Struktur und Funktion, die von anderen Komponenten wiederverwendet werden können.
Öffne die Datei “App.js” im “src” -Verzeichnis des React-Projekts. Diese Datei enthält bereits eine Komponente.
Die App-Komponente sieht wie folgt aus:
function App() {
return (
<div className="App">
<h1>Hello, World!</h1>
</div>
);
}
export default App;
Die App-Komponente ist eine Funktion, die JSX (JavaScript-XML) zurückgibt. JSX ist eine Erweiterung von JavaScript, die es uns ermöglicht, HTML-ähnlichen Code in JavaScript-Dateien zu schreiben.
In der App-Komponente wird eine div-Element mit einer class-Attribute “App” erstellt. Innerhalb dieses div-Elements befindet sich ein h1-Element mit dem Text “Hello, World!”.
Schritt 5: Erstellen von eigenen Komponenten
Du kannst deine eigenen Komponenten erstellen, indem du eine neue Funktion mit einem beliebigen Namen erstellst. Diese Funktion gibt JSX zurück, genau wie die App-Komponente.
Erstelle eine neue Datei “MyComponent.js” im “src” -Verzeichnis des React-Projekts. Füge dann den folgenden Code ein:
function MyComponent() {
return (
<div>
<h2>Ich bin eine neue Komponente</h2>
</div>
);
}
export default App;
Schritt 6: Verwenden der Komponente
Nachdem Du eine Komponente erstellt hast, kannst Du sie in deiner Anwendung verwenden, indem Du sie in einer anderen Komponente oder in Ihrer Hauptanwendung einbettest. React.JS ist prinzipiell so aufgebaut, dass die Anwendung selbst in der App.JS liegt (Hauptanwendung) und sich alles weitere hierarchisch nach unten verzweigt. Also wenn Du in deiner App.JS dafür sorgst, dass die Seitennavigation, der Inhalt und die Fußzeile angezeigt werden sollen, dann ist in der Navi.js Komponente, die in der App.js eingesetzt wird, weitere Unterkomponenten verwendet werden. Diese könnten dann sein NavigationList.js oder NavigationLogo.js. Das Verwenden dieser neuen Komponente ist denkbar einfach.
Um nun die MyComponent Komponente zu verwenden, füge <MyComponent /> in der App.js an der Stelle ein, wo Du dich mit “Ich bin eine neue Komponente” begrüßen lassen möchtest und vergiss nicht, die Datei mit import "MyComponent" from "./MyComponent.js" zu importieren.
Zusammenfassung
Jetzt bist Du die erfolgreich die ersten Schritte gegangen, um tiefer in React einzusteigen, hast ein Testprojekt aufgesetzt und dich durch die ersten Dateien geklickt.
Am Besten eignet sich hier ein echtes Mini-Projekt, zum Beispiel klassischerweise eine Todo-Listen App oder auch ein Herzensprojekt, das schon lange bei dir im “Schrank” schlummert oder Du absolvierst meinen React.JS Onlinekurs, der dich Schritt für Schritt an die Hand nimmt und dich anhand eines Beispielprojekts über React Core, eigenen Komponenten usw. an React.JS heranführt.
