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.

3. Binh.Phan@mgm-tp.com
7 Pasteur, Hai Chau, Da Nang
• Java backend
• Frontend
• Operations
• Administrator
• Trainings

10. We build software
• Web & mobile
• Large enterprise customers in Germany

11. We build software
• Web & mobile
• Large enterprise customers in Germany
We use state of the art technologies
• JEE, Spring, Hibernate
• Angular, REACT
• Postgres, Oracle

12. We build software
• Web & mobile
• Large enterprise customers in Germany
We use state of the art technologies
• JEE, Spring, Hibernate
• Angular, REACT
• Postgres, Oracle

13. React

14. React

15. “A JavaScript library for building user interfaces”
React

16. • 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

17. Who is using
React?

25. React philosophy

26. • Declarative
React philosophy

27. • Declarative
• Component-Based
React philosophy

28. • Declarative
• Component-Based
• Learn Once, Write Anywhere
React philosophy

29. Declarative
I want a dinner with 🍗
Imperative
• Go to kitchen
• Open fridge
• Take 🍗 from fridge
• …
• Bring food to table

30. Component-
Based

31. Component-
Based

41. Learn Once, Write Anywhere

42. Learn Once, Write Anywhere

43. Learn Once, Write Anywhere

44. Learn Once, Write Anywhere

45. Learn Once, Write Anywhere

46. Learn Once, Write Anywhere

47. React Dataflow

48. Virtual DOM

49. Virtual DOM
Re-render everything on every update:

50. Virtual DOM
Re-render everything on every update:
1. Create lightweight description of UI component

51. Virtual DOM
Re-render everything on every update:
1. Create lightweight description of UI component
2. Diff it with the old one

52. 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

53. 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

56. JSX

57. Editor support

62. Where to go next?

63. Where to go next?
• Sample at: https://github.com/binhpv/DevDay2017-React

64. Where to go next?
• Sample at: https://github.com/binhpv/DevDay2017-React
• ES6

65. Where to go next?
• Sample at: https://github.com/binhpv/DevDay2017-React
• ES6
• Tooling: npm, yarn, webpack, create-react-app

66. Where to go next?
• Sample at: https://github.com/binhpv/DevDay2017-React
• ES6
• Tooling: npm, yarn, webpack, create-react-app
• Routing with react-router

67. 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

68. 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

69. 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

70. 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

72. Binh.Phan@mgm-tp.com
7 Pasteur, Hai Chau, Da Nang