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?

1. /**
* React for designere
*/
Fredrik Jensen
Yggdrasil 2017

2. /**
* For deg som
*/
👔 Jobber i et prosjekt som utvikles med React
🤖 Ønsker å jobbe bedre med utviklere
🎉 Har lyst til å lære deg React

3. /**
* Fredrik Jensen
*/
Frontend-utvikler,
designer og UX-nerd
Fagleder Teknologi
@ Netlife Research

5. /**
* DISCLAIMER 1
* Det mest nerdete foredraget på Yggdrasil
*/

6. /**
* DISCLAIMER 2
* Det blir kode i dette foredraget
*/

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

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

15. === komponenter

21. For å forstå React, må vi også forstå

22. Utvikleren!

28. Men det er også ganske awesome!

30. /**
* Jo mer du kan om kode,
* jo bedre samarbeider du med utvikleren
*/

31. /**
* JUST FOR THE RECORD:
* Utviklere bør også lære seg mer om design!
*/

32. /**
* Hvordan tenker en utvikler?
*/

33. Hvilken farge
liker du?
4
12
Grønn
Rød
Stemme
komponent
Gi din stemme
Tittel
Brødtekst
Tittel
Knapp
Header

34. Hvilken farge
liker du?
4
12
Grønn
Rød
Gi din stemme
Data:
votes: {
green: 4,
red: 12,
}
Funksjoner:
function voteGreen() {
votes.green + 1,
}
function voteRed() {
votes.red + 1,
}

35. /**
* Nok prat.
* Nå lager vi greia!
*/

36. ygg17.surge.sh

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!

38. React for designers

39. Create React App <3

40. reactforbeginners.com

41. Lag denne på noen kvelder!

42. twitter.com/fredjens
https://medium.com/@fredjens
github.com/fredjens
/**
* Takk!
*/
function completedTalk() {
return true;
}