React e ES6 si sono dimostrati una accoppiata vincente ma come funzionano? E non ci dimentichiamo i test automatici!

1. From 0 to React
with ES6 and Tests
JavaSpritz - Napoli 4 luglio 2017 - Davide Cerbo

2. Davide
Davide Cerbo
10+ anni di esperienza
Full stack
DevDay co-founder
Faccio codice, vedo gente

3. DevDay Napoli

5. Cosa è React?
React è una libreria per la UI,
in MVC è la V

6. +

7. Angular o React?

10. Disclaimer
Questa presentazione non contiene tutto lo
scibile su REACT e ES6, ma solo quello che
ritengo sia utile per iniziare.

11. Ancora meglio!

12. Introduzione a ES6
● Arrows
● Classes
● Modules

13. Arrows
● var f = (a,b) => a + b; // f(1,2) = 3
● [“a”, ”b”, “c”].map(v => v.toUpperCase()); // [“A”, “B”, “C”]
● Lexical this

14. Classes

15. Modules

16. Ed ancora...
● Promises
● Text template
● Destructuring
● etc…
https://github.com/lukehoban/es6features

18. Components
<ComponentA />
<ComponentB />
<ComponentC />
<ComponentB />

19. One-way data binding
<ComponentA />
<ComponentB />
<ComponentC />
<ComponentB />

20. Non è HTML, ma è JSX
<div className=”box” style={ {backgroundColor: ”red”} }>
{variabileAPiacere}
</div>

21. Virtual DOM
● React utilizza una rappresentazione virtuale
del DOM
● Usa un algoritmo di differenza tra alberi ed
una euristica O(n^3) => O(n)
● Questo garantisce elevate prestazioni

22. State & props
Le proprietà sono opzioni del
componente che vengono passate dal
padre al figlio e sono immutabili
Lo stato rappresenta la situazione
attuale dell’oggeto ed è mutabile.

23. setState
this.setState({counter: this.state.counter + props.step});
OPPURE
this.setState((prevState, props) => {
return {counter: prevState.counter + props.step};
});

24. E mo’,
Sporchiamoci
le mani

25. Demo con NWB
https://github.com/insin/nwb
npm install -g nwb
nwb new react-app spritzapp && cd spritzapp
npm start
http://localhost:3000

26. Solo la chiamata al
setState causa
l’aggiornamento
In base allo stato
cambia la
visualizzazione
Componente
personalizzato

27. Arrow function
Performance
cattive :(

28. Arrow function
https://medium.freecodecamp.org/react-pattern-extract-child-components-to-avoid-binding-e3ad8310725e
Performance
migliori :)

30. React stateless functional components
https://hackernoon.com/react-stateless-functional-components-nine-wins-you-
might-have-overlooked-997b0d933dbc

31. Testing
● Mocha: Test framework
● Chai: Assertion
● Karma: Test Runner
● Sinon: Spy

33. Link e risorse
● https://egghead.io/series/react-flux-architecture
● https://facebook.github.io/react/
● https://www.youtube.com/watch?v=bEI06xF_xxE (Video in italiano)
● https://www.youtube.com/watch?v=-A90OnLeWfA (Video in italiano)
● https://www.youtube.com/watch?v=ET0KWjoRMao (Video in italiano)
● https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6
● https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207
● React Native Framework https://getexponent.com/
● React Native “unofficial” blog http://reactnative.com/
● Webpack @RomaJS https://www.youtube.com/watch?v=mkcyvJNBPUk
● https://bogdan-lyashenko.github.io/Under-the-hood-ReactJS/
● Interface design with React.js @RomaJS https://www.youtube.com/watch?v=twi6h0H925c

34. Una vera applicazione?
Guardate qui:
https://github.com/gothinkster/react-redux-realworld-example-app

35. Grazie a tutti
@davide_cerbo
davidecerbo@gmail.com