Escolar Documentos
Profissional Documentos
Cultura Documentos
TUTORIALS JAVASCRIPT PHP HTML ANGULAR REACT JQUERY DEMOS SOCIAL NETWORKING SCRIPT SOCIAL LOGIN REQUEST TUTORIAL
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
Categories
Facebook J2EE
Download Script Live Demo
Database HTML5
<!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
<script type="text/babel">
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>
<script type="text/babel">
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>
);
},
});
<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.
varWallFeed=React.createClass({
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>
);
}
});
Read more about Create a RESTful services using Slim and Wall Database Design
{
"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
]
}
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>
<input type='submit' value='Post' id='wallPost'/>
</form>
);
}
});
updateChange: function(e){
this.setState({user_update: e.target.value });
}
onChange Input
Every input change triggers updateChange function.
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.
Step 2 Demo
Step 3
Back to WallFeed Component
Include updateAjaxSubmit for ajax operation.
varWallFeed=React.createClass({
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(){
}
});
<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;
}
<script src="build/textToLink.js"></script>
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>
<a href="#" className="feedDelete">X</a>
<span dangerouslySetInnerHTML={this.textToLinkHTML(update.user_update)}
/>
</div>
//Comments Block
</div>
)
}, this);
return(
<div id="wallFeed">
{updatesEach}
</div>
);
},
});
Step 4 Demo
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});
});
}
<WallUpdatesdata={this.state.data}/>
to
<WallUpdatesdata={this.state.data}deleteUpdate={this.deleteUpdate}/>
WallUpdates Component
Assign deleteUpdate function to X hyperlink onClick
Step 5 Demo
React Webpack Heroku Youtube Instant Search Working with APIs Tutorial
Install XAMPP 7.0 on Ubuntu and Mac OSx using Redis and Memcached Extensions
12 comments:
vinikajce,
Reply
Reply
Replace
e.target.value
to
e.target.getAttribute('value')
Reply
Perfect!!!
Reply
Reply
Replies
Reply
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
Reply
Publish Preview Notifyme
2008-2017 9lessons.info Made in India. All rights reserved the content is copyrighted to Srinivas Tamada - Advertise