A tutorial on ReactJS for Beginners with live demo and download

Abhigyan Singh 30th Sep 2020

Before a few years ago, Facebook reactjs, JavaScript is used for frontend development like validation to form. But facebook nowadays, 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 applications because it is possible to make the whole applications by using JavaScript.

Today we will discuss ReactJS which is front end JavaScript library developed by Facebook.  It is currently the most popular JavaScript libraries for front-end development and facilitates 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 subtrees 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 at simple examples. Create a hello_react.html with the following code as shown below. Here we have added three js files. The first two files are reacted files mandatory for running react and the third file is for babel which is JavaScript Complier. ReactDOM.render() is a function that has two arguments to render a new tree in DOM. The first argument is for HTML what you want to write and the 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/[email protected]/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 the browser will have the following screen as shown below:

To-do Application in ReactJS

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

  • Create file index.html with the 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 the 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 the following code to update data of container div when the user will enter or fill the task in the 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 the browser will have the following screen as shown below:

If you have any queries regarding my script or want to know more than the 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 DiscussDesk