Hva er egentlig React og hvordan brukes det i praksis? Hvordan kan jeg som designer dra nytte av prinsippene og kanskje til og med lære seg React selv?
7. /**
* Mål
*/
❓ Du skal forstå hva React er
🙀 Forstå hva som skjer i JavaScript verdenen
🙇 Forstå utvikleren litt bedre
👀 Se React i praksis
8. /**
* Hva er JavaScript?
*/
Fra til komplekse webapplikasjoner
9. * Laget og vedlikeholdes av Facebook
* Lansert 2011
* Et JavaScript rammeverk for å bygge grensesnitt
* Både nettsider og apper
* Et av de meste brukte rammeverkene i 2017
10.
11.
12. Instruere programmet i
detalj hva som skal til
for oppnå noe.
Beskrive det du vil at
programmet skal gjøre.
Imperativt Deklarativt
13. * Finne kaffetrakteren
* Hell på vann i kaffebeholderen
* Åpne posen med kaffe
* Sett inn filteret
* Hell kaffe i filteret
* Skru på strømmen
* Skru på trakteren
* Vente til kaffen er ferdig
* Finn frem en kopp
* Hell kaffe i koppen
Imperativ kode
Lage en kopp kaffe.
* Lag en kopp kaffe!
Deklarativ kode
14. function completedTodos(todos) {
var completedTodos = [];
for (var i = 0; i < todos.length; i++) {
if (todos[i].completed) {
if (completedTodos.length < 11) {
todos[i].image = './path/image.jpg';
completedTodos.push(todos[i]);
}
}
}
return completedTodos;
};
Imperativ kode
Legge til et bilde på de 10 første completed todo’s
import flow from 'lodash/flow';
const addImageToFirstTenCompletedTodos = flow(
completedTodos,
firstTenTodos,
addImageToTodos,
)(todos);
Deklarativ kode
37. /**
* Oppsummert
*/
❓ Du vet litt mer om React
🙋 Du har litt mer sympati for utvikleren
📦 Har sett hvordan komponenter funker i prakis
🦄 Kanskje blitt inspirert til å kode selv!