introduction to react
TRANSCRIPT
INTRODUCTION TO REACTPresentation by Kiran Abburi
Twitter: @kiran_abburi
HANGOUT ANNOUNCEMENTSUse Q & A feature to ask questions
MEETUP ANNOUNCEMENTSThanks for joining the meetupHelp in finding sponser for meetup locationActive participation on meetup threadsMore meetups and hackathonsFeedback
ABOUT MEFreelance web developer
Currently focusing on react projects on twitter
Opensource enthusiast
@kiran_abburi
AGENDASession 1
Basics of reactCompositionData Flow
Session 2JSXReact top level APIReact component API and life cycle
Session 3Building a simple todo app with react
WHAT IS REACT ?A javascript library for building user interfacesV in MVCSimple & Declarative
GETTING STARTED
Starter kit examplesfacebook.github.io/react
jsfiddle
STARTER TEMPLATE<!DOCTYPE html>
<html>
<head>
<script src='http://fb.me/react0.12.2.js'></script>
<script src='http://fb.me/JSXTransformer0.12.2.js'></script>
<script type='text/jsx'>
</script>
</head>
<body>
</body>
</html>
// React code goes here.
HELLO WORLDvar HelloWorld = React.createClass(
render: function ()
return <h1>Hello World</h1>
)
React.render(<HelloWorld />, document.body);
REACT COMPONENTSReact is all about building componentsWe build small reusable componentsCompose components to build larger components
Page
Header
Logo
Menu
Content
SideBar
MainBody
Footer
COMPOSITION EXAMPLEvar Page = React.createClass(
render: function ()
return (
<div>
<Header />
<Content />
<Footer />
</div>
);
)
var Header = React.createClass(
render: function ()
return (
<div>
<Logo />
<Menu />
</div>
);
)
DATA FLOWUni-directional data flowTwo types of data: props & stateprops are used to pass data and configuration to childrenstate is the application state of component
PROPS EXAMPLEvar Greet = React.createClass(
render: function ()
return <h1> Hello this.props.name</h1>
)
React.render(<Greet name='Kiran' />, document.body);
STATE EXAMPLEvar Toggle = React.createClass(
getInitialState: function ()
return flag: false
,
clickHandler: function ()
this.setState(flag: !this.state.flag)
,
render: function ()
return <button onClick=this.clickHandler>
this.state.flag ? 'on': 'off'
</button>;
)
React.render(<Toggle />, document.body);
SESSION1 SUMMARYWe learned
Basics of ReactGetting started with reactBuilding react componentsData flow in react
SESSION 1Q & A
SESSION 2JSXTop level APIComponent SpecificationComponent Lifecycle
JSXXML-like syntax extension to Javascript
HTML JSX
class className
onclick onClick
style=' ' style=
<div className="header" style=height: '50px'>
<h1 onClick=this.animateLogo>Logo</h1>
<Menu />
</div>
JSX EXPRESSIONS
Attribute expressions in a pair of curly braces
Child expressions
<Person name=this.props.name />
<Header>
this.props.isLoggedIn ? <Logout /> : <Login />
</Header>
TOP LEVEL APIReact is the entry point to the React libraryMostly used methods
React.createClassReact.renderReact.renderToString
React.createClass
Create a componentvar Todo = React.createClass(
// component specification
);
React.render
Render a ReactElement into the DOMReact.render(<Todo />, document.body);
React.render(<Todo />, document.getElementById('todo'));
React.renderToString
Generates html markup for react componentsUseful for server-side renderingImproves SEO
React.renderToString(<Todo />);
COMPONENT SPECIFICATIONrendergetInitialStategetDefaultPropsmixinsfew more
render
This method is required in all componentsrender() function should be pureShould not modify component state
var Todo = React.createClass(
render: function ()
return <div></div>
);
getInitialState
Invoked once before the component is mounted.The return value will be used as the initial value ofthis.statevar Todo = React.createClass(
getInitialState: function ()
return todos: []
,
render: function ()
return <div></div>
);
getDefaultProps
provides default values for the props that not specified bythe parent componentvar Person = React.createClass(
getDefaultProps: function ()
return name: anonymous
,
render: function ()
return <h1>this.props.name</h1>
);
<Person name='kiran' />
<Person />
mixins
to share behavior among multiple componentsvar FormMixin =
submitHandler: function ()
// submit form
,
changeHandler: function ()
// handle input changes
var Form1 = React.createClass(
mixins: [FormMixin],
render: function ()
return <form onSubmit=this.submitHandler> </form>
)
COMPONENT LIFE CYCLEhooks to execute code at at specific points in acomponent's lifecycleMost commonly used
componentWillMountcomponentDidMountcomponentWillUpdatecomponentDidUpdatecomponentWillUnmount
componentWillMount
Invoked once immediately before the initial renderingoccursvar Component = React.createClass(
componentWillMount: function ()
// code to run before rendering
,
render: function ()
return <div></div>
)
componentDidMount
Invoked once immediately after the initial renderingoccursintegrate with other JavaScript frameworkssend AJAX requestsvar Component = React.createClass(
componentDidMount: function ()
// code
,
render: function ()
return <div></div>
)
componentWillUpdate
Invoked immediately before rendering when new props orstate are being received.This method is not called for the initial render.var Component = React.createClass(
componentWillUpdate: function ()
// code
,
render: function ()
return <div></div>
)
componentDidUpdate
Invoked immediately after the component's updates areflushed to the DOMvar Component = React.createClass(
componentDidUpdate: function ()
// code
,
render: function ()
return <div></div>
)
componentWillUnmount
Invoked immediately before a component is unmountedfrom the DOM.Cleanup like unregistering event listenersvar Component = React.createClass(
componentWillUnmount: function ()
// code
,
render: function ()
return <div></div>
)
SESSION2 SUMMARYJSXTop level APIComponent SpecificationComponent Lifecycle
SESSION2Q & A
SESSION 3BUILDING A SIMPLE TODO APP
SESSION 3Q & A