Social Network System With React JS Part One

3.
040 Tweet Suka 23 rb Search
TUTORIALS JAVASCRIPT PHP HTML ANGULAR REACT JQUERY DEMOS SOCIAL NETWORKING SCRIPT SOCIAL LOGIN REQUEST TUTORIAL
Adsby Google ReactJSLibrary SocialNetworkWebsite LogIn
Follow Me: Ikuti 7,4 rb Follow@9lessons 7,752followers SRINIVAS TAMADA

Entrepreneur, Blogger,Thinker
I love the WEB - Indian
SUNDAY, AUGUST 14, 2016
Invented The WALL SCRIPT
Social Network System with React JS Part Lives in Atlanta - United States
srinivas@9lessons.info
One
DOM FACEBOOK JAVASCRIPT PHP REACTJS VIRTUAL WEB DEVELOPMENT Subscribe my updates via Email
Sign Up
{ 12 comments } - SRINIVAS TAMADA Share 29 Bagikan 4 Tweet
237 How to solve in nity loading

either in your desktop or mobile?
Suka
By now, everyone is familiar with JQuery,
but we all know is JQuery cannot handle
such large amount of data to load. React
JS is the best solution for this problem.
JQuery and other libraries interacts
directly with DOM to load any data; but
React JS is speci cally designed in such a
way that it has a mid interactive layer
called Virtual DOM which in turn interacts
with DOM(as shown in the diagram
below). This Virtual DOM helps in data loading very faster. Most Popular Posts
Login with Facebook and Twitter
Ajax Image Upload without Refreshing Page using

Jquery.
PHP Login Page Example.
Auto Load and Refresh Div every 10 Seconds with

jQuery.
Create a RESTful Services API in PHP.
Upload and Resize an Image with PHP
Login with Google Account OpenID
Pagination with jQuery, MySQL and PHP.
Pagination with Jquery, PHP , Ajax and MySQL.
Categories
Facebook J2EE
Download Script Live Demo
Database HTML5
jQuery Twitter API(new)

React is a big library; Initially, for the developers it may look bit complicated to code
JavaScript MySQL
using React JS, but eventually we feel it very easy once we get used to it. React is easy
Tutorials Ajax
to maintain too. I speci cally suggest React JS for mobile applications. Applications
Web Design Most Popular
like Facebook, twitter uses React. React JS is not a framework, its a library for View
component. Take a look at the demo, how React works for our Wall System.
How to Start React Application

You have to include following libraries to start React application, React is using
JSX(Javascript with XML on it) standard and it is not a globally accepted standard, so
we are using Babel compiler browser.min.js and JavaScript code type should be
"text/babel"
<!DOCTYPE html>
<html lang="en">
<head>
<title>React JS</title>
<link rel="stylesheet" href="css/wall.css" />
<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="container"></div> Recent Posts
</body> Create a RESTful API using NodeJS and MySQL
<script type="text/babel"> Database
// React Code .... Activate Free SSL Certi cate for Your Website
</script>
Ionic 2 Mobile App using Angular 2 and TypeScript
</html> Tutorial
Install XAMPP 7.0 on Ubuntu and Mac OSx using

Redis and Memcached Extensions
Hello World
COMODO SSL Certi cate Installation with A+
React structure for printing value in HTML DOM. Rating
React Webpack Heroku Youtube Instant Search

<script type="text/babel">
Working with APIs Tutorial
ReactDOM.render(
Wall Comment System with React JS Part Two
<div>Hello World</div>,
document.getElementById('container') Social Network System with React JS Part One
); Angular JS Facebook Wall System with Multiple

</script> Bindings Tutorial
Hello World Component

React is all about components, here is the stucture for HelloWorld component.
Component name must start with capital letter.
var HelloWorld=React.createClass({
render: function(){
return(
<div>Hello World</div>
);
}
});
Srinivas Tamada
google.com/+SrinivasTamada
ReactDOM.render(
Blogger, Thinker and Entrepreneur
<HelloWorld/>,
document.getElementById('container') Ikuti
);
</script>
Getting started with Wall System - Step 1

Hope you like my previous post Angular JS Facebook Wall System with Multiple
Bindings, just follow the tutorial for HTML & CSS design for Wall System.
varWallContainer=React.createClass({
render: function(){
return(
<div id="wallContainer">
<h1>Social Network System with React JS Demo</h1>
<WallFeed/>
</div>
);
}
});
ReactDOM.render(
<WallContainer/>,
document.getElementById('container')
);
</script>
Create a main component called WallContainer , this is going to render within HTML
ID container . Included a new component called WallFeed
WallFeed Component
This component divided into two components WallFrom & WallUpdated .
varWallFeed=React.createClass({
render:function(){
return(
<div>
<WallForm/>
<WallUpdates />
</div>
);
}
});
WallForm
This contains wall update form operations.
varWallForm=React.createClass({
render:function(){
return(
<form >
<textarea></textarea>
<input type='submit' value='Post' id='wallPost'/>
</form>
);
}
});
WallUpdates
This component contains wall updates operation, follow the steps you will nd more
about this.
varWallUpdates=React.createClass({
render:function(){
return(
<div id="wallFeed">
//News Feed Uploads Loop
</div>
);
},
});
Include Jquery for Ajax Calls

You have to include Jquery library for ajax features to communicate with APIs or
server side operations.
<script src="build/jquery.min.js"></script>
<script src="build/ajaxPostReact.js"></script>
ajaxPostReact.js
Create a simple Jquery ajax function for reusability, this will minimize your code.
function ajaxPostReact(url, dataPost, reactThis, success)

{
$.ajax({
type:"POST",
url: url,
data:dataPost,
dataType:"json",
cache:false,
timeout:20000,
beforeSend :function(data) { }.bind(this),
success:function(data){success.call(this, data);}.bind(this),
error:function(data){}.bind(this)
});
}
Load User Updates Data to WallFeed Component

Now go to WallFeed component and include following functions. Here getInitialState
and componentDidMount are React builtin functions. Using getInitialState you can
initialize variables and componentDidMount is loads with component.
getInitialState: function(){
return {data: []};
},
updatesFromServer: function()
{
var dataPost='';
var reactThis=this;
ajaxPostReact('newsFeed.php',dataPost, reactThis, function(data){
reactThis.setState({data: data.updates});
});
},
componentDidMount: function()
{
this.updatesFromServer();
},
render: function(){
return(
<div>
<WallForm/>
<WallUpdates data={this.state.data}/>
</div>
);
}
});
updatesFromServer function is contains ajax operation to load user updates data,

using this.state assigning updates data to the WallUpdates component.
Read more about Create a RESTful services using Slim and Wall Database Design
JSON Response newsFeed.php

Following JSON data we need to render with WallUpdates component.
{
"updates": [
{
"user_id": "1",
"name": "Srinivas Tamada",
"profile_pic": "pic.png",
"update_id": "62",
"user_update": "The Wall Script http://www.thewallscript.com",
"created": "1464062121",
"comments": [
{
"com_id": "62",
"uid_fk": "80",
"comment": "Nice",
"created": "1468871427",
"like_count": "0",
"name": "Arun Shekar",
"profile_pic": "pic.jpg",
"timeAgo": "2016-07-18T21:50:27+02:00"
},
//Other Comments
]
},
//Other Udates
]
}
WallUpdates Rendering with User Updates Data

Now go to WallUpdates component and modify in following way, using this.props
calling the WallUpdates component state value.
var WallUpdates=React.createClass({
render: function(){
var updatesEach=this.props.data.map(function(update, index)
{
return(
<div className="feedBody" key={update.created}>
<img src={update.profile_pic} className="feedImg" />
<div className="feedText">
<b>{update.name}</b>
<a href="#" className="feedDelete">X</a>
{update.user_update}
</div>
//Comments Block
</div>
)
}, this);
return(
<div id="wallFeed">
{updatesEach}
</div>
);
},
});
Step 1 Demo
Step 2
WallForm
Using ndDOMNode focusing textarea box ref value updateInput .
varWallForm=React.createClass({
getInitialState: function(){
return { user_update: ''};
},
componentDidMount: function(){
ReactDOM.findDOMNode(this.refs.updateInput).focus();
},
render: function(){
return(
<form >
<textarea ref="updateInput" value={this.state.user_update}></textarea>
</form>
);
}
});
Getting Update Box Input Value

Write a function get the input state value using e.target.value . Set user_update value
using React.setState function.
updateChange: function(e){
this.setState({user_update: e.target.value });
}
onChange Input
Every input change triggers updateChange function.
<textarea ref="updateInput" value={this.state.user_update}

onChange={this.updateChange}></textarea>
Update Form Input Submit

Now include updateSubmit value to validate user input.
updateSubmit: function(e){
e.preventDefault();
var user_update= this.state.user_update.trim();
if(!user_update)
{
return;
}
else
{
console.log("Send user_update value to WallUpdates component");
this.setState({ user_update: ''});
}
}
Include about function at form onSubmit action.
<form onSubmit={this.updateSubmit} >

<textarea ref="updateInput"value={this.state.user_update}
onChange={this.updateChange}></textarea>
</form>
Step 2 Demo
Step 3
Back to WallFeed Component
Include updateAjaxSubmit for ajax operation.
updateAjaxSubmit: function(update)
{
var reactThis=this;
ajaxPostReact('updateFeed.php', update , reactThis, function(data){
var updates = reactThis.state.data;
var newUpdates = [data.updates[0]].concat(updates);
reactThis.setState({data: newUpdates});
});
},
render: function(){
}
});
Create an attribute onUpdateSubmit , call the updateAjaxSubmit function.
<WallForm onUpdateSubmit={this.updateAjaxSubmit}/>
updateFeed.php
JSON response for user update.
{
"updates": [
{
"user_id": "7",
"username": "rajesh",
"name": "Rajesh Tamada",
"profile_pic": "pic.png",
"update_id": "1470950004",
"user_update": "User update value",
"created": "1470950004",
"comments": []
}
]
}
WallForm Component
Now replace console.log with onUpdateSubmit , this will set user_update data to
WallUpdates component state.
updateSubmit: function(e){
e.preventDefault();
var user_update= this.state.user_update.trim();
if(!user_update)
{
return;
}
else
{
this.props.onUpdateSubmit({ user_update: user_update});
this.setState({ user_update: ''});
}
}
Step 3 Demo
Step 4
textToLink.js
Create a JavaScript function for ltering HTML tags and converting text to link using
regular expressions.
function textToLink(text)
{
var finalText=text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g,
'>').replace(/"/g, '"');
var urlPattern = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?
^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/gi;
var htmlData=finalText.replace(urlPattern, '<a target="_blank" href="$&">$&
</a>');
return htmlData;
}
Include this with in the HEAD tag
<script src="build/textToLink.js"></script>
Create a textToLinkHTML function in WallUpdates component.
var WallUpdates=React.createClass({
textToLinkHTML: function(content){
var finalContent=textToLink(content);
return {__html: finalContent}
},
render: function(){
var updatesEach=this.props.data.map(function(update, index)
{
return(
<div className="feedBody" key={update.created}>
<img src={update.profile_pic} className="feedImg" />
<div className="feedText">
<b>{update.name}</b>
<span dangerouslySetInnerHTML={this.textToLinkHTML(update.user_update)}
/>
</div>
//Comments Block
</div>
)
}, this);
return(
<div id="wallFeed">
{updatesEach}
</div>
);
},
});
Now replace {update.user_update} in following way.

{update.user_update}
to
<spandangerouslySetInnerHTML=
{this.textToLinkHTML(update.user_update)}/>
Step 4 Demo
Step 5 - Delete User Update
WallFeed Component
Create a delete update function, this will handle delete operation based on the
update_id
deleteUpdate: function(e)
{
var updateIndex=e.target.getAttribute('value');
var update_id=e.target.getAttribute('data');
var data='updateID='+update_id;
var reactThis=this;
ajaxPostReact('deleteUpdate.php', data , reactThis, function(data){
reactThis.state.data.splice(updateIndex,1);
reactThis.setState({data: reactThis.state.data});
});
}
Create an attribute deleteUpdate and assign deleteUpdate ajax function.
<WallUpdatesdata={this.state.data}/>
to
<WallUpdatesdata={this.state.data}deleteUpdate={this.deleteUpdate}/>
WallUpdates Component
Assign deleteUpdate function to X hyperlink onClick

to
<a href="#" className="feedDelete" value={index} data={update.update_id}
onClick={this.props.deleteUpdate} >X</a>
Step 5 Demo
Next Part:Wall System Comment System

with React JS Part Two
Was this article helpful?
Yes, thanks! Not really

Related Posts
Facebook Style Noti cation Popup using CSS and Jquery.
React Webpack Heroku Youtube Instant Search Working with APIs Tutorial
Wall Comment System with React JS Part Two
Angular JS Facebook Wall System with Multiple Bindings Tutorial
Ad Blocker Detector for Google Adsense with JavaScript
Install XAMPP 7.0 on Ubuntu and Mac OSx using Redis and Memcached Extensions
Google Two Factor Authentication Login with PHP
Create Token Based RESTful services using Slim PHP Framework
PHP Login System with PDO Connection.
Create a RESTful API using NodeJS and MySQL Database
12 comments:
IVARO AUGUST 16, 2016 AT 3:14 AM
vinikajce,
Reply
SEMAKULA AUGUST 16, 2016 AT 3:54 AM
in component wall feed method deleteUpdate
e.target.value failed to work i had to change it to e.target.getAttribute('data')
Reply
SIR_G AUGUST 16, 2016 AT 8:28 AM
Hello! Link to Part 2 doesn`t work

Reply
SRINIVAS TAMADA AUGUST 16, 2016 AT 3:29 PM
Replace
e.target.value
to
e.target.getAttribute('value')
Reply
THIAGO DOMENE ALBANEZ AUGUST 16, 2016 AT 4:33 PM
Perfect!!!
Reply
ONUR GULTEKIN AUGUST 17, 2016 AT 5:17 AM
zipped le is wrong. It downloads the angularWall.zip and contains angular.js les.

Reply
Replies
SRINIVAS TAMADA AUGUST 17, 2016 AT 11:02 AM
Download link xed.
Reply
RAVEENDRA KOTARI AUGUST 17, 2016 AT 6:52 AM
where can I get browser.min.js??

Reply
Replies
Check here https://babeljs.io/
Reply
S NOTE BLOGSPOT AUGUST 18, 2016 AT 3:45 AM
Why you include whole jQuery library for only ajax calls? This is waste of bytes
Reply
Replies
For cross browsing, if you want you can use vanilla js ajax function
http://www.9lessons.info/2015/09/vanilla-js-browser-default-java-script.html
Reply
SAM DIAS JANUARY 19, 2017 AT 2:56 AM
Very nice article. I am gonna try it now.
Reply
Enter your comment...
Commentas: Unknown(Google) Signout

Publish Preview Notifyme
Newer Post Home Older Post

38038043
2008-2017 9lessons.info Made in India. All rights reserved the content is copyrighted to Srinivas Tamada - Advertise

Social Network System With React JS Part One

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Social Network System With React JS Part One

Uploaded by

Copyright:

Available Formats

3.

040 Tweet Suka 23 rb Search

Adsby Google ReactJSLibrary SocialNetworkWebsite LogIn

Follow Me: Ikuti 7,4 rb Follow@9lessons 7,752followers SRINIVAS TAMADA

237 How to solve in nity loading

Login with Facebook and Twitter

Ajax Image Upload without Refreshing Page using

PHP Login Page Example.

Auto Load and Refresh Div every 10 Seconds with

Create a RESTful Services API in PHP.

Upload and Resize an Image with PHP

Login with Google Account OpenID

Pagination with jQuery, MySQL and PHP.

Pagination with Jquery, PHP , Ajax and MySQL.

jQuery Twitter API(new)

How to Start React Application

Install XAMPP 7.0 on Ubuntu and Mac OSx using

React Webpack Heroku Youtube Instant Search

); Angular JS Facebook Wall System with Multiple

Hello World Component

Getting started with Wall System - Step 1

Include Jquery for Ajax Calls

function ajaxPostReact(url, dataPost, reactThis, success)

Load User Updates Data to WallFeed Component

updatesFromServer function is contains ajax operation to load user updates data,

JSON Response newsFeed.php

WallUpdates Rendering with User Updates Data

Getting Update Box Input Value

<textarea ref="updateInput" value={this.state.user_update}

Update Form Input Submit

<form onSubmit={this.updateSubmit} >

Create an attribute onUpdateSubmit , call the updateAjaxSubmit function.

Include this with in the HEAD tag

Create a textToLinkHTML function in WallUpdates component.

Now replace {update.user_update} in following way.

Step 5 - Delete User Update

Create an attribute deleteUpdate and assign deleteUpdate ajax function.

<a href="#" className="feedDelete">X</a>

Next Part:Wall System Comment System

Yes, thanks! Not really

Facebook Style Noti cation Popup using CSS and Jquery.

Wall Comment System with React JS Part Two

Angular JS Facebook Wall System with Multiple Bindings Tutorial

Ad Blocker Detector for Google Adsense with JavaScript

Google Two Factor Authentication Login with PHP

Create Token Based RESTful services using Slim PHP Framework

PHP Login System with PDO Connection.

Create a RESTful API using NodeJS and MySQL Database

IVARO AUGUST 16, 2016 AT 3:14 AM

SEMAKULA AUGUST 16, 2016 AT 3:54 AM

in component wall feed method deleteUpdate

e.target.value failed to work i had to change it to e.target.getAttribute('data')

SIR_G AUGUST 16, 2016 AT 8:28 AM

Hello! Link to Part 2 doesn`t work

SRINIVAS TAMADA AUGUST 16, 2016 AT 3:29 PM

THIAGO DOMENE ALBANEZ AUGUST 16, 2016 AT 4:33 PM

ONUR GULTEKIN AUGUST 17, 2016 AT 5:17 AM

zipped le is wrong. It downloads the angularWall.zip and contains angular.js les.

SRINIVAS TAMADA AUGUST 17, 2016 AT 11:02 AM

Download link xed.

RAVEENDRA KOTARI AUGUST 17, 2016 AT 6:52 AM

where can I get browser.min.js??

SRINIVAS TAMADA AUGUST 17, 2016 AT 11:01 AM

Check here https://babeljs.io/