React JS + ES6
- 1. Introduzione a React.js + ES6 LinuxDay Napoli 22 ottobre 2016 - Davide Cerbo
- 2. Davide Davide Cerbo 10+ anni di esperienza Full stack (o quasi) DevDay Napoli co-founder Faccio codice, vedo gente
- 4. Cosa è React? React è una libreria per la UI, in MVC è la V
- 5. +
- 7. Disclaimer Questa presentazione non contiene tutto lo scibile su REACT e ES6, ma solo quello che ritengo sia utile per iniziare.
- 9. Introduzione a ES6 ● Arrows ● Classes ● Modules
- 10. Arrows ● var f = (a,b) => a + b; // f(1,2) = 3 ● [“a”, ”b”, “c”].map(v => v.toUpperCase()); // [“A”, “B”, “C”] ● Lexical this
- 11. Classes
- 12. Modules
- 13. Ed ancora... ● Promises ● Text template ● Destructuring ● etc… https://github.com/lukehoban/es6features
- 15. Sbam!
- 17. 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.
- 19. 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
- 20. One-way data binding <ComponentA /> <ComponentB /> <ComponentC /> <ComponentB />
- 21. Hello Component!
- 22. Demo
- 23. Demo https://github.com/gesposito/bare-webpack unzip bare-webpack-master.zip cd bare-webpack-master npm install npm run dev http://localhost:3000
- 24. Demo con NWB https://github.com/insin/nwb npm install -g nwb nwb new react-app linuxday2016 && cd linuxday2016 npm start http://localhost:3000
- 25. Hello Component! (+ sorpresa)
- 26. REFS
- 27. Non è tutto
- 29. React Native
- 30. 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 ● Interface design with React.js @RomaJS https://www.youtube.com/watch?v=twi6h0H925c