Getting Started With ReactJS
Download as PPTX, PDF6 likes1,005 views
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
- 2. AGENDA Installing ReactJS ReactJS event 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 Comparing ReactJS 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 a project 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> <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>
- 8. WHAT IS JSX ? JavaScript syntax extension HTML like syntax JSX Transformer In browser compilation
- 9. 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>
- 10. REACTJS INLINE STYLE Key-value pair var styleObject={ styleAttribute: "styleValue", }; styleAttribute : camel case styleValue: wrapped in double quotes Example
- 11. REACTJS EVENT HANDLING Similar to HTML DOM events Difference in naming handlers Handlers are camel case onclick becomes onClick Example
- 12. USEFUL NON-DOM ATTRIBUTES key: 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
- 14. REACTJS INITIALIZATION PHASE element is created for the 1st time. has slight changes during lifetime
- 15. REACTJS LIFETIME PHASE the phase when element lives. changes its states and properties
- 16. REACTJS TEARDOWN PHASE the phase when element finishes its execution clean-up takes place.
- 17. REACTJS LIFECYCLE EXAMPLE Let’s checkout an simple React Component <Welcome> To determine the order of execution of these lifecycle methods Example
- 18. STATEFUL CUSTOM COMPONENT To refer the component state : this.states To change the component state : this.setState(<object>) Object: {key:value} Example
- 19. PRECOMPILED JSX FOR PRODUCTION Remove in browser JSX transformer React-tools npm install -g react-tools Example
- 20. JSX FILE WATCHER Comes with react-tools jsx --watch dev production
- 21. DEVELOPING A DIGITAL CLOCK USING REACTJS Develop a digital Clock in React Component to Hour minute and seconds
- 22. DEBUGGING REACTJS React Chrome Debugging tool https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
- 23. ADD VIRTUAL DOM Virtual DOM 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