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…
Vi gick igenom hur man kan angripa en problemställning genom att bryta ner vår för Guess My Number’s ”roadmap” till olika steg vi behöver göra för att uppnå varje mål i roadmap:en. Man kan så klart lika väl använda sig av punktlistor, där man börjar på en hög nivå och Läs mer…
Vi gick lite kort igenom att funktioner kan ha ”default values”. Därefter stegade vi igenom en funktion rad för rad för att se vad alla variabler har för värde och vad som händer i varje steg. GitHub repository https://github.com/drblue/fed19-javascript-1/tree/lesson-9 Workshop Nu när ni är bekanta med funktioner och att hämta/skriva Läs mer…
Vi gick igenom lösningsförslag på gårdagens lilla workshop och därefter började vi bygga på vår lilla miniräknar-app. GitHub repository https://github.com/drblue/fed19-javascript-1/tree/lesson-8 Länkar MDN Form Events https://developer.mozilla.org/en-US/docs/Web/Events#Form_events Workshop Ta den lilla miniräknare vi gjort idag och lägg in stöd för fler räknesätt än addition. Gör det i form av en knapp per Läs mer…
Vi gick igenom Document Object Model (DOM) createElement() remove() append() prepend() Events Event Bubbling LocalStorage Checking for support getItem() setItem() JSON JavaScript Object Notation JSON.stringify() JSON.parse() GitHub repository https://github.com/drblue/fed19-javascript-1/tree/lesson-7 Länkar LocalStorage HTML5 Web Storage https://www.w3schools.com/html/html5_webstorage.asp Window.localStorage https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage JSON JSON.stringify() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify JSON.parse() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse Workshop Dagens lilla övning: Se om ni kan Läs mer…