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>
Related
This is my first project using React.js and I follow this steps for create a Hello World (https://facebook.github.io/react/docs/hello-world.html)
I import React.js in head tag but why my code doesn't works? index.html is just only blank page
index.html
<html>
<title>
My first project using React.js
</title>
<head>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
</head>
<body>
<div id="root">
</div>
<script>
ReactDOM.render(
<h1>Hello world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
Because you forgot to give the reference of babel, use this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
And specify the type of the script also type=text/babel.
Check the working code:
<!DOCTYPE html>
<html>
<title>
My first project using React.js
</title>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
</head>
<body>
<div id="root"/>
<script type='text/jsx'>
ReactDOM.render(
<h1>Hello world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
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 was just testing out angular and am wonder why nothing is showing up when I load up the page. I installed AngularJS through Package install already. Is there something wrong here?
HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="Journal.css">
<title>Henry's journal</title>
</head>
<body>
<div ng-app="journal">
<div header></div>
</div>
<div>
<script type="text/javascript" src="Journal.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type ="text/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">
</script>
</body>
</html>
JAVASCRIPT
var journal = angular.module("journal", []);
journal.directive("header", function(){
return{
restrict: 'A',
link: function(){
alert("I'm working");
},
template: "<div>Hello!</div>"
};
});
You need to load AngularJS and jQuery before running your own script. Like so:
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type ="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </script>
<script type="text/javascript" src="Journal.js"></script>
(Additionally, you might be running into a different issue if you are testing locally using the file:// protocol. I'm not sure, but just in case: you'll have to specify a HTTP[s] protocol to load AngularJS: http://ajax.googleapis.com... instead of //ajax.googleapis.com...)
you have to add ng-app in the first HTML tag.
<html ng-app>
<!-- ...head...body -->
</html>
Perhaps this is an easier version of your app:
<html ng-app="journal">
<script type ="text/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">
</script>
<title>jojo</title>
<div ng-controller="hola">
</div>
<script>
angular.module("journal", [])
.controller("hola", function($scope){
alert('HOLEAAA!');
})
</script>
</html>
Thanks.
I'm getting started with kendo & angular - free version - and I have a page that renders and behaves okay, but throws an error in the background.
I get an
"Uncaught TypeError: Cannot read property 'jQuery' of undefined" in /js/kendo.angular.min.js:16
I think I have a wrong dependency / am missing one, but I'm not sure which. The kendo scripts and css are from the core download page http://www.telerik.com/download/kendo-ui-core
Whats going on here?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kendo With Angular</title>
<link href="kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="kendo/styles/kendo.default.min.css" rel="stylesheet" />
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/angular.min.js"></script>
<script src="kendo/js/kendo.angular.min.js"></script>
<script src="kendo/js/kendo.ui.core.min.js"></script>
</head>
<body ng-app="KendoDemo">
<div ng-controller="Demo">
{{hello}}
<input kendo-date-picker k-ng-model="dateObject" />
{{date | date:'fullDate'}}
{{dateObject | date:'fullDate'}}
</div>
<script>
angular.module('KendoDemo',['kendo.directives'])
.controller('Demo', function($scope) {
$scope.hello = 'Hello World';
})
</script>
</body>
</html>
The kendo.ui.core.js script needs to go before the kendo.angular.js script:
proper script order
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/angular.min.js"></script>
<script src="kendo/js/kendo.ui.core.min.js"></script>
<script src="kendo/js/kendo.angular.min.js"></script>
I am new to angular.js and have a problem. Please help me resolve it.
I have created a simple screen using a controller and a module in my example.
But it doesnt work. I have presented the example as follows :
My html file is :-
<!doctype html>
<html ng-app="ayan">
<head>
<script type="text/javascript" src="hotel_listing_angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div ng-controller="myController">
<ul>
<li ng-repeat="contact in htlList">
{{ contact.name }}
</li>
</ul>
</div>
</body>
</html>
and my js file is as follows :-
var ayan=angular.module('ayan',[]);
ayan.controller('myController',function ($scope) {
$scope.htlList = [
{name:"Picard", description:"Captain"},
{name:"Santosh", description:"Programmer"},
{name:"Amit", description:"Manager"}
];
});
Please tell me what am I doing wrong.
You need to include
<script type="text/javascript" src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
before
<script type="text/javascript" src="hotel_listing_angular.js"></script>
Try calling
<script type="text/javascript" src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
before calling
<script type="text/javascript" src="hotel_listing_angular.js"></script>