React for Developers
2 likes624 views
This document discusses React, a JavaScript library for building user interfaces. It begins with an overview of the React ecosystem and tools like NPM, module bundlers, ES6, and Flux. It then discusses key React concepts like components, JSX syntax, virtual DOM for efficient re-renders, unidirectional data flow, and state and props. Benefits of React mentioned include being fast, modular, state-based, independent and high performance due to the virtual DOM. The document also briefly introduces React Native for building native mobile apps.
React for Developers
- 2. Hello World! React for Developers #irDevConf ■ @sia_mac
- 3. ES6 The Sixth Edition, known as ECMAScript 2015. #irDevConf ■ @sia_mac
- 4. › How to tackle the React Ecosystem __ ¬ NPM ¬ JavaScript Module Bundlers ¬ ES6 ¬ ReactJS ¬ Routing ¬ Flux #irDevConf ■ @sia_mac
- 5. › AMD & CommonJS __ ¬ NPM: “Node Package Manager” ¬ Dependencies, Scripts. ¬ AMD (RequireJS) — AngularJS<2, jQuery, BackboneJS,… ¬ CommonJS — ES6. #irDevConf ■ @sia_mac
- 6. › CommonJS A format Writing Modules in Node.JS __ #irDevConf ■ @sia_mac index.js maths.js:
- 7. › CommonJS in Browser __ ¬ JavaScript Module Bundlers: ¬ Browserify (*ify) ¬ Webpack (*-loader) ¬ RollupJS #irDevConf ■ @sia_mac
- 8. Webpack JavaScript Module Bundler #irDevConf ■ @sia_mac
- 10. Webpack != Grunt/Gulp #irDevConf ■ @sia_mac
- 11. › Webpack vs. Grunt/Gulp Diagram __ Grunt/Gulp Diagram: #irDevConf ■ @sia_mac one.js two.js Concat Uglify ... grid.scss typography.scss Compile Minify ... Browser
- 12. › Webpack vs. Grunt/Gulp Diagram __ Webpack Diagram: #irDevConf ■ @sia_mac one.js two.js Concat Uglify ... grid.scss typography.scss Compile Minify ... BrowserBundle.js
- 13. › Webpack vs. Grunt/Gulp Diagram __ Grunt/Gulp Diagram: #irDevConf ■ @sia_mac one.js two.js Concat Uglify ... grid.scss typography.scss Compile Minify ... Browser
- 14. › How to tackle the React Ecosystem __ ¬ NPM ¬ JavaScript Module Bundlers ¬ ES6 ✔ “https://goo.gl/81ha0d” ¬ ReactJS ¬ Routing ¬ Flux #irDevConf ■ @sia_mac
- 15. React A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES #irDevConf ■ @sia_mac
- 16. › Facebook, Mother of dragons __ ¬ Started by Facebook in 2013. ¬ Motivation — Building Large apps with data. ¬ Over 45k+ Star on Github. ¬ Sites Using React: ¬ Facebook, Instagram, Dropbox, PayPal, Uber, … #irDevConf ■ @sia_mac
- 17. › Meet React __ #irDevConf ■ @sia_mac NOT Another Framework! Just a library for creating User Interfaces.
- 18. › Meet React __ #irDevConf ■ @sia_mac Renders your User Interfaces and responds to Events.
- 19. › Meet React __ #irDevConf ■ @sia_mac React just “V” in ‘MVC’ (View)
- 20. › Meet React __ #irDevConf ■ @sia_mac ¬ React Has … ¬ No Controllers. No Directives. ¬ No Templates. No Global EventListener. ¬ No Models. No View Models. ¬ No Dirty Checking.
- 21. › Meet React __ #irDevConf ■ @sia_mac Everything is a Component! Everything is a Component! Everything is a Component! Everything is a Component! Everything is a Component!
- 23. Main component:
- 24. Header CP
- 26. Header CP Sidebar CP Hero CP
- 27. › The Most important in Performance: __ #irDevConf ■ @sia_mac Virtual DOM
- 28. › Virtual DOM: __ ¬ Simple & Fast & Smart. ¬ On Every update: ¬ React builds a new virtual DOM subtree. ¬ Diffs it with the old One. ¬ Computes the minimal set of DOM mutations and puts them in a queue. ¬ Batch executes all updates. #irDevConf ■ @sia_mac
- 29. › JSX Allows you to write JS and XML Together: __ #irDevConf ■ @sia_mac React JSX is a Sugar–Syntax for JS!
- 30. › Traditional Data flows: __ ¬ No Framework: Any component can communicate with any other component. ¬ BackboneJS: Pub–Sub. ¬ AngularJS: 2–way binding and $digest loop. ¬ ReactJS: 1–way data flow: ¬ Data handed from Parent to Child “Props”. #irDevConf ■ @sia_mac
- 31. React vs. jQuery #irDevConf ■ @sia_mac
- 32. › Playground __ #irDevConf ■ @sia_mac I’ve achieved 0 Pokémon. Another Pokémon +
- 33. › Playground __ #irDevConf ■ @sia_mac I’ve achieved 1 Pokémon. Another Pokémon +
- 34. › Playground __ #irDevConf ■ @sia_mac I’ve achieved 2 Pokémons. Another Pokémon +
- 35. › Playground __ #irDevConf ■ @sia_mac I’ve achieved 2 Pokémons. Another Pokémon + Button Component
- 36. › Playground __ #irDevConf ■ @sia_mac I’ve achieved 2 Pokémons. Another Pokémon +
- 37. #irDevConf ■ @sia_mac init Button Component “jQuery” thumbsUp render cacheElements handleClick
- 38. #irDevConf ■ @sia_mac init Button Component “React” handleClick thumbsUp render cacheElements
- 39. › State & Props: __ ¬ Every Component has ‘state’ and ‘props’. ¬ ‘state’ is mutable and ‘props’ is immutable. ¬ Re-Render (Virtual DOM) the whole app once the `state` changes. #irDevConf ■ @sia_mac
- 40. › Why React? __ #irDevConf ■ @sia_mac ¬ Fast and Smart. ¬ Unidirectional data flow from parent components to child components. ¬ Isomorphic (JS apps that can run both client-side and server-side) ¬ Easy to debug & testable. ¬ Use JSX with familiar HTML like syntax for writing react apps.
- 41. › Benefits of React? __ #irDevConf ■ @sia_mac ¬ Modular (Reusable) ¬ State–Based (Predictable) ¬ Independent (Testable) ¬ High-Performance (Virtual DOM)
- 44. One more thing… #irDevConf ■ @sia_mac
- 45. React Native A framework for building native apps using React. #irDevConf ■ @sia_mac
- 46. Thursday, Jul 21. 16:30 — 17:30. “Public Workshop” #irDevConf ■ @sia_mac