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 själv höll reda på vad som stod i input-fältet med hjälp av state, samt satte upp en handleFormSubmit funktion för att hantera när användaren vill skapa en ny TODO.
Ni gjorde en kort övning där ni skulle försöka få kommunikationen upp till App-komponenten när formuläret skickas att fungera (se commit #3982482 för att hämta ut vår kod som övningen baserades på). Därefter gick vi igenom lösningsförslag och satte upp detta.
Efter lunch så kollade vi på Life Cycle Methods (se det interaktiva diagramet här), följt av att vi lade in axios och såg hur vi kunde nyttja det i React för att göra asynkrona requests till ett API.
Länkar
React Lifecycle Methods Diagram (interactive)
http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
JSON Placeholder API
https://jsonplaceholder.typicode.com/
Todos endpoint
https://jsonplaceholder.typicode.com/todos
Yes/No/WTF API
Workshop
Skapa en ny React-app där du har ett input-fält och en submit-knapp. Om ”frågan” i input-fältet slutar med ett frågetecken så anropar du Yes/No/WTF API:et ovan och skriver ut svaret i appen. Bonus om du även använder den animerade GIF som kommer tillbaka i svaret.
Om frågan i input-fältet inte slutar med ett frågetecken så ska istället ett meddelande visas om att ”Vänligen ställ en fråga” eller ”En fråga brukar innehålla ett frågetecken”, eller liknande text.
Lägga gärna in SASS och Bootstrap för att få lite bättre styling på det hela.