3. MEETUP ANNOUNCEMENTS
Thanks for joining the meetup
Help in finding sponser for meetup location
Active participation on meetup threads
More meetups and hackathons
Feedback
4. ABOUT ME
Freelance web developer
Currently focusing on react projects
on twitter
Opensource enthusiast
@kiran_abburi
5. AGENDA
Session 1
Basics of react
Composition
Data Flow
Session 2
JSX
React top level API
React component API and life cycle
Session 3
Building a simple todo app with react
6. WHAT IS REACT ?
A javascript library for building user interfaces
V in MVC
Simple & Declarative
10. REACT COMPONENTS
React is all about building components
We build small reusable components
Compose components to build larger components
Page
Header
Logo
Menu
Content
SideBar
MainBody
Footer
13. DATA FLOW
Uni-directional data flow
Two types of data: props & state
props are used to pass data and configuration to children
state is the application state of component
26. render
This method is required in all components
render() function should be pure
Should not modify component state
var Todo = React.createClass({
render: function () {
return <div></div>
}
});
27. getInitialState
Invoked once before the component is mounted.
The return value will be used as the initial value of
this.state
var Todo = React.createClass({
getInitialState: function () {
return { todos: [] }
},
render: function () {
return <div></div>
}
});
28. getDefaultProps
provides default values for the props that not specified by
the parent component
var Person = React.createClass({
getDefaultProps: function () {
return { name: anonymous }
},
render: function () {
return <h1>{this.props.name}</h1>
}
});
<Person name='kiran' />
<Person />
29. mixins
to share behavior among multiple components
var FormMixin = {
submitHandler: function () {
// submit form
},
changeHandler: function () {
// handle input changes
}
}
var Form1 = React.createClass({
mixins: [FormMixin],
render: function () {
return <form onSubmit={this.submitHandler}> </form>
}
})
30. COMPONENT LIFE CYCLE
hooks to execute code at at specific points in a
component's lifecycle
Most commonly used
componentWillMount
componentDidMount
componentWillUpdate
componentDidUpdate
componentWillUnmount
31. componentWillMount
Invoked once immediately before the initial rendering
occurs
var Component = React.createClass({
componentWillMount: function () {
// code to run before rendering
},
render: function () {
return <div></div>
}
})
32. componentDidMount
Invoked once immediately after the initial rendering
occurs
integrate with other JavaScript frameworks
send AJAX requests
var Component = React.createClass({
componentDidMount: function () {
// code
},
render: function () {
return <div></div>
}
})
33. componentWillUpdate
Invoked immediately before rendering when new props or
state are being received.
This method is not called for the initial render.
var Component = React.createClass({
componentWillUpdate: function () {
// code
},
render: function () {
return <div></div>
}
})
34. componentDidUpdate
Invoked immediately after the component's updates are
flushed to the DOM
var Component = React.createClass({
componentDidUpdate: function () {
// code
},
render: function () {
return <div></div>
}
})
35. componentWillUnmount
Invoked immediately before a component is unmounted
from the DOM.
Cleanup like unregistering event listeners
var Component = React.createClass({
componentWillUnmount: function () {
// code
},
render: function () {
return <div></div>
}
})