Introduction to React JS

Introduction to React JSLohith G N

About Me

Technical EvangelistMicrosoft MVP (ASP.NET/IIS)

[email protected]

@kashyapahttp://www.kashyapas.comhttp://www.telerikhelper.net

Lohith G N

http://www.telerik.com

React JS

ReactA JavaScript library for building User Interfaces

Developed by Facebook/Instagram

Just the UIV in MV* frameworks

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

Data FlowOne way reactive data flow

Why React ?

Simple• Express how your app should look

• React automatically manages UI updates

• UI update only when underlying data changes

Declarative• When Data Changes, React updates the changed parts

Composable Components• You build components

• Reusable Components

• Code reuse, testing, Separation of concerns

Simple Component

JSX – Markup in JavaScript

Component Life Cycle

• Mounting• Inserted into DOM• componentWillMount(), componentDidMount()

• Updating• Re-Rendered

• Unmounting• Removed from DOM• componentWillUnmount()

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

Thinking in React

Requirement

UI BreakdownFilterableProductTable

SearchBar

ProductTable

CategoryRow

ProductRow

Demo