how to create a page with two reusable components and third "controller" component that will provide two-way communication with the first two.
Component 1 & 2 will be simple text boxes that will show the text value character count next to them. Component 3 will be a read-only textbox that will show the sum of the counts of 1&2.
Below is the code for the same.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="app.jsx"></script>
<meta charset="utf-8" />
</head>
<body>
<div id="container">
</div>
<div id="container2">
</div>
<input type="text" id="Final" name="finaltextbox"/>
<script type="text/babel">
var max_chars = 0;
var App =
React.createClass({
render: function() {
return (
<div> <TwitterInput /> </div>
);
}
});
var TwitterInput =
React.createClass({
getInitialState:
function() {
return {
chars_left: max_chars
};
},
handleChange(event) {
var input = event.target.value;
this.setState({
chars_left: input.length
});
},
render: function() {
return (
<div>
<textarea onChange={this.handleChange.bind(this)}></textarea>
<p> {this.state.chars_left}</p>
</div>
);
}
});
ReactDOM.render(
<App />,
document.getElementById('container')
);
ReactDOM.render(
<App />,
document.getElementById('container2')
);
</script>
</body>
</html>
Related
I am new to React JS The question is that I need to display all the fields from my database in this piece of code. I have been able to obtain all the data as objects in the browser console and I am able to view the last piece of data in the array in the browser but have not been able to view them. Please forgive me for the wrong format in the code as I am new to this.Thanks in advance.....
Output and Codes
Browser View:
Land of Toys Inc. is the name 131 is the ID
The JSON data :
{"posts":[
{"id":"103","name":"Atelier graphique"},
{"id":"112","name":"Signal Gift Stores"},
{"id":"114","name":"Australian Collectors, Co."},
{"id":"119","name":"La Rochelle Gifts"},
{"id":"121","name":"Baane Mini Imports"},
{"id":"124","name":"Mini Gifts Distributors Ltd."},
{"id":"125","name":"Havel & Zbyszek Co"},
{"id":"128","name":"Blauer See Auto, Co."},
{"id":"129","name":"Mini Wheels Co."},
{"id":"131","name":"Land of Toys Inc."}
]}
This data is obtained through a PHP code written as a plugin which is in the form of a url which is given in the JS code
http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json
My Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://npmcdn.com/react#15.3.0/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.3.0/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
<script src="https://npmcdn.com/jquery#3.1.0/dist/jquery.min.js"></script>
<script src="https://npmcdn.com/remarkable#1.6.2/dist/remarkable.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var UserGist = React.createClass({
getInitialState: function() {
return {
username:[],
companyID:[]
};
},
componentDidMount: function()
{
var rows = [];
this.serverRequest = $.get(this.props.source, function (result) {
for (var i=0; i < 10; i++)
{
var lastGist = result.posts[i];
//console.log(result.posts[i]);
this.setState({
username: lastGist.id,
companyID: lastGist.name
});
}
}.bind(this));
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function() {
return (
<li>{this.state.companyID} is the name {this.state.username} is the ID</li>
);
}
});
ReactDOM.render(
<UserGist source="http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json" />,
document.getElementById('content')
);
</script>
</body>
</html>
Use map to render your data. and store the json as a javascript object in the state itself instead of two seperate arrays.
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://npmcdn.com/react#15.3.0/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.3.0/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
<script src="https://npmcdn.com/jquery#3.1.0/dist/jquery.min.js"></script>
<script src="https://npmcdn.com/remarkable#1.6.2/dist/remarkable.min.js"></script>
<div id="content"></div>
<script type="text/babel">
var UserGist = React.createClass({
getInitialState: function() {
return {
data: [{"id":"103","name":"Atelier graphique"},
{"id":"112","name":"Signal Gift Stores"},
{"id":"114","name":"Australian Collectors, Co."},
{"id":"119","name":"La Rochelle Gifts"},
{"id":"121","name":"Baane Mini Imports"},
{"id":"124","name":"Mini Gifts Distributors Ltd."},
{"id":"125","name":"Havel & Zbyszek Co"},
{"id":"128","name":"Blauer See Auto, Co."},
{"id":"129","name":"Mini Wheels Co."},
{"id":"131","name":"Land of Toys Inc."}]
};
},
componentDidMount: function()
{
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function() {
return (
<div>
{this.state.data.map(function(item, index){
return <li>{item.name} is the company name, {item.id} is the ID</li>
})}</div>
);
}
});
ReactDOM.render(
<UserGist source="http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json" />,
document.getElementById('content')
);
</script>
</html>
JSFIDDLE
For the fiddle example I have deleted your $.get() code in componentDidMount.
P.S. Create the state array data as an array of object as shown in the
fiddle example
It will help you i think.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://npmcdn.com/react#15.3.0/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.3.0/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
<script src="https://npmcdn.com/jquery#3.1.0/dist/jquery.min.js"></script>
<script src="https://npmcdn.com/remarkable#1.6.2/dist/remarkable.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var UserGist = React.createClass({
getInitialState: function() {
return {
username:[],
companyID:[]
};
},
componentDidMount: function()
{
var rows = [];
this.serverRequest = $.get(this.props.source, function (result) {
var username = [];
var companyID = [];
for (var i=0; i < 10; i++)
{
var lastGist = result.posts[i];
//console.log(result.posts[i]);
username.push(lastGist.id);
companyID.push(lastGist.name);
}
this.setState({
username: username,
companyID: companyID,
});
}.bind(this));
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function() {
return (
<div>
{this.state.companyID.map(function(item, index){
return <li>{item} is the company name, {this.state.username[index]} is the ID</li>
})}</div>
);
}
});
ReactDOM.render(
<UserGist source="http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json" />,
document.getElementById('content')
);
</script>
</body>
</html>
I am very new to programming, and started doing exercises I found
I have been trying to build this exercise, but no I keep getting this error, help?
Uncaught Error: Parse Error: Line 16: XJS value should be either an expression or a quoted XJS text(…)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!-- DOCTYPE HTML -->
<html>
<head>
<title>Your First React Project</title>
</head>
<body>
<div id="content"></div>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfp1/t39.3284-6/12512166_196876483993243_981414082_n.js"></script>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfa1/t39.3284-6/12512184_1664789273772979_614489084_n.js"></script>
<script src="http://dragon.ak.fbcdn.net/hphotos-ak-xfp1/t39.3284-6/10734305_1719965068228170_722481775_n.js"></script>
<script type="text/jsx">
/*Add your React code here*/
var DATA = {
name: 'John Smith',
imgURL: 'http://lorempixel.com/100/100/',
hobbyList: ['coding', 'writing', 'skiing']
};
var App = React.createClass({
render: function(){
return (
<div>
<Profile name=this.props.profileData.name imgURL=this.props.profileData.imgURL/>
<Hobbies hobbyList=this.props.profileData.hobbyList/>
</div>
);
}
});
var Profile = React.createClass({
render: function(){
return(
<div>
<h3> {this.props.name} </h3>
<img src={this.source.imgURL} />
</div>
);
}
});
var Hobbies = React.createClass({
render: function(){
var hobbies = this.props.hobbyList.map(function(hobby,index) {
return (
<div>
<h5>My Hobbies:</h5>
<ul>{hobbies}</ul>
</div>
)
}
);
}
});
ReactDom.render(<App profileData={DATA}/>, document.getElementById('content'));
</script>
</body>
</html>
Okay, a couple of things:
You forgot the curly brackets around some props. So instead of <Profile name=this.props.profileData.name />, you want <Profile name={this.props.profileData.name} />. That was causing the error you've mentioned in the headline of this question.
Not sure why you've used this.source in the Profile component. That returns undefined. Instead, use the prop that you've already passed along (this.props.imgURL).
In the Hobbies component your iteration isn't 100% working. Try to only iterate the <li> elements (your hobbies) and then put them in the ul tag below.
I've fixed these parts of your code and hope that that will help. It's only small things, nothing major. Have fun!
var DATA = {
name: 'John Smith',
imgURL: 'http://lorempixel.com/100/100/',
hobbyList: ['coding', 'writing', 'skiing']
};
var App = React.createClass({
render: function(){
return (
<div>
<Profile name={this.props.profileData.name} imgURL={this.props.profileData.imgURL}/>
<Hobbies hobbyList={this.props.profileData.hobbyList}/>
</div>
);
}
});
var Profile = React.createClass({
render: function(){
return(
<div>
<h3>{this.props.name}</h3>
<img src={this.props.imgURL} />
</div>
);
}
});
var Hobbies = React.createClass({
render: function(){
var hobbies = this.props.hobbyList.map(function(hobby, index) {
return <li>{hobby}</li>;
});
return (
<div>
<h5>My Hobbies:</h5>
<ul>{hobbies}</ul>
</div>
);
}
});
ReactDOM.render(<App profileData={DATA}/>, document.getElementById('content'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
<div id="content"></div>
I Wrote A Peace Of Code Which If Works Expected To Get Profile Pic And User Name From GitHub API According To User Input. Console Also Not Showing Any Error.Can Any One Help Me Correct This Thanks In Advance .
This I What I Tried So Far
var Main = React.createClass({
getInitialState:function(){
return({
user:[]
});
},
addUser: function(loginToAdd) {
this.setState({user: this.state.logins.concat(loginToAdd)});
},
render: function() {
var abc = this.state.user.map(function(user){
return(
<Display user={user} key={user}/>
);
});
return (
<div>
<Form addUser={this.addUser}/>
{abc}
<hr />
</div>
)
}
});
var Form = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var loginInput = React.findDOMNode(this.refs.login);
this.props.addUser(loginInput.value);
loginInput.value = '';
},
render:function(){
return (
<div onSubmit={this.handleSubmit}>
<input type="text" placeholder="github login" ref="login"/>
<button>Add</button>
</div>
)
}
});
var Display = React.createClass({
getInitialState:function(){
return{};
},
componentDidMount:function(){
var component = this;
$.get("https://api.github.com/users/"+this.props.user,function(data){
component.setState(data);
});
},
render: function() {
return (
<div>
<img src={this.state.avatar_url} width="80"/>
<h1>{this.state.name}</h1>
</div>
)
}
});
ReactDOM.render(<Main />, document.getElementById("app"));
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React JS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div class="container">
<div id="app"></div>
</div>
<script src="demo.js" type="text/babel"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
</body>
</html>
JSBin Link
div do not have an onSubmit event form do however, fix that and you should be ok
I admit that I am a newbie in ReactJS but I am encountering a very weird issue. I am doing the first part of animations tutorial of react here https://facebook.github.io/react/docs/animation.html and I am always having a "Uncaught ReferenceError: require is not defined". Please help below is my whole code:
<html>
<head>
<meta charset="utf-8" />
<title>Django React Personal Project</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
var TodoList = React.createClass({
getInitialState: function() {
return {items: ['hello', 'world', 'click', 'me']};
},
handleAdd: function() {
var newItems =
this.state.items.concat([prompt('Enter some text')]);
this.setState({items: newItems});
},
handleRemove: function(i) {
var newItems = this.state.items;
newItems.splice(i, 1);
this.setState({items: newItems});
},
render: function() {
var items = this.state.items.map(function(item, i) {
return (
<div key={item} onClick={this.handleRemove.bind(this, i)}>
{item}
</div>
);
}.bind(this));
return (
<div>
<button onClick={this.handleAdd}>Add Item</button>
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
{items}
</ReactCSSTransitionGroup>
</div>
);
}
});
ReactDOM.render(
<TodoList />,
document.getElementById('content')
);
</script>
</body>
</html>
Use the react-with-addons bundle if you want to use the addons via <script> tags.
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
Currently, I try to integrate an AngularJS app with React.
I use the following library https://github.com/davidchang/ngReact
By using watch-depth, I expect React component will re-render itself, when AngularJS's scope data is changing.
My code looks like this
index.html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/ngReact/ngReact.min.js"></script>
<script src="build/commentbox.js"></script>
</head>
<body>
<script>
var app = angular.module('myApp', ['react']);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
setTimeout(function() {
alert('assign data! how to trigger react component?');
$scope.data = {data : [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is *another* comment"}
]};
}, 5000);
});
app.value('CommentBox', CommentBox);
</script>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
<react-component name="CommentBox" props="data" watch-depth="reference"/>
</div>
</body>
</html>
commentbox.js
// tutorial4.js
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
});
// tutorial10.js
var CommentList = React.createClass({
render: function() {
console.log("DEBUG");
console.log(this.props);
var commentNodes = this.props.data.map(function (comment) {
return (
<Comment author={comment.author}>
{comment.text}
</Comment>
);
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
// tutorial1.js
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.props.data} />
</div>
);
}
});
There's no difference, whether I'm using watch-depth="reference" or watch-depth="value". React component won't render itself, when value is assigned to $scope.data
Is there anything I had missed out?
Use $scope.data.push() to add new data and watch-depth="value"
It will re-render.