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

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

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

6.
React

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

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.
Who is using
React?

10.
React philosophy

11.
• Declarative
React philosophy

12.
• Declarative
• Component-Based
React philosophy

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

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

15.
Component-
Based

16.
Component-
Based

17.
Learn Once, Write Anywhere

18.
Learn Once, Write Anywhere

19.
Learn Once, Write Anywhere

20.
Learn Once, Write Anywhere

21.
Learn Once, Write Anywhere

22.
Learn Once, Write Anywhere

23.
React Dataflow

24.
Virtual DOM

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

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

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

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

31.
Editor support

32.
Where to go next?

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

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

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

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.
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.
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.
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.
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.
Binh.Phan@mgm-tp.com
7 Pasteur, Hai Chau, Da Nang