Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[DevDay 2017] ReactJS Hands on - Speaker: Binh Phan - Developer at mgm technology partners

158 views

Published on

A short description on ReactJS for absolute beginners. The presentation will walk you through why we should use React to develop web applications, as well as a live coding session where you can see it in action.

Published in: Technology
  • Be the first to comment

[DevDay 2017] ReactJS Hands on - Speaker: Binh Phan - Developer at mgm technology partners

  1. 1. Binh.Phan@mgm-tp.com 7 Pasteur, Hai Chau, Da Nang • Java backend • Frontend • Operations • Administrator • Trainings
  2. 2. We build software • Web & mobile • Large enterprise customers in Germany
  3. 3. We build software • Web & mobile • Large enterprise customers in Germany We use state of the art technologies • JEE, Spring, Hibernate • Angular, REACT • Postgres, Oracle
  4. 4. We build software • Web & mobile • Large enterprise customers in Germany We use state of the art technologies • JEE, Spring, Hibernate • Angular, REACT • Postgres, Oracle
  5. 5. React
  6. 6. React
  7. 7. “A JavaScript library for building user interfaces” React
  8. 8. • Library for building UI • Full power of JS • Fast, reasonable 1 way data binding • Excellent dev tool support • Easy to mix into current code base React
  9. 9. Who is using React?
  10. 10. React philosophy
  11. 11. • Declarative React philosophy
  12. 12. • Declarative • Component-Based React philosophy
  13. 13. • Declarative • Component-Based • Learn Once, Write Anywhere React philosophy
  14. 14. Declarative I want a dinner with 🍗 Imperative • Go to kitchen • Open fridge • Take 🍗 from fridge • … • Bring food to table
  15. 15. Component- Based
  16. 16. Component- Based
  17. 17. Learn Once, Write Anywhere
  18. 18. Learn Once, Write Anywhere
  19. 19. Learn Once, Write Anywhere
  20. 20. Learn Once, Write Anywhere
  21. 21. Learn Once, Write Anywhere
  22. 22. Learn Once, Write Anywhere
  23. 23. React Dataflow
  24. 24. Virtual DOM
  25. 25. Virtual DOM Re-render everything on every update:
  26. 26. Virtual DOM Re-render everything on every update: 1. Create lightweight description of UI component
  27. 27. Virtual DOM Re-render everything on every update: 1. Create lightweight description of UI component 2. Diff it with the old one
  28. 28. Virtual DOM Re-render everything on every update: 1. Create lightweight description of UI component 2. Diff it with the old one 3. Compute minimal set of changes to apply
  29. 29. Virtual DOM Re-render everything on every update: 1. Create lightweight description of UI component 2. Diff it with the old one 3. Compute minimal set of changes to apply 4. Batch execute all updates
  30. 30. JSX
  31. 31. Editor support
  32. 32. Where to go next?
  33. 33. Where to go next? • Sample at: https://github.com/binhpv/DevDay2017-React
  34. 34. Where to go next? • Sample at: https://github.com/binhpv/DevDay2017-React • ES6
  35. 35. Where to go next? • Sample at: https://github.com/binhpv/DevDay2017-React • ES6 • Tooling: npm, yarn, webpack, create-react-app
  36. 36. Where to go next? • Sample at: https://github.com/binhpv/DevDay2017-React • ES6 • Tooling: npm, yarn, webpack, create-react-app • Routing with react-router
  37. 37. Where to go next? • Sample at: https://github.com/binhpv/DevDay2017-React • ES6 • Tooling: npm, yarn, webpack, create-react-app • Routing with react-router • Manage state with redux, flux, mobx
  38. 38. Where to go next? • Sample at: https://github.com/binhpv/DevDay2017-React • ES6 • Tooling: npm, yarn, webpack, create-react-app • Routing with react-router • Manage state with redux, flux, mobx • Deploy to a production server
  39. 39. Where to go next? • Sample at: https://github.com/binhpv/DevDay2017-React • ES6 • Tooling: npm, yarn, webpack, create-react-app • Routing with react-router • Manage state with redux, flux, mobx • Deploy to a production server • Server side rendering
  40. 40. Where to go next? • Sample at: https://github.com/binhpv/DevDay2017-React • ES6 • Tooling: npm, yarn, webpack, create-react-app • Routing with react-router • Manage state with redux, flux, mobx • Deploy to a production server • Server side rendering • Create the same app for Android & iOS
  41. 41. Binh.Phan@mgm-tp.com 7 Pasteur, Hai Chau, Da Nang

×