Für dein Laptop/PC
Auf deinem Laptop/PC sollte installiert sein:
- Git (zum installieren des Workspaces)
- NodeJS Version 16.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
- 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. 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 - 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.
- Bitte schalte während des Trainings deine Kamera an, 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) 😊
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/backend-graphql
npm install
cd blog-example/workspace
npm install
cd blog-example/workspace-typescript
npm install
cd blog-example/workspace-graphql
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.
- REST 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.