intro react js
TRANSCRIPT
![Page 1: Intro react js](https://reader035.vdocuments.site/reader035/viewer/2022062503/58729e811a28ab07208b53a3/html5/thumbnails/1.jpg)
ReactJS an Intro
Vijayakanth MDevOps EngineerMegam Systems
1
![Page 2: Intro react js](https://reader035.vdocuments.site/reader035/viewer/2022062503/58729e811a28ab07208b53a3/html5/thumbnails/2.jpg)
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
![Page 3: Intro react js](https://reader035.vdocuments.site/reader035/viewer/2022062503/58729e811a28ab07208b53a3/html5/thumbnails/3.jpg)
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 ?
![Page 4: Intro react js](https://reader035.vdocuments.site/reader035/viewer/2022062503/58729e811a28ab07208b53a3/html5/thumbnails/4.jpg)
4
Flow of ReactJS
MVC Process ReactJS Flux Process
![Page 5: Intro react js](https://reader035.vdocuments.site/reader035/viewer/2022062503/58729e811a28ab07208b53a3/html5/thumbnails/5.jpg)
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.
![Page 6: Intro react js](https://reader035.vdocuments.site/reader035/viewer/2022062503/58729e811a28ab07208b53a3/html5/thumbnails/6.jpg)
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"));
![Page 7: Intro react js](https://reader035.vdocuments.site/reader035/viewer/2022062503/58729e811a28ab07208b53a3/html5/thumbnails/7.jpg)
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
![Page 8: Intro react js](https://reader035.vdocuments.site/reader035/viewer/2022062503/58729e811a28ab07208b53a3/html5/thumbnails/8.jpg)
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.
![Page 9: Intro react js](https://reader035.vdocuments.site/reader035/viewer/2022062503/58729e811a28ab07208b53a3/html5/thumbnails/9.jpg)
9
continue….
StateEvery 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
![Page 10: Intro react js](https://reader035.vdocuments.site/reader035/viewer/2022062503/58729e811a28ab07208b53a3/html5/thumbnails/10.jpg)
10
some code//Child componentvar Comment = React.createClass({render: function() {return (<div className="comment"><h2 className="commentAuthor">{this.props.author}</h2>{this.props.children}</div>); } });
//Parent componentvar 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.
![Page 11: Intro react js](https://reader035.vdocuments.site/reader035/viewer/2022062503/58729e811a28ab07208b53a3/html5/thumbnails/11.jpg)
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
![Page 12: Intro react js](https://reader035.vdocuments.site/reader035/viewer/2022062503/58729e811a28ab07208b53a3/html5/thumbnails/12.jpg)
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>);}});
![Page 13: Intro react js](https://reader035.vdocuments.site/reader035/viewer/2022062503/58729e811a28ab07208b53a3/html5/thumbnails/13.jpg)
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
![Page 14: Intro react js](https://reader035.vdocuments.site/reader035/viewer/2022062503/58729e811a28ab07208b53a3/html5/thumbnails/14.jpg)
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 )}
![Page 15: Intro react js](https://reader035.vdocuments.site/reader035/viewer/2022062503/58729e811a28ab07208b53a3/html5/thumbnails/15.jpg)
15
continue...EventsReact 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 propsWe 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:
![Page 16: Intro react js](https://reader035.vdocuments.site/reader035/viewer/2022062503/58729e811a28ab07208b53a3/html5/thumbnails/16.jpg)
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.rbMyApp::Application.configure do config.react.variant = :developmentend
# config/environments/production.rbMyApp::Application.configure do config.react.variant = :productionend
![Page 17: Intro react js](https://reader035.vdocuments.site/reader035/viewer/2022062503/58729e811a28ab07208b53a3/html5/thumbnails/17.jpg)
Questions...
![Page 18: Intro react js](https://reader035.vdocuments.site/reader035/viewer/2022062503/58729e811a28ab07208b53a3/html5/thumbnails/18.jpg)
18
Vijayakanth MDevOps EngineerMegam Systems(www.megam.io)
Twitter: @vijayakanth_mpEmail: [email protected]
Docs: docs.megam.ioDevcenter: Devcenter.megam.io
Thank you…