Getting Started With ReactJS

GETTING STARTED

WITH REACTJS

VIEW

AGENDAInstalling ReactJS ReactJS event

handlingReactJS lifecycle example

Configuring ReactJS Useful non-DOM attributes

Stateful custom component

Using ReactJS ReactJS component lifecycle

Precompiled JSX for production

What is JSX ReactJS initialization phase

JSX file watcher

Custom components with JSX

ReactJS lifetime phase

Developing a digital clock using ReactJS

ReactJS inline style ReactJS teardown phase

Debugging ReactJS

OUT OF SCOPEComparing ReactJS with Other frameworkBuilding React RoutingIsomorphic ReactReact NativeSynthetic EventReact ES6 implementation

WHO AM I? Sandeep Kumar Patel Intuit PTG Developer Blog: www.tutorialsavvy.com

REQUIRED SOFTWARECode Editor (WebStorm)

NPM (Node Package Manager)GIT (Code Repository)

REACTJS INSTALLATIONCreate a project DirectoryChange the Current Working DirectoryRun npm init for creating package.jsonRun npm install react --save Verify node_modules directory

CONFIGURING REACTJSLOCAL<script src="node_modules/react/react.js"></script><script src="node_modules/react/JSXTransformer.js"> </script>CDN<script src="https://fb.me/react-0.13.3.min.js"></script><script src="https://fb.me/JSXTransformer-0.13.3.js"></script>

WHAT IS JSX ?JavaScript syntax extensionHTML like syntaxJSX TransformerIn browser compilation

CUSTOM COMPONENTS WITH JSX <script type="text/jsx"> var HelloMessage = React.createClass({ render: function() { return ( <h1 className="headerStyle"> Hello ReactJS </h1> ); } }); React.render(<HelloMessage/>, document.body); </script>

REACTJS INLINE STYLEKey-value pairvar styleObject={ styleAttribute: "styleValue", };styleAttribute : camel casestyleValue: wrapped in double quotesExample

REACTJS EVENT HANDLINGSimilar to HTML DOM eventsDifference in naming handlersHandlers are camel caseonclick becomes onClickExample

USEFUL NON-DOM ATTRIBUTESkey: This is an optional attribute can be used for uniquely identify each component in the page.ref: This is an optional attribute that can be used to access the child element from outside of render() method.dangerouslySetInnerHTML: This attribute can be used inside JSX element to set HTML content inside the component.Example

REACTJS COMPONENT LIFECYCLE

REACTJS INITIALIZATION PHASEelement is created for the 1st time.

has slight changes during lifetime

REACTJS LIFETIME PHASEthe phase when element lives.changes its states and properties

REACTJS TEARDOWN PHASEthe phase when element finishes its executionclean-up takes place.

REACTJS LIFECYCLE EXAMPLELet’s checkout an simple React Component <Welcome>To determine the order of execution of these lifecycle methodsExample

STATEFUL CUSTOM COMPONENTTo refer the component state : this.statesTo change the component state : this.setState(<object>) Object: {key:value}Example

PRECOMPILED JSX FOR PRODUCTIONRemove in browser JSX transformerReact-toolsnpm install -g react-toolsExample

JSX FILE WATCHERComes with react-toolsjsx --watch dev production

DEVELOPING A DIGITAL CLOCK USING REACTJSDevelop a digital Clock in React Component to Hour minute and seconds

DEBUGGING REACTJSReact Chrome Debugging toolhttps://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

ADD VIRTUAL DOMVirtual DOM is Simple and Fast

Batch Execution updates

THANK YOU CONTACT ME: Email: sandeepkumar_patel@intuit.com Gmail: sandeeppateltech@gmail.com Book: http://techbus.safaribooksonline.com/book/web-development/9781784393649