Für dein Laptop/PC
Auf deinem Laptop/PC sollte installiert sein:
- Git (zum installieren des Workspaces)
- NodeJS LTS version, aktuell 18.x (vielleicht gehen auch vorherige Versionen, wenn die Installation unten klappt, dann ist alles gut) 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
- Webstorm (Evaluationsversion reicht)
- IntelliJ IDEA (Ultimate Edition, Evaluationsversion reicht aber)
- 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/Edge und Firefox. Für den Workshop sind die Developer Tools nicht notwendig.
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.
- Bitte stelle sicher, dass das Installieren von npm-Paketen und das Klonen von Git-Repositories auch während der Schulung funktioniert
- Dazu kontrollieren, dass keine Proxy, VPN- oder Firewall- oder andere Einstellungen den Zugang zu Git und npm verhindern.
- Informationen zum Einrichten eines Proxies für npm findest Du bei Bedarf zum Beispiel hier.
- Lass während des Trainings deine Kamera an!. Ich kann sonst nur schwer einschätzen, ob ich euch langweile oder euch vielleicht abgehängt habe. Und wir sind ja nicht im Radio 😉
- Dein Mikrofon brauchst Du 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) 😊
Damit wir sicher sind, dass während des Workshops alles funktioniert, möchte ich dich bitten, im Vorweg schon einmal die folgenden Schritte durchzuführen, auch wenn es während des Workshops möglicherweise noch ein Update gibt (deswegen bitte sicherstellen, dass git und npm auch während des Workshops funktionieren).
- Das Repository klonen:
git clone https://github.com/nilshartmann/react18-training
- 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
- 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.
- Backend testen
- Im Browser (oder per curl, wget oder httpie) aufrufen: http://localhost:7000/posts
- Dort sollte JSON Code zurückkommen
- 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.
- 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.