- Dieses Template dient als Basis für ein paar Aufgaben
- Im Template befindet sich bereits alles was man so braucht
- Als Beispiel wurde die https://api.chucknorris.io/ API angebunden, es wird immer ein zufälliger Witz geladen
- Installiere dir Github-Desktop
- Melde dich dort mit deinem Github-Account an
- Falls du noch keinen Account hast, kannst du dir einfach auf https://github.com/ einen erstellen
- Nun gehe auf https://github.com/innFactory/react-chuck-norris und unter dem grünen "Clone" Button findest du die Funktion "Open with Github Desktop". Alternativ kannst du das Repo auch direkt in Github Desktop oder mit Git clonen
- Gehe auf https://nodejs.org/en/download/ und installiere dir Nodejs
- Damit hast du den Packet-Manager NPM
- Lies dir durch, für was NPM so gut ist: https://docs.npmjs.com/about-npm
- Gehe mit dem Terminal in deinem Ordner, in dem du das Template gecloned hast z.B.
Documents/Github/react-chuck-norris - nun installiere zunächst die Dependencies mit:
npm install - danach kannst du das Webprojekt starten mit:
npm start
- nun kannst du unter http://localhost:3000 die WebApp anschauen
- müsste so aussehen, wie im Screenshot
- Geh auf den Link "Create an account" oder http://localhost:3000/signup
- Wenn du dort einen Account erstellst, wir im Hintergrund ein Benutzer zu dem hinterlegten Firebase Projekt hinzugefügt
- Du solltest dich nun anmelden können und auf die Home-Page gelangen:
- Nun schauen uns wir den SourceCode von der WebApp an
- Installiere dir hierfür VS-Code
- Öffne in VS-Code den geklonten Ordner /react-chuck-norris
- Öffne in dem Projekt, dass du in VSCode offen hast das File
pages/index.tsx - Ändere die Überschrift "Home" zu irgendwas anderem
- Nun müsstest du instant die Änderungen im Browser sehen
- Falls nicht, gehe in ein Terminal und führe in deinem Projektordner
npm startaus
- Beschäftige dich mit der Doku von React: https://reactjs.org/
- Du solltest danach folgendes wissen:
- Was ist JSX?
- Was ist eine StatefulComponent?
- Was sind Props?
- Was sind Hooks?
- natürlich kannst du neben der offiziellen Doku auch viele andere Quellen nutzen
- Material-UI ist ein Design von Google
- Dieses Design wurde von einem Typen namens Olivier Tassinari in React nach implementiert
- Dadurch können wir diese OpenSource Komponenten nutzen und müssen nicht jeden Button etc. neu erfinden, sondern können direkt auf etliche fertige und ziemlich schöne Komponenten zugreifen
- diese kann man sich hier anschauen: https://mui.com/material-ui
- Du kannst ruhig mal alle durchklicken, um ein Gefühl dafür zu bekommen
- Wir nutzen statt Javascript eine sehr ähnliche "Variante" und zwar Typescript
- Lies dir mal die erste Seite der Doku durch
- Du solltest nach einer (längeren) Recherche folgendes Wissen:
- Was ist eine typisierte Sprache?
- Welche typisierten Sprachen gibt es noch?
- Welche untypisierten Sprachen gibt es noch?
- Welche Vorteile hat Typescript?
- Wie sehr unterscheidet sich Typescript von Javascript?
- Kann ein Browser Typescript interpretieren? Bzw. kann Typescript direkt im Browser ausgeführt werden?
- Das Styling im Web basiert letztendlich immer auf CSS
- Was CSS ist kannst dir z.B. hier anschauen
- Mit der Material-UI Library kommen ein paar Erleichterungen mit, sodass man z.B. CSS direkt im Typescript-File schreiben kann: https://mui.com/styles/basics/
- Gehe in das File
404.tsx - Diese Seite wird immer angezeigt, falls die Route nicht existiert. z.B. wenn du http://localhost:3000/asdf aufrufst (wenn du angemeldet bist)
- Die Seite ist nicht besonders schick, darum würde ihr ein Redesign gut stehen
- Es gibt ein paar 404 Seiten, die den Benutzer auf eine "nettere" Art sagen, dass die Seite nicht gefunden wurde hier ein paar Beispiele:
- Wenn man im Template einen Witz gut findet, soll man ihn zu seinen Favoriten hinzufügen können
- Erstelle dazu eine neue Page, um dort die Liste anzuzeigen:
pages/favorites.tsx - Ziel: Liste anzeigen mit Favoriten
- Jede Component kann ihren eigenen State haben. Der State kann in Form von Props auch an den Kindern übergeben werden. Muss aber der State von einem Ast auf den nächsten wird diese Methode schnell aufwendig und unübersichtlich. Darum brauchen wir für manche Daten ein "globales Statemanagement"
- In diesen Template verwenden wir hierfür recoil
- Da gibt's ein gutes Video, indem die Funktionsweise erklärt wird: https://youtu.be/_ISAA_Jt9kI
- In dem Projekt ist hierfür ein Demo mit eingebaut. Du hast dich sicher schon gefragt für was die "Colors" sind. Unter Colors kannst du eine zufällige Farbe erstellen und sie mit "Add color to list" zur Tabelle hinzufügen. Im Hintergrund wird hierbei die Farbe zu einem Recoil-State-Atom hinzugefügt. Das findest du unter
src/randomColor/state/ - Auf den State selbst wird dann mit einem Hook (
const [colorList, setColorList] = useRecoilState(colorsState);) z.B. in der Komponentesrc/randomColor/components/RandomColorGenerator.tsxzugegriffen.
- Zu nächst brauchen wir noch einen Button, damit ein Joke favorisiert werden kann. Ähnlich wie bei den Colors kannst du neben den Button "New Joke" einfach noch einen Favoriten-Button hinzufügen
- Nun brauchen wir eine Liste mit Jokes als Favoriten im State
- Immer wenn man auf den Favoriten-Button auf der HomePage drückt, soll der entsprechende Witz zu dieser Liste hinzugefügt werden
- Die Liste wird dann in der
page/favorites.tsxgelesen und angezeigt - Dafür brauchen wir keinen Request in /api und damit auch keinen selector. Recoil-Atoms werden vollkommen ausreichen.
Neben Chucknorris Witzen wäre das Prinzip auch für Katzen Fotos cool. Dazu gibt es auch eine public API: https://cataas.com/cat mit folgendem Queryparameter bekommt man ein JSON zurück: https://cataas.com/cat?json=true
- Lege eine neue Seite in
/pagesan, die zufällige Katzenbilder laden kann - Unter
/srckannst du einen neuen Bereich anlegen, der dann alle nötigen Unterordner für diese fachliche Domäne zusammenhält. z.B./src/RandomCatPicin diesem Ordner soll es dann wie in den anderen auch z.B. den/componentsOrdner geben. - Im
/modelbrauchen wir einen DatentypCatPic, der das JSON von https://cataas.com/cat?json=true abbilden kann
- Auf der existierenden
favorites.tsxsoll es einen Tab (oder irgendwas ähnliches geben), damit man auch Katzenbilder-Favoriten sehen kann - Ähnlich wie in Challenge 4 brauchen wir hier auch wieder eine State Liste mit Katzenbildern
- Neben den Witzen von Chucknorris, wäre es ganz gut, wenn man auch eigene Witze über ein Textfeld eingeben könnte
- Diese können entweder gleich zu den Favoriten, oder auch in einen separaten State gespeichert werden
- Die eignen Witze können auch in der Favoriten-Liste angezeigt werden, sollen aber gekennzeichnet sein, bzw. sich durch z.b. ein Icon unterscheiden
- Firebase ist eine Teilmenge der Google-Cloud, extra aufbereitet um eine einfachere Cloudumgebung maßgeschneidert für App- und Webprojekte zu haben.
- Lies dich einfach mal ein, damit du eine Übersicht bekommt, was Firebase alles so kann: https://firebase.google.com/
- Anschließend kannst du dir ein Projekt erstellen
- Beim erstellen bekommst du die Credentials für das Web diese solltest du dir kopieren, die brauchen wir später (sind aber auch in den Projekteinstellungen einsehbar)
- Unter "Authentication" kannst du die Authentifizierung mit Email/Password aktivieren
- Unter
src/firebasewerden die Firebase Parameter über Environment Variablen geladen. Diese Variablen kannst du in.env.teständern. Falls du bei dir ein.env.localhast, ändere auch hier die Variablen auf dein neues Projekt. - In der
.firebasercmusst du noch die Projekt-Id tauschen - Das Ergebnis sollte sein, dass wenn du das Projekt wieder startest und einen neuen Chuck-Norris-Account erstellt, dass dieser dann unter "Authentication" in deinem Firebase-Projekt erscheint