reactjs workshop
TRANSCRIPT
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