I have read some articles for beginners about ReactJs. The article I read showed only code fragments. I'm having trouble with my first component:
full code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
<meta charset="UTF-8">
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function () {
return React.DOM.h1("hello world!!");
}
});
React.renderComponent(
HelloWorld,
document.getElementById("content")
);
</script>
</body>
</html>
When I open the page I see embedded:11 Uncaught TypeError: React.renderComponent is not a function
Can anyone please point me in the right direction?
I've also tried this with no luck:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>-->
<meta charset="UTF-8">
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
</script>
</body>
</html>
The problem with your first example is that React.renderComponent is not a function, you need to use ReactDOM.render instead. You should save yourself a lot of effort now and just use create-react-app and use this application. It takes all of the pain out of the tooling that you will need to make React fast to use (webpack hot module reloading). It is extremely simple compared to the average tooling you will need to setup taking any other route and is made by the people that make React. I can tell by the version number of React that you are using, the tutorial you are going of of is very old, a very longtime before Facebook released create-react-app when things were more difficult.
If you are going to go about it inline, use this in your head -
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" integrity="sha256-M5lc1yUhpXlm2VZjGk4aoFwqR9H1OJ0p5MR5xpipulk=" crossorigin="anonymous"></script>
Full working example on React 15 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" integrity="sha256-M5lc1yUhpXlm2VZjGk4aoFwqR9H1OJ0p5MR5xpipulk=" crossorigin="anonymous"></script>
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script>
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
</script>
</body>
</html>
EDIT: I see that you use babel-core browser.js, which has been deprecated, remove it and use React directly.
Remove script type and replace everything with:
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
jsbin demo
Related
In React v15 I can easily do the following:
<html>
<head>
<meta charset="UTF-8">
<title>React v15</title>
</head>
<body>
<div id="divContainer"></div>
<script src="https://unpkg.com/react#15.6.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.6.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.min.js"></script>
<script type="text/jsx">
var HelloWorld = React.createClass({
render: function() {
return <h2>Hello World !</h2>;
}
});
ReactDOM.render(<HelloWorld />
, document.getElementById('divContainer')
)
</script>
</body>
</html>
Once I reference react#16, react-dom#16 it no longer works, I understand that React.createClass() has been deprecated and removed. So what is its replacement?
I need a minimalist way of doing the same without a build process e.g. browserify, webpack, require, import, etc. I just want to reference libraries via a CDN or locally as I have shown in the example.
After you include React 16 libs you can access the React instance directly and extend React.Component
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>React Hello World</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/jsx">
class MyApp extends React.Component {
render() {
return <span>Hello world</span>;
}
}
ReactDOM.render(<MyApp />, document.getElementById('app'));
</script>
</body>
</html>
I'm a React JS newbe. I have a very simple code which uses an alert in a function that is supposed to be triggered by an onClick. However, the event does NOT get triggered in Chrome (or any other browser). What am I missing? I've googled, and played around with the code, but just can't seem to figure it out.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React - Template</title>
<script crossorigin src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var Comment = React.createClass({
edit: function () {
alert('Editing comment');
},
remove: function () {
console.log("Removing");
alert('Removing comment');
},
render: function () {
return (
<div className="commentContainer">
<div className="commentText">{this.props.children}</div>
<button onclick={this.edit} className="button-primary">Edit</button>
<button onclick={this.remove} className="button-danger">Remove</button>
</div>
);
}
});
ReactDOM.render(
<div className="board">
<Comment title="Blah">Blah</Comment>
</div>
, document.getElementById('container'));
</script>
</body>
</html>
It's onClick, not onclick. See https://facebook.github.io/react/docs/handling-events.html
React events are named using camelCase, rather than lowercase.
My entire code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>React course</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Comment = React.createClass({
edit: function () {
alert('Editing comment');
},
remove: function () {
alert('Removing comment');
},
render: function() {
return (
<div className="commentContainer">
<div className="commentText">Text of whatever</div>
<button onClick={this.edit} class="btn-primary">Edit</button>
<button onClick={this.remove} class="btn-danger">Remove</button>
</div>
);
}
});
ReactDOM.render(
<div className="board">
<Comment>Heya</Comment>
</div>
,document.getElementById('container'));
</script>
</body>
When I refresh the page I see nothing. Then I inspect the element and I see the error that you see in the image but I do not really know what is going know since am new in react.
Hope you can help
I think it because you don't have an html element with an id of container. This section must reference a valid HTML element. document.getElementById('container'));
Try changing the id of example to container.
I tried running BackboneJS HelloWorld program, but I am getting a blank page.
Below is the program.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Hello World in Backbone.js</title>
</head>
<body>
<script src="JS/backbone.localStorage-min.js"></script>
<script src="JS/backbone-min.js"></script>
<script src="JS/jquery.min.js"></script>
<script src="JS/underscore-min.js"></script>
<script type="text/javascript">
var AppView = Backbone.View.extend({
el: '#container',
initialize: function () {
this.render();
},
render: function () {
this.$el.html("Hello World");
}
});
var appView = new AppView();
</script>
</body>
</html>
Note: Downloaded all the required libraries locally.
Link : http://adrianmejia.com/blog/2012/09/11/backbone-dot-js-for-absolute-beginners-getting-started/
You need to include Underscore library's inclusion before including your Backbone library. Please rearrange the <script> inclusions given below.
<script src="JS/jquery.min.js"></script>
<script src="JS/underscore-min.js"></script>
<script src="JS/backbone-min.js"></script>
<script src="JS/backbone.localStorage-min.js"></script>
Also the you need to place html element with an id container because you're referring it in your $el attribute. Hence include the below <div> tag inside your <body></body> tags,
<div id="container"></div>
Here is the working fiddle: https://jsfiddle.net/du2b8vfv/
Hope this helps!
you are changing the value of el in render but not giving the value of el in html code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Hello World in Backbone.js</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<div id="hh"></div>
<script type="text/javascript">
AppView = Backbone.View.extend({
initialize: function () {
},
render: function () {
this.$el.html("hello");
return this;
}
});
var appView = new AppView();
$("#hh").html(appView.render().el);
</script>
</body>
</html>
I'm learning backbone and I'm trying to execute this sample code to get the feel.
http://backbonetutorials.com/what-is-a-view/
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello-backbonejs</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script type="text/javascript">
Rocky = Backbone.Model.extend({
initialize: function(){
console.log('hello world');
}
});
</script>
</body>
</html>
I get this error.
Uncaught type error: Undefined is not a function!
What did I do wrong? I was just trying to print and see if it's printed on my console!
Thanks,
R
Your underscore.js version is too old. Try to use the new version (1.7):
<script src="http://underscorejs.org/underscore.js"></script>