Skip to content
Permalink
master
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time

Vorbereitungen für die React Online Schulung

Voraussetzungen

Für dein Laptop/PC

Auf deinem Laptop/PC sollte installiert sein:

  • Git (zum installieren des Workspaces)
  • NodeJS LTS version, aktuell 14.6 (12.16.x sollte auch funktionieren) und darin enthaltene npm Version
  • Browser (am besten Firefox oder Chrome)
  • Eine IDE oder ein Texteditor. Wenn Du bereits einen "Lieblingseditor" verwendest, benutze diesen während des Trainings, damit Du nicht auch noch ein neues Tool lernen musst. Ansonsten funktionieren folgende Tools zum Beispiel:

Optional: Browser Erweiterungen für React

Während des Trainings

  • Da wir vor und während des Trainings ggf. noch Aktualisierungen installieren müssen, bitte sicherstellen, dass auch während des Trainings auf deinem Computer der Internet-Zugang (logisch, online-Schulung 🙃) funktioniert - aber auch für git und npm (Proxies beachten!)
    • Informationen zum Einrichten eines Proxies für npm findest Du bei Bedarf zum Beispiel hier.
  • Ich freue mich, wenn Du während des Trainings deine Kamera an hast, damit wir uns sehen können 🎥. Mikrofon hingegen bitte nur anmachen, wenn Du etwas sagen oder fragen möchtest (was Du natürlich jederzeit darfst!)
  • W-LAN ist bequem, aber gerade bei (langen) Streamings ist ein Kabel-gebundenes Netzwerk stabiler als W-LAN, also im Zweifel lieber das Kabel einstecken (und W-LAN deaktivieren) 😊

Installation und Vorbereitung des Workspaces für die Schulung

Schritt 1: Repository klonen und Pakete installieren

  1. Das Repository klonen:
git clone https://github.com/nilshartmann/react-training
  1. Testweise die benötigten npm-Pakete installieren:
cd blog-example/backend-rest
npm install

cd blog-example/workspace
npm install

cd blog-example/workspace-typescript
npm install

Schritt 2: Testen, ob REST-Backend funktioniert

  1. Im Verzeichnis blog-example/backend-rest des Repositories das Backend starten:
cd blog-example/backend-rest
npm start

Achtung! Das Backend läuft auf Port 7000, d.h. dieser Port muss verfügbar sein.

  1. Backend testen

Schritt 3: Testen, ob das Frontend funktioniert

  1. Frontend (Beispiel-Anwendung) starten

Dazu in das Verzeichnis blog-example/workspace wechseln und npm start ausführen:

cd blog-example/workspace

npm start

Achtung! Das Frontend läuft auf Port 3000, d.h. dieser Port muss verfügbar sein.

  1. Wenn das Frontend gestartet ist, zum testen einmal die Anwendung im Browser aufrufen: http://localhost:3000. Dort sollte "Hello, World" erscheinen, dann ist der Workspace einsatzbereit.

Running frontend

Öffnen des Workspaces in deinem Editor/deiner IDE

Um die Übungen zu machen, solltest Du nur das Verzeichnis blog-example/workspace in deinem Lieblingseditor oder deiner Lieblings-IDE öffnen. Bitte öffne nicht den kompletten Workspace.

Du kannst dieses Verzeichnis (blog-example/workspace) bereits zu Beginn der Schulung öffnen. Wie die Übungen dann ablaufen, erkläre ich natürlich im Laufe der Schulung.

Bei Fragen oder Problemen melde dich bitte bei mir.