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…
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…
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…
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…
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…
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…
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…
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…
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…
Vi pratade inledande lite mer kring CORS och hur man kan konfigurera det till att släppa igenom bara vissa domäner istället för alla. Sen gick vi igenom workshop:en från i torsdags och skapade en React-app som konsumerade vårt API, lade in router och annat gott. Efter lunch pratade vi om Läs mer…
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…
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…
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…
Vi fortsatte med introduktionen av React och repeterade fredagen lite kort för att sedan gå över till State, Events och hur man kan ändra State med hjälp av setState()-metoden. Workshop Starta med att en helt ny, tom React-app som du skapar med npx create-react-app. Dagens övning består av allas favorit-uppgift Läs mer…