Downloaded 33 times
Uploaded bySandeep Kumar Patel
Getting Started With ReactJS
This document provides an overview of ReactJS including installing ReactJS, configuring ReactJS locally and via CDN, what JSX is, creating custom components with JSX, ReactJS event handling, lifecycle, stateful components, precompiling JSX, developing a digital clock, and debugging ReactJS. It also discusses the ReactJS initialization, lifetime, and teardown phases and provides an example of the component lifecycle.
Getting Started With ReactJS
- 1.
- 2. AGENDA Installing ReactJS ReactJSevent handling ReactJS 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
- 3. OUT OF SCOPE ComparingReactJS with Other framework Building React Routing Isomorphic React React Native Synthetic Event React ES6 implementation
- 4. WHO AM I? Sandeep Kumar Patel Intuit PTG Developer Blog: www.tutorialsavvy.com
- 5. REQUIRED SOFTWARE Code Editor(WebStorm) NPM (Node Package Manager) GIT (Code Repository)
- 6. REACTJS INSTALLATION Create aproject Directory Change the Current Working Directory Run npm init for creating package.json Run npm install react --save Verify node_modules directory
- 7. CONFIGURING REACTJS LOCAL <script src="node_modules/react/react.js"></script> <scriptsrc="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>
- 8. WHAT IS JSX? JavaScript syntax extension HTML like syntax JSX Transformer In browser compilation
- 9. CUSTOM COMPONENTS WITHJSX <script type="text/jsx"> var HelloMessage = React.createClass({ render: function() { return ( <h1 className="headerStyle"> Hello ReactJS </h1> ); } }); React.render(<HelloMessage/>, document.body); </script>
- 10. REACTJS INLINE STYLE Key-valuepair var styleObject={ styleAttribute: "styleValue", }; styleAttribute : camel case styleValue: wrapped in double quotes Example
- 11. REACTJS EVENT HANDLING Similarto HTML DOM events Difference in naming handlers Handlers are camel case onclick becomes onClick Example
- 12. USEFUL NON-DOM ATTRIBUTES key: Thisis 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
- 13.
- 14. REACTJS INITIALIZATION PHASE elementis created for the 1st time. has slight changes during lifetime
- 15. REACTJS LIFETIME PHASE thephase when element lives. changes its states and properties
- 16. REACTJS TEARDOWN PHASE thephase when element finishes its execution clean-up takes place.
- 17. REACTJS LIFECYCLE EXAMPLE Let’scheckout an simple React Component <Welcome> To determine the order of execution of these lifecycle methods Example
- 18. STATEFUL CUSTOM COMPONENT Torefer the component state : this.states To change the component state : this.setState(<object>) Object: {key:value} Example
- 19. PRECOMPILED JSX FORPRODUCTION Remove in browser JSX transformer React-tools npm install -g react-tools Example
- 20. JSX FILE WATCHER Comeswith react-tools jsx --watch dev production
- 21. DEVELOPING A DIGITALCLOCK USING REACTJS Develop a digital Clock in React Component to Hour minute and seconds
- 22. DEBUGGING REACTJS React ChromeDebugging tool https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
- 23. ADD VIRTUAL DOM VirtualDOM is Simple and Fast Batch Execution updates
- 24. THANK YOU CONTACT ME: Email:sandeepkumar_patel@intuit.com Gmail: sandeeppateltech@gmail.com Book: http://techbus.safaribooksonline.com/book/web-development/9781784393649