Getting Started With ReactJS
-
Upload
sandeep-kumar-patel -
Category
Documents
-
view
760 -
download
2
Transcript of 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: [email protected] Gmail: [email protected] Book: http://techbus.safaribooksonline.com/book/web-development/9781784393649