Reactjs workshop

React Js

@panbhag

What is it?

A JavaScript Library to build user interfaces

Ease of Development Usability

Traditional Web App Easy Bad

Ease of Development Usability

SPA(angular/backbone) Complex Good

Ease of Development Usability

React Easy Good

Lets start codingWe will discuss what is react,why react later

Hello World

HTML document

React.render(reactElement,container)

React.createElement(name,options,children)

Hello World in JSX

JSXJavaScript syntax extension that looks similar to XML/

HTML

Why JSX

• Familiar

• Easier to read and write tree like structures in XML format

<h1>Hello world</h1>

React.createElement("h1", null, "Hello world Hi")

JSX to Javascript

jsx vs HTML

• className instead of class attribute

• html-for instead of for attribute in label

• for style, convert all css hyphen separated style names to camel cased names and pass it as a json object

ComponentsReact is all about components

render function should return a react element

options = {render:function,…. }

React.createClass(options)

Hello World Component

Header component accepting children

Header component accepting attribute for optional underline

Composition: Hello component from Header Component

Events: Add a click event to the Hello component

–Johnny Appleseed

State: Add a counter for number of times clicked

Whenever state changes the entire component renders again

Shadow Dom

React first renders the component in shadow dom and does the diff with the previous version and updates only what changed to the browser

State vs props

Component Life Cycle

First Component use

• getDefaultProps

• getInitialState

• componentWillMount

• render

• componentDidMount

Next Component Use

• getInitialState

• componentWillMount

• render

• componentDidMount

Component Update

• componentWillReceiveProps

• shouldComponentUpdate

• componentWillUpdate

• render

• componentDidUpdate

Component Removal

• componentWillUnmount

Todo App

Flux Architecture

ReFlux Architecture

Todo Refulx

Todo Immutable

Immutable data is one which cannot be modified

Todo Cortex