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 16.x (14.x und 12.16.x sollten aber auch funktionieren) und die 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:
- Visual Studio Code
- IntelliJ IDEA (Ultimate Edition, Evaluationsversion reicht aber)
- Webstorm (Evaluationsversion reicht)
Für Schulungen, die wir über Zoom machen: bitte den Zoom Client installieren (und nicht die Web-Version von Zoom verwenden). Du benötigst aber keinen Zoom-Account.

Optional: Browser Erweiterungen für React

Für das Arbeiten mit React empfehle ich, die React Developer Tools zu installieren. Es gibt sie für Chrome und Firefox

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 - und zwar 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) 😊

git clone https://github.com/nilshartmann/react-training

cd blog-example/backend-rest
npm install

cd blog-example/workspace
npm install

cd blog-example/workspace-typescript
npm install

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.

Im Browser (oder per curl, wget oder httpie) aufrufen: http://localhost:7000/posts
Dort sollte JSON Code zurückkommen

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.

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.

Das ist alles!

Bei Fragen oder Problemen melde dich gerne bei mir.