forgive me i've searched everywhere and I'm new in reactjs and trying out examples. I have an error
Uncaught ReferenceError: mountNode is not defined
I am following the example from here http://facebook.github.io/react/tips/initial-ajax.html
and my code looks like this
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/javascripts/reactjs/react.js"></script>
<script src="/javascripts/reactjs/JSXTransformer.js"></script>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<div id="example"></div>
<script src="/javascripts/reactjs/build/helloworld.js"></script>
<script type="text/jsx">
/** #jsx React.DOM */
var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
},
componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
},
render: function() {
return (
<div>
{this.state.username}last gist is
<a href={this.state.lastGistUrl}>here</a>.
</div>
);
}
});
React.renderComponent( <UserGist source="https://api.github.com/users/octocat/gists" />, mountNode );
</script>
</body>
</html>
Thank you in advance!
You need to tell React where to mount the <UserGist /> component. You probably want to replace mountNode with document.getElementById('example') to refer to your <div id="example"></div> element:
React.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
document.getElementById('example')
);
Being the accepted answer done, I'd like to add one thing: Don't forget to include references to all necessaries js's libs in your html head section if you are testing this out of "kit examples folder"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://npmcdn.com/react#15.3.1/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.3.1/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
Related
This question already has answers here:
ReactJs CreateClass is not a function
(7 answers)
Closed 5 years ago.
I am trying to render a component from other component, but failing miserable, Can someone please help me with code and help me understand what i am doing wrong?
Also, using the following example, can someone help me understand when to use type=text/jsx or type=text/babel?
<body>
<div class="container">
<h1>Flask React</h1>
<br>
<div id="content"></div>
</div>
<!-- scripts -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js"></script>
<script type="text/jsx">
/*** #jsx React.DOM */
var realPython = React.createClass({
render: function() {
return (<realPython1 />);
}
});
var realPython1 = React.createClass({
render: function() {
return (<h2>Greetings, from Real Python!</h2>);
}
});
ReactDOM.render(
React.createElement(realPython, null),
document.getElementById('content')
);
</script>
</body>
Hey man I did some refactoring on your code, maybe take a look at the react docs they are pretty awesome eitherway here's your code
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- scripts -->
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var RealPython = React.createClass({
render: function() {
return <RealPython1 />
}
});
var RealPython1 = React.createClass({
render: function() {
return <h2>Greetings, from Real Python!</h2>;
}
});
ReactDOM.render(
React.createElement(RealPython),
document.getElementById('content')
);
</script>
</body>
First you probably don't want to be using jstransform any longer, it has been deprecated: https://reactjs.org/blog/2015/06/12/deprecating-jstransform-and-react-tools.html
Instead you should use a transpiler like babel: https://babeljs.io/
Once you are transpiling your code then you just write javascript so you can just use script type "text/javascript" instead of either "text/jsx" or "text/babel".
Below is an example of how to render a component within a component.
class SubComponent extends React.Component {
render() {
return <div>
<h2>A cool sub-component</h2>
</div>;
}
}
class Application extends React.Component {
render() {
return <div>
<h2>Greetings, from Real Python!</h2>
<SubComponent />
</div>;
}
}
/*
* Render the above component into the div#app
*/
ReactDOM.render(<Application />, document.getElementById('app'));
<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>
<div id="app"></app>
I am expecting to see "Hi", but thought not getting any error, also nothing is being rendered on screen. Please, help!
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="div1"></div>
<script type="text/babel">
function myApp(){
return <h1>Hi</h1>;
}
var elem = (
<div>
<myApp />
</div>
);
ReactDOM.render(elem, document.getElementById('div1'));
</script>
</div>
</body>
</html>
You need to use MyApp instead of myApp.
Reason:
If a React Component name starts with a lowercase letter, nothing Renders, and you don't get any error message in the Browser console, because small letters are treated as HTML elements, its a rule that all React components must start with a upper case letter.
Check the working example:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="div1"></div>
<script type="text/babel">
function MyApp(){
return <h1>Hi</h1>;
}
var elem = (
<div>
<MyApp />
</div>
);
ReactDOM.render(elem, document.getElementById('div1'));
</script>
</div>
</body>
</html>
m of myApp must be uppercase.
Your code should be like this:
function MyApp(){
return <h1>Hi</h1>;
}
var elem = (
<div>
<MyApp />
</div>
);
I started in the React official tutorial but when I try to run the first example, it does not render or anything.
I'm running it in using Apache (Xampp htdocs). It doesn't show anything, even errors.
This question should've a duplicate but I can't find any. Also, I can't find any other tutorial that uses v0.14.3, I think, because those tutorials still imports JSXTransformer.js. I could be wrong.
So far this is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="../bower_components/react/react.js"></script>
<script src="../bower_components/react/react-dom.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
Hello, world! I am a CommentList.
</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 />
<CommentForm />
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
</script>
</body>
</html>
As you are using script type text/babel you should include babel to your app, you can include it for example from public cdn (add it after react-dom.js), like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
However better use tools like webpack or browserify
I'm trying to learn ReactJS. In this HelloWorld script
<!DOCTYPE html>
<html>
<head>
<title>React JS Hello World</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/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 type="text/jsx">
var data=[{name: "nthhtn", text: "Sample text"}];
var DataBlock = React.createClass({
render: function() {
var entry=this.props.data.map(function (entry){
return (
<h3 name={entry.name}>
{entry.text}
</h3>
);
});
return (
<div className="data" data={this.props.data}>
<h1>Sample data block</h1>
{entry}
</div>
);
}
});
React.render(
<DataBlock data={data}/>,
document.getElementById('content')
);
</script>
</body>
</html>
I don't know why when I run script in browser, the name field in data is not displayed, only the text field is
You pass the data to getInitialState() check this fiddle https://jsfiddle.net/bs65w2hs/
var data=[{name: "nthhtn", text: "Sample text"}];
var DataBlock = React.createClass({
getInitialState: function getInitialState() {
return {
reactdata: data[0]
};
},
render: function() {
var entrydata = this.state
return <div>
<ul>
<li>name: {entrydata.reactdata.name}</li>
<li>text: {entrydata.reactdata.text}</li>
</ul>
</div>
}
});
React.render(<DataBlock />, document.getElementById('container'));
This is because you are mixing things with same variable name "entry"
render: function() {
var entryBlock=this.props.data.map(function (entry){
return (
<h3 name={entry.name}>
{entry.text}
</h3>
);
});
return (
<div className="data" data={this.props.data}>
<h1>Sample data block</h1>
{entryBlock}
</div>
);
}
Change entry to entryBlock for example (see above code). If it's not that check that there is something in entry.text.
Hope it helps.
Im trying to create a simple page navigation program using backbone in eclipse. My page is ..when i click a button , it goes to a particular page(result). But it throws error
Uncaught TypeError: Cannot call method 'navigate' of undefined backbone-min.js:
<html>
<head>
<title>Button Click</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://twitter.github.com/hogan.js/builds/2.0.0/hogan-2.0.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></scr
<script src="http://twitter.github.com/hogan.js/builds/2.0.0/hogan-2.0.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
</head>
<body>
<script type="text/mustache" id="scriptemplate">
<input type="submit" class = "btn" value="Search">
</script>
<div id="search_container"></div>
<script type="text/javascript">
buttonview = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
var template = _.template( $("#scriptemplate").html(), {} );
// Load the compiled HTML into the Backbone "el"
this.$el.html( template );
},
events:{
"click input[type=submit]":"doSearch"
},
doSearch: function() {
console.log('click event reached');
var MyApp = new Backbone.Router();
MyApp.navigate('/result', {trigger: true});
}
});
var search_view = new buttonview({ el: $("#search_container") });
</script>
</body>
</html>
Two things to be done:
Change your version of Backbone.
http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js
Add this code here.
var MyApp = new Backbone.Router();
Backbone.history.start();
MyApp.navigate('/result', {trigger: true});
See it in document:
http://backbonejs.org/#Router