1. ReactJS an Intro
Vijayakanth M
DevOps Engineer
Megam Systems
1

2. AGENDA
2
1. What is ReactJS and Why ?
2. ReactJS with JSX
3. Lifecycle Methods (specs and state)
4. Some code
5. Installation and Config

3. 3
❖ ReactJS is a JavaScript Library for creating user interfaces by Facebook
and Instagram.
❖ ReactJS is a building block of Components.
❖ In ReactJS, application data flows unidirectionally via the state and props
objects, contrast to frameworks like Angular and Ember.
❖ ReactJS runs a “diffing” algorithm, which identifies that has changed.
❖ This will serve purely as an API endpoint which we'll use for getting and
saving data.
What is ReactJS ?

4. 4
Flow of ReactJS
MVC Process ReactJS Flux Process

5. Why do we use ReactJS ?
❖ ReactJS is extremely fast, because it uses virtual DOM, and syncs only the
changed parts.
❖ React.js uses a special syntax called JSX, which allows you to mix HTML
with JavaScript.
❖ When the data changes, ReactJS conceptually hits the "refresh" button,
and knows to only update the changed parts.
❖ React is all about building reusable components.
❖ It is much smaller and plays nicely with jQuery and other frameworks.

6. 6
ReactJS with JSX
❖ JSX is a JavaScript syntax extension that looks similar to
XML. You can use a simple JSX syntactic transform with React.
❖ React JSX transforms from an XML-like syntax into native
JavaScript.
var Nav, Profile;
// Input (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// Output (JS):
var app = React.createElement(
Nav, {color:"blue"},
React.createElement(Profile, null, "click")
);

7. 7
Now see a simple structure of ReactJS Component
var MyComponent = React.createClass({
render: function(){
return (
<h1>Hello, world!</h1>
<CommentList />
);}
});
How to call the Components in Rails
<% react_component ‘MyComponent’ %>
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
<h1> I am a CommentList. </h1>
</div>
);
}
});
Every Component must have a render function,
it will return an another react Component or
tags

8. 8
Lifecycle Methods, Specs and State
8
componentWillMount Invoked once, on both client &
server before rendering occurs.
componentDidMount Invoked once, only on the client,
after rendering occurs.
shouldComponentUpdate Return value determines whether
component should update
componentWillUnmount Invoked prior to unmounting
component.

9. 9
continue….
State
Every component has a state object and a props object. State is set using
the setState method. Calling setState triggers UI updates and is the bread
and butter of React’s interactivity. If we want to set an initial state before
any interaction occurs we can use the getInitialState method.
getInitialState Return value is the initial value for state.
getDefaultProps Sets fallback props values if props aren’t
supplied.
Specs

10. 10
some code
//Child component
var Comment =
React.createClass({
render: function() {
return (
<div className="comment">
<h2
className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
} });
//Parent component
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
<Comment author="Pete Hunt">This is one
comment</Comment>
<Comment author="Jordan Walke">This is
*another* comment</Comment>
</div>
);
}
});
<%= react_component ‘CommentList’ %>
Note that we have passed some data from the parent CommentList component to the child Comment
components. For example, we passed PeteHunt (via an attribute) and This is one comment (via an XML-
like child node) to the first Comment. As noted above, the Comment component will access these
'properties' through this.props.author, and this.props.children.

11. 11
var data = [
{author: "Pete Hunt", text: "This is one comment"},{},...}
];
var CommentBox = React.createClass({
loadCommentsFromServer: function() {
$.ajax({
//… Make a ajax call to get data from server
}); },
getInitialState: function() {
return {data: []};
},
// to get data continuous
componentDidMount: function() {
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer,
this.props.pollInterval);
},
// Render another Components
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
</div>
);
}
});
Data from the server

12. 12
continue...
// To list all data get from the server
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function
(comment) {
return (
<Comment author={comment.author}>
{comment.text}
</Comment>
);
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
});

13. 13
continue...
<%= react_component ‘CommentBox’ url: “/json”, timeInterval: 4000 %>
Or
<script type="text/javascript">
ReactDOM.render( ReactDOM.render(React.createElement(NewOverview, { url: “/json”,
timeInterval:4000}), document.getElementById('content') );
</script>
Write the Component code in :
app/assets/javascripts/components/<filename>.js.jsx
the calling command on:
app/views/<directory name>/<htmlerbfile>.html.erb
The flow of the Program

14. 14
Flow of above Components
CommentBox //Parent component
getInitialState { }
loadCommentsFromServer{ $.ajax({ //… Make a ajax call to get data }); },
componentDidMount {setInterval( Get synchronous ajax call to get data) }
CommentList //Child component
Map{ // fetch each data from whole json and send to component }
Comment //Child component
render: { return ( Call children components
and send data)}
render: { return ( call Comment component)}
render: { return ( Show all data )}

15. 15
continue...
Events
React attaches event handlers(onSubmit) to components using a camelCase naming
convention.
Call preventDefault() on the event to prevent the browser's default action of submitting
the form.
Refs We use the ref attribute to assign a name to a child component and this.refs to
reference the component. We can call React.findDOMNode(component) on a
component to get the native browser DOM element.
Callbacks as props
We need to pass data from the child component back up to its parent. We do this in our
parent's render method by passing a new callback ( handleCommentSubmit) into the
child, binding it to the child's onCommentSubmit event. Whenever the event is triggered,
the callback will be invoked:

16. 16
Installation and Config
Add react-rails to your gemfile:
gem 'react-rails', '~> 1.3.0'
Next, run the installation script:
rails g react:install
place the following in your
application.js(app/assets/javascripts/):
//= require react
//= require react_ujs
//= require components
You can pick which React.js build
(development, production, with or
without add-ons) to serve in each
environment by adding a config.
# config/environments/development.rb
MyApp::Application.configure do
config.react.variant = :development
end
# config/environments/production.rb
MyApp::Application.configure do
config.react.variant = :production
end

17. Questions...

18. 18
Vijayakanth M
DevOps Engineer
Megam Systems
(www.megam.io)
Twitter: @vijayakanth_mp
Email: mvijaykanth@megam.io
Docs: docs.megam.io
Devcenter: Devcenter.megam.io
Thank you…