Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Organisation der Projektordnerstruktur | Strukturierung von React-Projekten für den Praxiseinsatz
React Mastery

bookOrganisation der Projektordnerstruktur

Schritt 3: Erstellen des Projektordners

Nachdem alle notwendigen externen Tools vorhanden sind, kann mit der Erstellung des Projekts begonnen werden. Die Aufgabe besteht darin, einen neuen, leeren Ordner speziell für das Projekt anzulegen, in dem nichts anderes gespeichert wird.

Folgende Schritte sind zu beachten:

  1. Ort wählen: Einen Speicherort auf dem eigenen Rechner auswählen, an dem der Projektordner erstellt werden soll. Dies kann beispielsweise der Desktop oder ein bestimmtes Verzeichnis sein;
  2. Neuen Ordner erstellen: Im gewählten Verzeichnis mit der rechten Maustaste klicken und im Kontextmenü "Neuer Ordner" auswählen;
  3. Ordner benennen: Dem Ordner einen aussagekräftigen Namen geben. Dieser dient als Root-Ordner für das React-Projekt, daher sollte ein informativer und relevanter Name gewählt werden, der dem Zweck des Projekts entspricht. Zum Beispiel kann der Ordner movies-app, store-app, posts-app, learning-system-app usw. heißen.

Zum Beispiel wird der leere Ordner mit dem Namen movies-app erstellt.

Schritt 4: Öffnen des Ordners im Code-Editor

Um mit der Arbeit am Projekt zu beginnen, muss der Ordner movies-app im Code-Editor geöffnet werden, unabhängig davon, ob Visual Studio Code oder ein anderer Editor verwendet wird.

Folgende Schritte ausführen:

  • Den Code-Editor starten. Im Beispiel wird Visual Studio Code (VS Code) verwendet;
  • Auf das Explorer-Symbol in der oberen linken Ecke der VS Code-Oberfläche klicken;
  • Klicken Sie auf die Schaltfläche "Ordner öffnen" im Explorer-Bereich;
  • Suchen Sie den Ordner movies-app auf dem Rechner und wählen Sie ihn aus. Nach Abschluss dieser Schritte sollte der Ordnername movies-app in der Benutzeroberfläche Ihres Code-Editors angezeigt werden.

Nachdem Ihr Projektordner eingerichtet und im Code-Editor geöffnet wurde, können Sie mit dem Aufbau Ihrer React-Anwendung beginnen!

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 3

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you explain what the next step is after opening the project folder?

What should I do if I want to use a different code editor?

Can you give tips on naming my project folder?

Awesome!

Completion rate improved to 2.17

bookOrganisation der Projektordnerstruktur

Swipe um das Menü anzuzeigen

Schritt 3: Erstellen des Projektordners

Nachdem alle notwendigen externen Tools vorhanden sind, kann mit der Erstellung des Projekts begonnen werden. Die Aufgabe besteht darin, einen neuen, leeren Ordner speziell für das Projekt anzulegen, in dem nichts anderes gespeichert wird.

Folgende Schritte sind zu beachten:

  1. Ort wählen: Einen Speicherort auf dem eigenen Rechner auswählen, an dem der Projektordner erstellt werden soll. Dies kann beispielsweise der Desktop oder ein bestimmtes Verzeichnis sein;
  2. Neuen Ordner erstellen: Im gewählten Verzeichnis mit der rechten Maustaste klicken und im Kontextmenü "Neuer Ordner" auswählen;
  3. Ordner benennen: Dem Ordner einen aussagekräftigen Namen geben. Dieser dient als Root-Ordner für das React-Projekt, daher sollte ein informativer und relevanter Name gewählt werden, der dem Zweck des Projekts entspricht. Zum Beispiel kann der Ordner movies-app, store-app, posts-app, learning-system-app usw. heißen.

Zum Beispiel wird der leere Ordner mit dem Namen movies-app erstellt.

Schritt 4: Öffnen des Ordners im Code-Editor

Um mit der Arbeit am Projekt zu beginnen, muss der Ordner movies-app im Code-Editor geöffnet werden, unabhängig davon, ob Visual Studio Code oder ein anderer Editor verwendet wird.

Folgende Schritte ausführen:

  • Den Code-Editor starten. Im Beispiel wird Visual Studio Code (VS Code) verwendet;
  • Auf das Explorer-Symbol in der oberen linken Ecke der VS Code-Oberfläche klicken;
  • Klicken Sie auf die Schaltfläche "Ordner öffnen" im Explorer-Bereich;
  • Suchen Sie den Ordner movies-app auf dem Rechner und wählen Sie ihn aus. Nach Abschluss dieser Schritte sollte der Ordnername movies-app in der Benutzeroberfläche Ihres Code-Editors angezeigt werden.

Nachdem Ihr Projektordner eingerichtet und im Code-Editor geöffnet wurde, können Sie mit dem Aufbau Ihrer React-Anwendung beginnen!

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 3
some-alt