Slide deck used for my webinar "Introduction to React JS" which was held on Dec 17 2015

1. Introduction to React JS
Lohith G N

2. About Me
Technical Evangelist
Microsoft MVP (ASP.NET/IIS)
lohith.nagaraj@telerik.com
@kashyapa
http://www.kashyapas.com
http://www.telerikhelper.net
Lohith G N
http://www.telerik.com

3. React JS

4. React
A JavaScript library for building User Interfaces
Developed by Facebook/Instagram

5. Just the UI
V in MV* frameworks

6. Virtual DOM
• Internal MOCK DOM
• Performs Diffs
• Computes Efficient DOM Mutation

7. Data Flow
One way reactive data flow

8. Why React ?

9. Simple
• Express how your app should look
• React automatically manages UI updates
• UI update only when underlying data changes

10. Declarative
• When Data Changes, React updates the changed parts

11. Composable Components
• You build components
• Reusable Components
• Code reuse, testing, Separation of concerns

12. Simple Component

13. JSX – Markup in JavaScript

14. Component Life Cycle
• Mounting
• Inserted into DOM
• componentWillMount(), componentDidMount()
• Updating
• Re-Rendered
• Unmounting
• Removed from DOM
• componentWillUnmount()

15. Component State
• Components are State Machines to REACT
• Update Component State, render new UI Based on new
State
• getInitialState()
• Defines initial state
• setState
• Set new state

16. Thinking in React

17. Requirement

18. UI Breakdown
FilterableProductTable
SearchBar
ProductTable
CategoryRow
ProductRow

19. Demo