A tutorial on ReactJS for Beginners with live demo and download

Abhigyan Singh 13th Jul 2020

Before few years ago, JavaScript is used for frontend development like validation to form. But now a days, People are using it for frontend as well as backend development. So it is being popular. You don’t need to server side language like PHP, .Net for developing web and mobile application because it is possible to make whole application by using JavaScript.

Today we will discuss about ReactJS which is front end JavaScript library developed by Facebook.  It is currently most popular JavaScript libraries for front end development and facilitate the creation of interactive and reusable UI components. React gives you a template language and some function hooks to essentially render HTML.

That's all React outputs, HTML. Your bundles of HTML / JavaScript, called "components", are allowed things like storing their own internal state in memory.It also uses a concept called the Virtual DOM that selectively renders sub trees of nodes based upon state changes. It does the least amount of DOM manipulation possible in order to keep your components up to date.

Hello World in ReactJS

Let’s look simple example. Create a hello_react.html with following code as shown below. Herewe have added three js files. First two files are react files mandatory for running react and third file is for babel which is JavaScript Complier. ReactDOM.render() is a function have two argument to render new tree in DOM. First argument is for html what you want to write and second is for appending html to DOM element like div.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<scriptsrc="build/react.js"></script>
<scriptsrc="build/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('example'));
</script>
</body>
</html>

When you run hello_react.html in browser will have following screen as shown below:

To-do Application in ReactJS

Now we will make To-do Application in ReactJS in which user will enter task after that it will appear under the form. To make this application follow these steps as shown below:

  • Create file index.html with following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React JS</title>
<scriptsrc="build/react.min.js"></script>
<scriptsrc="build/react-dom.min.js"></script>
<scriptsrc="build/browser.min.js"></script>

<scriptsrc="build/jquery.min.js"></script>
<script src="server.js" type="text/babel"></script>

</head>
<body>

<div id="container">

</div>
</body>
<script>
functionajaxPostReact(url, data, reactThis, success)
{
$.ajax({
type:"POST",
url:url,
data :data,
dataType:"json",
cache:false,
timeout:50000,
beforeSend :function(data) { }.bind(this),
success:function(data){
success.call(this, data);}.bind(this),
error:function(data){
$("#networkError").show().html($.networkError);
}.bind(this)
});
}
</script>
</html>
  • Create Second file server.js with following code:
var Form = React.createClass({

getInitialState: function(){
return { user_update: ''};
},
updateChange:function(e){
this.setState({user_update: e.target.value });
},
updateSubmit: function(e){
e.preventDefault();
varuser_update= this.state.user_update.trim();
//alert(user_update);
if(!user_update)
{
return;
}
else
{
this.props.onUpdateSubmit({ user_update: user_update});
this.setState({ user_update:''});
}
},

render:function(){
return(
<form onSubmit={this.updateSubmit} >
<input type='text' onChange={this.updateChange} value={this.state.user_update} ref="updateInput"></input>
<input type='submit' value='Submit'/>
</form>
);
}

});

var Updates=React.createClass({
textToLink: function(content){
varfinalContent= content;
return {__html: finalContent}
},
render:function(){
var updates=this.props.data.map(function(update, index)
{
return(
<div className="feedBody" key={update.created}>
<imgsrc={update.profile_pic} className="feedImg" />
<div className="feedText">
<b>{update.name}</b>

<span dangerouslySetInnerHTML={this.textToLink(update.user_update)} />
</div>

</div>
)
}, this);
return(
<div id="Feed">
{updates}
</div>
);
},
})

var Feed=React.createClass({
getInitialState:function(){
return {data: []};
},
updateAjaxSubmit: function(update)
{
varreactThis=this;
ajaxPostReact(this.props.postUrl, update , reactThis, function(data){
var updates = reactThis.state.data;
varnewUpdates = [data.updates[0]].concat(updates);
reactThis.setState({data: newUpdates});
});
},

render:function(){
return(
<div>
<Form onUpdateSubmit={this.updateAjaxSubmit}/>
<Updates data={this.state.data} commentLink={this.commentLink} deleteUpdate={this.deleteUpdate}/>
</div>
);
}
});

varContainer_div=React.createClass({
render:function(){
return(
<div id="Container_div">
<h1>To Do List with React JS Demo</h1>
<Feed url="#" postUrl="update.php"/>
</div>
);
}
});

ReactDOM.render(
<Container_div />,
document.getElementById('container')
);
  • Create another file update.php with following code to update data of container div when use will enter or fill task in input box.
<?php
if($_POST['user_update'])
{
$b=$_POST['user_update'];
$t=time();
echo '{
"updates": [
{
"user_id": "7",
"update_id": "'.$t.'",
"user_update": "'.$b.'",
"created": "'.$t.'",
"commentCount": 0,
"comments": []
}
]
}';
}

?>

Run index.html file on browser will have following screen as shown below:

If you have any query regarding my script or want to know more than comment below. We will publish another article regarding your query.

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

ALSO ON DISCUSS DESK