My current index.html and is stuck at externalise json file:
<html>
<head>
<title>Hello React</title>
<script src="https://fb.me/react-0.13.2.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.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/jsx">
var Comment = React.createClass({
render: function(){
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
<span dangerouslySetInnerHTML={{__html:marked(this.props.children.toString(), {sanitize:true})}} />
</div>
);
}
});
var CommentList = React.createClass({
render: function(){
return (
<div className="commentList">
{
this.props.data.map(function (comment) {
return(
<Comment author={comment.author}>
{comment.text}
</Comment>
);
})
}
</div>
);
}
});
var CommentForm = React.createClass({
render: function(){
return (
<div className="commentForm">
Hello, world! I am a CommentForm
</div>
);
}
});
var CommentBox = React.createClass({
render: function(){
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.props.data} />
<CommentForm />
</div>
);
}
});
React.render(
<CommentBox url="comments.json" />,
document.getElementById('content')
);
</script>
</body>
</html>
comments.json file
{"data": [
{"author": "Pete Hunt", "text": "This is one comment"},
{"author": "Jordan Walke", "text": "This is *another* comment"}
]
}
Console is complaining about this.props.data is undefined, looking at the server access log, it's not loading the comments.json file
You're missing the code that loads the comments. If you scroll down a bit in the tutorial, you'll see you can add this code to your comments box component:
var CommentBox = React.createClass({
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm />
</div>
);
}
});
Related
I am an absolute beginner and I am doing a tutorial and I have made an error that I can not find. I have gone through the code matching it to the instructors, but I simply can not find the error.
embedded:29 Uncaught TypeError: Cannot read property 'todos' of null.
When I inspect the page It says that the problem is the ')' is in the following block. With the last parentheses.
<html>
<head>
<title>REACT IS FUN</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="react-15.1.0.js"></script>
<script src="/react-dom-15.1.0.js"></script>
<script src="cdnjs.cloudflare.com/ajax/libs/babel- core/5.8.23/browser.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="app"></div>
</div>
</div>
</div>
<script type="text/babel">
var App = React.createClass({
GetInitialSate: function(){
return{
text: '',
todos: [
{
id: 1,
name: 'Meeting at Work'
},
{
id: 2,
name: 'Eat Lunch with babe'
},
{
id: 3,
name: 'Tap that'
}
]
}
},
render: function(){
return(
<div>
<TodoForm />
<TodoList todos={this.state.todos} />
</div>
)
}
});
var TodoForm = React.createClass({
render: function(){
return(
<div>
TODOFORM
</div>
)
}
});
var TodoList = React.createClass({
render: function(){
return(
<ul>
{
this.props.todos.map(todo => {
return <li todo={todo} key={todo.id}>{todo.name}</li>
})
}
</ul>
)
}
});
ReactDOM.render(
<App />,
document.getElementById('app')
);
</script>
</body>
</html>
A small error could be the cause of you error.
You have initialised state variable using GetInitialState(). It should be getInitialState()
<html>
<head>
<title>REACT IS FUN</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="react-15.1.0.js"></script>
<script src="/react-dom-15.1.0.js"></script>
<script src="cdnjs.cloudflare.com/ajax/libs/babel- core/5.8.23/browser.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="app"></div>
</div>
</div>
</div>
<script type="text/babel">
var App = React.createClass({
getInitialState: function(){
return{
text: '',
todos: [
{
id: 1,
name: 'Meeting at Work'
},
{
id: 2,
name: 'Eat Lunch with babe'
},
{
id: 3,
name: 'Tap that'
}
]
}
},
render: function(){
return(
<div>
<TodoForm />
<TodoList todos={this.state.todos} />
</div>
)
}
});
var TodoForm = React.createClass({
render: function(){
return(
<div>
TODOFORM
</div>
)
}
});
var TodoList = React.createClass({
render: function(){
return(
<ul>
{
this.props.todos.map(todo => {
return <li todo={todo} key={todo.id}>{todo.name}</li>
})
}
</ul>
)
}
});
ReactDOM.render(
<App />,
document.getElementById('app')
);
</script>
</body>
</html>
JSFIDDLE:
It should work for you.
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;
I am trying to call xml2json from react. I tried this code http://plnkr.co/edit/ETYguAH2ZS3ePkiGndyD?p=preview. I basically want to call the getVersion function from the xml2json file. I know I am doing something wrong, and I won't pretend I know what I'm doing. So which is the right way?
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="xml2json.js"></script>
<body>
<div id="root"></div>
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script type="text/jsx">
var Card = React.createClass({
getInitialState: function() {
return {};
},
componentDidMount: function() {
var component = this;
$.get("http://www.w3schools.com/xml/note.xml", function(data){
component.setState(data);
})
},
render: function() {
return (
<div>
...
<h3>{this.getVersion()}</h3>
<hr/>
</div>
);
}
});
var Main = React.createClass({
render: function() {
return (
<div>
<Card login="andreicvasniuc27"/>
</div>
)
}
})
React.render(<Main />, document.getElementById("root"));
</script>
Thanks
Your render function should look more like this. In xm2json.js you declare a global variable var x2js = new X2JS();. You can access this object and its methods from your render function.
render: function() {
return (
<div>
...
<h3>{x2js.getVersion()}</h3>
<hr/>
</div>
);
}
http://plnkr.co/edit/B70pQakkRCkzvGty7PLh?p=preview
I'm following the tutorial at:
http://facebook.github.io/react/docs/tutorial.html
I get the following error in the Firefox developer tools console:
SyntaxError: expected expression, got '<' tutorial.js:4:3
The browser window does not show anything. I am under the impression from the tutorial that I should be seeing the information given in the data array at the bottom of the JS file. I am opening the index.html file as a local file (not running a server). Why won't this work?
My project is as follows:
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
});
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.props.data} />
<CommentForm />
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function(comment) {
return (
<Comment author={comment.author}>
{comment.text}
</Comment>
);
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});
React.render(
<CommentBox data={data} />,
document.getElementById("content")
);
var data = [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is another comment"}
];
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<script src="scripts/tutorial.js"></script>
</body>
</html>
You need to add type="text/jsx" to your script element for tutorial.js.
<script type="text/jsx" src="scripts/tutorial.js"></script>
Update
For the TypeError, that's because you declared your data after you had already tried to render. Swap the order of these two lines:
React.render(
<CommentBox data={data} />,
document.getElementById("content")
);
var data = [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is another comment"}
];
to this:
var data = [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is another comment"}
];
React.render(
<CommentBox data={data} />,
document.getElementById("content")
);
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.