React Js Getting started

React is a javascript library. If you write javascript code and you want reuse it then React is best choice for it. We can create a class of each of our view as component in react. React is not for to create one or two view in the website. use it to build whole website like every part of a website.

React component is like a class where view and the function to manage this view is written in a component.

Below are the javascripts files required to work in react js.

<script src="https://fb.me/react-15.0.0.js"></script>
<script src="https://fb.me/react-dom-15.0.0.js"></script>>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>

Below is a very basic React component. You can create it in any .html file.

<div id="page"></div>
<script type="text/babel">
var MainComponent = React.createClass({
render: function() {
return (<div>Hello World</div>)
}
});

/* Now we need to render this component. we will render this component in a div. */
React.render(<MainComponent />, document.getElementById("page"));
</script>

Have you looked at the javascript tag <script type="text/babel"> we generaly use the tag like <script type="text/javascript">. We use text/bable in <script> tag because without it our component will not run. If you put this component in a .js file then it will not run. Every react component should be compile before run.
In our case our javascript https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js is compiling it before executing on the fly. if you remove this file then our component will not work.

We can manually compile our react component from here https://babeljs.io/repl/

We have to compile each of our react component before deploying it to production server. If we put our react component in compiled form then it takes less time in execution.

Below is the compiled code of react component from https://babeljs.io/repl/

<script language="text/javascript">
"use strict";
var MainComponent = React.createClass({
displayName: "MainComponent",

render: function render() {
return React.createElement(
"div",
null,
"Hello World"
);
}
});

React.render(React.createElement(MainComponent, null), document.getElementById("page"));
</script>

Now you can put it in any .js file. Now it is a re usable component, you can include this .js file any where in your project.

Passing data to a Reacts Component.
You can pass data in react component as property. see the below code.


<div id="page"></div>
<script type="text/babel">
var data = {};
data.name = "James";
data.age = 31;
data.address = "some where in the city";

var MainComponent = React.createClass({
render: function() {
var row = this.props.row;
var name = row.name;
var age = row.age;
var address = row.address;
return (<div>
<div>User Detail</div>
<div>Name:{name}</div>
<div>Age:{age}</div>
<div>{address}</div>
</div>
)
}
});
React.render(<MainComponent row={data}/>, document.getElementById("page"));
</script>

React state – React state is used to create one page app. you can use react state to change component view.

<script type="text/babel">
var MainComponent = React.createClass({
getInitialState:function() {
var state = new Object();
state.page = 1;
return state;
},
showpage:function(page_number) {
this.state.page = page_number;
this.setState(this.state);
},
render: function() {
var that = this;

if(that.state.page == 1 ) {

return (<div>This is page 1 <a href="javascript:void(0);" onClick={that.showpage.bind(this,1)}></div>)

}else if (that.state.page == 2 ) {

return (<div>This is page 2 <a href="javascript:void(0);" onClick={that.showpage.bind(this,2)}></div>)

}else if (that.state.page == 3 ) {

return (<div>This is page 2 <a href="javascript:void(0);" onClick={that.showpage.bind(this,3)}></div>)

}
}
});
React.render(<MainComponent row={data}/>, document.getElementById("page"));
</script>

Look at the function showpage in this function we have used the this.setState(this.state). This function runs the component again and render function will execute again and now the state.page value is different so the next html code will be shown.

componentDidMount – This function is executed after rendering of a component. It will execute only once. it is like a jquery document.ready function. In this function you can execute any code that is to be execute after html is ready.

<script type="text/babel">

var MainComponent = React.createClass({
componentDidMount:function() {
$("#page").addClass("hidden");
},
render: function() {
return (<div id="page">This is page 1</div>);
}
});
React.render(<MainComponent row={data}/>, document.getElementById("page"));
</script>

componentWillMount – Difference between componentDidMount and componentWillMount is that componentWillMount executes every time after render and componentDidMount executes only once.

Send data to parent React Component.

React component may have many child component in it. so it happens many times that we need to send data form a child react component to parent react component. Look at below example.

<script type="text/babel">

var MainComponent = React.createClass({
parenttakeAnAction:function(data) {
console.log(data);
//data has received from child;
},
render: function() {
var that = this;
return (<div>This is page 1<ChildComponent takeAnAction={that.parenttakeAnAction}/></div>);
}
});

var ChildComponent = React.createClass({
sendToParent:function() {
var data = {};
data.action = "send";
this.props.takeAnAction(data); // send data to parent
},
render: function() {
var that = this;
return (<div>
This is a child component
<a href="javascript:void(0);" onClick={that.sendToParent}>Send</a>
</div>);
}
});

React.render(<MainComponent row={data}/>, document.getElementById("page"));
</script>

This is very good feature of javascript that we can pass a function as a paramter in a function. here we have passed a parent’s function takeAnAction in to the child component. takeAnAction is a paremeter that contains the parent function parenttakeAnAction. when user click on the link the sendToParent function calls and it calls takeAnAction function. thus we transferred data from child component to parent component.

Communication between two react components.

As we need to communicate between parent and child component we also need to communicate between two different component. we can achieve this very easily. Here we will see how we can call a function of component in a different component.


<script type="text/babel">
var globalSettings = {}

var Component1 = React.createClass({
componentDidMount:function() {
globalSettings.Component1ins = this;
},
callme:function(data) {
console.log(data);
// called form component 1
},
render: function() {
var that = this;
return (<div>This is component 1<ChildComponent takeAnAction={that.parenttakeAnAction}/></div>);
}
});

var Component1 = React.createClass({
componentDidMount:function() {
globalSettings.Component2ins = this;
},
send:function() {
var data = {};
data.action = "send";
globalSettings.Component1ins.callme(data); //calling function of component 1
},
render: function() {
var that = this;
return (<div>This is component 2
<a href="javascript:void(0);" onClick={that.send}>Send</a>
</div>);
}
});

React.render(<Component1 row={data}/>, document.getElementById("page"));
React.render(<Component2 row={data}/>, document.getElementById("page1"));
</script>

We took a global variable globalSettings in the function componentDidMount and then we assigned the current component’s object to the global variable. We did this in componentDidMount because this function is called at the end of componene life cycle. Now we have both component available in global variable and we can use all properties and function of a compoenet in another component vai the global variable globalSettings.

Inline Css in React Component

Some time we need to use inline css in react component. To achieve this task we have to create inline css as a javascript object. You can use all css property in this object.


<script type="text/babel">

var Component1 = React.createClass({
render: function() {
var that = this;
var styles = {
"width":"100px",
"zIndex":"999",
"height":"100px",
}
return (<div styles={styles}>This is component 1</div>);
}
});

React.render(<Component1 row={data}/>, document.getElementById("page"));
</script>

There are many feature available in react js. This quick start tutorials is only covering react js for front side. I recommend that one should use react js with Flux or Redux.

Leave a Reply

Your email address will not be published. Required fields are marked *

14 − 10 =