1. GETTING STARTED
WITH REACTJS
VIEW

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

13. REACTJS COMPONENT LIFECYCLE

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