ReactJS_Workshop.pdf

Transcript

1. ReactJS course Juan Roa @jroadev
2. Who am I? • Frontend developer at Pulpo WMS • Ruby on Rails developer • Blockchain & Bitcoin enthusiast • CO-Organizer at Cali Ruby • CO-Organizer and Coach at Rails Girls Cali • ReactJS Coach at DevHack • Caleño, Biker.
3. What are we going to learn ? • ES6 features • What React is. • What are components (stateless, stateful). • Props and state • Best practices / functional programming in React • Immutability / avoid side effects • Create simple components with state
4. Ecmascript 2015 features • Arrow functions • Classes • Template strings • Destructuring • Default / spread • Let / Const • Imports
5. Immutability / A more functional approach • Object.assign • Spread operator • Prototype.map • Concat • Don’t modify data structures, return always a new copy or value!
6. Showcase
7. Virtual DOM reconciliation / state change
8. Virtual DOM re-render
9. Props and State Props: • External data • Can’t change it State: • Internal data • Can change it • Private for component