Could someone please help in figuring out why nothing is loading into my HTML page using React? The error that appears is a SyntaxError at line 15 (an unexpected token).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Venos</title>
</head>
<body>
<div id="app">
<div id="react-app">
</div>
</div>
<script type="text/javascript">
var venosHeader = {
React.createElement('div', {class: 'randomBody'},
React.createElement('h2', {}, 'I love Cole...')
)
};
ReactDOM.render(venosHeader, document.getElementById('react-app'));
</script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
</body>
</html>
I'm still very new to React and I can't find a solution.
var venosHeader = {
React.createElement('div', {class: 'randomBody'},
React.createElement('h2', {}, 'I love Cole...')
)
};
This is not valid javascript.
Should be like this:
var venosHeader = React.createElement('div', {className: 'randomBody'},
React.createElement('h2', {}, 'I love Cole...')
);
Related
I'm new to react and I was just going through a tutorial. But when I write this piece of code here, there's an error saying "cannot read property 'purgeUnmountedComponents' of undefined". I'm trying to achieve a very basic first program. -
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>
<script type = "text/babel">
var HelloWorld = React.createClass({
render: function() {
return <div>
<h1>Hello</h1>
</div>;
}
});
ReactDOM.render(<HelloWorld />, document.getElementById('hey'));
</script>
<title>Make or break</title>
</head>
<body>
<div id="hey">
</div>
<!-- <h1>Hello bro</h1> -->
</body>
</html>
Has anyone else faced this? Thanks in advance!
Looks like bug at minificated version, as previous version is ok and non-mimified version is ok
I mean this
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
and this
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>
I am making a simple "Hello World" program in React.js. I am expecting "Hello World" to be printed in the body of the html.
index.html
<html>
<head>
<script src="http://fb.me/react-0.12.2.min.js"></script>
<script>
var HelloWorld = React.createClass({
render: function() {
return <div>Hello, world!</div>;
}
});
React.render(new HelloWorld(), document.body);
</script>
</head>
<body>
</body>
</html>
Error:
Uncaught SyntaxError: Unexpected token <
Can someone tell me where am I making a mistake?
Sol's answer covers why the simple hello app doesn't execute. The best practice on the latest React.js as of Jan 2017 is to import
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.min.js"></script>
and have the script type set to text/babel.
With this, you can execute JSX normally e.g.
class Greeting extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<p>Hello, Universe</p>
);
}
}
What you're missing is including something that transforms the JSX into JS. You need to include the JSXTransformer.js. Also notice the React.render doesn't use document.body, it should be a dom element. Here's an example that should work:
<!DOCTYPE html>
<html>
<head>
<title>My First React Example</title>
<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>
</head>
<body>
<div id="greeting-div"></div>
<script type="text/jsx">
var Greeting = React.createClass({
render: function() {
return (
<p>Hello, Universe</p>
)
}
});
React.render(
<Greeting/>,
document.getElementById('greeting-div')
);
</script>
</body>
</html>
i just thought that i would share my solution with everyone. I wanted to set up a simple project without all the npm, node guff, like the OP i was having problems, it took me three hours to figure out, below is my solution.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Boy</title>
<link rel="stylesheet" type="text/css" href="css/app.css">
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script type ="text/babel" src="js/app.js"></script>
</head>
<body>
<div id="root">Loading...</div>
</body>
</html>
The key is to include the appropriate script files from React and Babel. I am using an external app.js file, if you would like to do this then remember to include type ="text/babel".
Once done you can execute the hello world example from React. My app.js file:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
CSS file:
#root {
color: skyblue;
}
I hope this helps.
i am newbie to react.js and i was going through a tutorial to start with.
I tried both the jsx format and non jsx format code. however i am not getting the output displayed. I checked the console and no errors reported in chrome.
what am i missing here?
My code:
<!DOCTYPE html>
<head>
<meta charset = "UTF-8">
<title> React.js <title>
<script type="text/javascript" src = "http://fb.me/react-0.12.2.js"></script>
<script type="text/javascript" src = "http://fb.me/JSXTransformer-0.12.2.js"></script>
</head>
<body>
<script type="text/jsx">
/*var App = React.createClass(
{
render:function()
{
return <h1> Hello there </h1>
}
});
React.render(<App />, document.body);*/
</script>
<script>
var App = React.createClass(
{
render: function()
{
return React.DOM.h1(null,"Hi there")
}
});
React.render(App(), document.body);
</script>
</body>
</html>
You're not closing the title tag. This: <title> React.js <title> should be this: <title> React.js </title>. If you change that, the heading renders like it should.
I want to use the angular application ngSanitize to use plain HTML in my application. I basically want to reproduce the functionality explained here in the docs but I want to lazy-load the module with ocLazyLoad. But for some reason I still get the error Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context indicating that ngSanitize was not load properly.
Did I do something wrong or is this a bug?
Here a minified example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.js"></script>
<script src="ocLazyLoad.js"></script>
</head>
<body>
<div id="example" ng-app="LazyLoadTest" ng-controller="TestController">
<p ng-bind-html="myHTML"></p>
</div>
<script>
angular.module("LazyLoadTest", [ "oc.lazyLoad"])
.controller("TestController", function($scope, $ocLazyLoad, $compile){
$ocLazyLoad.load({
name: "ngSanitize",
files: ["angular-sanitize.js"],
serie: true
}).then(function () {
$scope.myHTML =
'I am an <code>HTML</code>string with ' +
'links! and other <em>stuff</em>';
}, function (e) {
console.log(e);
})
});
</script>
</body>
</html>
Here without using lazy loading:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.js"></script>
<script src="angular-sanitize.js"></script>
</head>
<body>
<div id="example" ng-app="LazyLoadTest" ng-controller="TestController">
<p ng-bind-html="myHTML"></p>
</div>
<script>
angular.module("LazyLoadTest", [ "ngSanitize"])
.controller("TestController", function($scope){
$scope.myHTML =
'I am an <code>HTML</code>string with ' +
'links! and other <em>stuff</em>';
});
</script>
</body>
</html>
See https://github.com/ocombe/ocLazyLoad/issues/176.
Apparently ngSanitizer is coupled too tightly into AngularJS to be lazy loaded.
Edit:
Note that this fact is now also mentioned in the FAQ.
I'm beginning to work with AngularJS and am having trouble working with a local copy of the angular.js file. Below is the sample I am trying to get to work. When I reference the CDN script, the page correctly displays 'Hello, World'. When I reference the local script, the binding does not occur. The browser is able to locate the local angular.js file, it just doesn't seem to perform the binding.
<html ng-app>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<!--<script src="Scripts/angular.js"></script>-->
<script>
function HelloController($scope) {
$scope.greeting = { text: "Hello" };
}
</script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
If I was starting out with 1.3.15 would do something like this:
<html ng-app="main.app">
<head>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script>
angular.module('main.app', [])
.controller('HelloController', function () {
var self = this;
this.greeting = { text: "Hello" };
})
</script>
</head>
<body ng-controller="HelloController as HelloCtrl">
<p>{{HelloCtrl.greeting.text}}, World</p>
</body>
</html>
This follows the latest styles of angular coding