React
Skyddad: JavaScript 1 – Tenta 3 – omtenta 2 (praktisk uppgift)
Det finns inget utdrag eftersom detta är ett skyddat inlägg.
React
JavaScript 2, dag 19-21 – Testing (hemstudier)
Den här veckan (vecka 53) har ni hemstudier i vad testning är och hur man skriver tester för JavaScript-kod och sedermera hur man skriver tester för React-komponenter. Ni ska när ni är klara ha en aning om vad TDD (Test-Driven Development) är för något, vad det används till och varför Läs mer…
React
JavaScript 2, dag 16 – Snapgram (Firebase Auth)
Efter förra veckans genomgång av Firebase Cloud Storage och repetition av Firebase Firestore så är målet den här veckan att knyta ihop Firebase Auth med de två, så att vi får en komplett app med inloggning, databas och lagring av uppladdade filer. Vi satte upp en ny React-app och installerade Läs mer…
React
JavaScript 2, dag 13 – Firebase Cloud Storage
Dagen mjukstartades med lite info om de fyra sista veckorna av kursen, och att vi de kommande två veckorna kommer att kolla på Cloud Storage via Firebase’s Cloud Storage. Vi satte upp en ny React-app och installerade firebase, react-bootstrap, bootstrap samt [email protected], sen skapade vi en ny Firebase-app i Firebase Läs mer…
React
JavaScript 2, dag 11 – React Query
Idag kollade vi på useMutation() som är en del av React Query och som på ett smidigt sätt låter oss skicka iväg data. Vi kikade även på QueryCache och invalidering av cache:ad data, och hur vi själva kan sätta vad för data som ska finnas i cache:n. Allt detta gjorde Läs mer…
React
JavaScript 2, dag 8 – React Query
Vi tittade på hur vi kunde lyfta ut konfigurationen av React Query till först en egen config-modul och därefter hur vi kan använda ReactQueryConfigProvider för att förse React Query med inställningar utan att behöva importera en config-modul varje gång vi ska använda useQuery. Därefter kollade vi på isError som är Läs mer…
React
JavaScript 2, dag 7 – React Query
Dagen inleddes med en snabb genomgång av React Router v6 följt av felsökning för jag missat att migrera <Link>-komponenterna när vi uppgraderade till v6-beta.0 i torsdags. Därefter skapade vi en ny React-app (03-query) med lite placeholders i statisk HTML, innan vi introducerade React Query och kollade på hur den kan Läs mer…
React
JavaScript 2, dag 6 – React Router v6
Vi ägnade större delen av förmiddagen åt att gå igenom workshopen från i tisdags, där vi bland annat installerade paketet use-url-search-params som gjorde att vi enklare kunde interagera med query-parametrar i vår URL istället för att manuellt behöva parse:a och uppdatera location.search. Precis innan lunch kollade vi på React Router Läs mer…
React
Skyddad: JavaScript 1 – Tenta 3 – omtenta (praktisk uppgift)
Det finns inget utdrag eftersom detta är ett skyddat inlägg.
React
JavaScript 2, dag 5 – React Router Hooks
Idag kollade vi på React Router v5.2 och de möjligheter den ger oss. Bland annat så kan vi med hjälp av fyra stycken Router-hooks använda funktions-komponenter och ändå hämta ut route-parametrar och interagera med både history och location-objekten. (Hooks fanns i React Router v5.1 som vi använde i JavaScript 1-kursen Läs mer…
React
JavaScript 2, dag 4 – React Hooks
Hela dagen ägnades åt att gå igenom Custom Hooks i mer detalj i och med workshop:en från i torsdags, och vi skrev både en useLocalStorage-hook och en useFetch-hook samt en tillhörande HackerNewsSearch-komponent som använde vår useFetch-hook. En bit in på eftermiddagen blev vi klara med genomgången av useFetch-hook:en och ni Läs mer…
React
JavaScript 2, dag 3 – React Hooks
Först gick vi igenom lösningsförslag på workshop:en från i tisdags där ni skulle skriva en funktions-komponent som hämtar ut vehicles från Star Wars API, och se om ni kunde få Previous/Next page att fungera vilket många hade lyckats med 🥳. Vi kikade även på steg 2 där man skulle kunna Läs mer…
React
JavaScript 2, dag 2 – React Hooks
Vi repeterade lite kort useState och useEffect på morgonen och därefter gick vi in på useMemo men jag fick inte den att fungera alls som jag tänkt mig, så om du ser detta i efterhand så kan du skippa video 2.2 och första hälften av 2.3. I video 2.4 så Läs mer…
React
JavaScript 2, dag 1 – React Hooks
Idag gick vi igenom useState på förmiddagen som är den första och enklaste i raden av React Hooks som vi ska kika på den här veckan. Eftermiddagen ägnades åt den spännande useEffect-hook:en som gör att vi kan (bland mycket annat) replikera componentDidMount, componentDidUpdate och componentWillUnmount lifecycle events från klass-komponenter. GitHub-repository Läs mer…
React
JavaScript 1 – Projektarbete i React
Ni ska skapa en enklare Quiz-app där man som besökare kan testa sina kunskaper i olika Quiz:es, och där man även kan logga in och skapa egna Quiz:es. Metodik Ni ska… jobba agilt enligt SCRUM tillsammans bryta ner User Stories till en Backlog inför varje Sprint utse en SCRUM-master som Läs mer…
React
Skyddad: JavaScript 1 – Tenta 3 (praktisk uppgift)
Det finns inget utdrag eftersom detta är ett skyddat inlägg.
React
JavaScript 1, dag 36 – React – Routing
Vi gick igenom lösningsförslag på måndagens workshop där ni skulle lägga till stöd för att toggle:a en TODO och sedermera även radera den. Efter det så lade vi in en spinner för att ge lite feedback till användaren något händer i bakgrunden (att en asynkron förfrågan är igång), och visar/döljer Läs mer…
React
JavaScript 1, dag 35 – React Basics – Intermediary Components and Firestore
Vi gjorde om TODO-appen till att använda TodoList som blir en s.k. Intermediary Component som skickar data mellan App och TodoItem. Sen gick vi igenom lösningsförslag på fredagens workshop, följt av lite tenta-snack och intro till att använda Firebase Firestore i React. <code> Add Firebase to React src/modules/firebase.js Länkar Firebase Läs mer…
React
JavaScript 1, dag 34 – React Basics – Container/Class Components vs UI Components, Forms, Life Cycle Methods and axios in React
Idag har vi gått igenom skillnaden mellan s.k. Container Components (även kallade Class Components) och UI Components. För en refresher se nedan skärmdump från avsnitt #15 om Stateless Components från Shauns video-serie om React: Därefter tittade vi på hur man kan hantera Forms i React och skapade en AddTodo-komponent som Läs mer…
React
JavaScript 1, dag 33 – React Basics – Looping and Communicating with parent Component
Vi repeterade Props, States och setState från tisdagen och gick igenom workshopen. Därefter gjorde vi en TodoItem-komponent och kollade vi på hur vi kunde loopa ut en sådan komponent för varje todo-objekt i en array. Slutligen skapade vi en handleTodoToggle metod i App-komponenten och skickade med den som en prop Läs mer…