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.
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.
[DevDay 2017] ReactJS Hands on - Speaker: Binh Phan - Developer at mgm technology partners
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
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
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
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