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.
Related
I have written a simple hello world code in ReactJS, but when I run the code, the browser displays nothing. There is not any error displayed on console. Please tell what can be the problem. I am using WebStrom compiler, Chrome as browser and Windows 8.1 is the OS.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First React App</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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="script.jsx" type="text/babel"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>
script.js
var MyComponent = React.createClass({
render :function() {
return(
<h2>Heading 2</h2>
);
}
});
React.render(
<MyComponent/>, document.getElementById('content')
);
project directory
browser display
It could be that your script.js should be script.jsx?
It's a babel issue you're running into. Try replacing JSXTransformer with the official babel package:
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
I'm following a guide in a book about creating React apps. This is the very first example in the book and I copied it exactly as it was, but the page won't render.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title> Pro MEAN Stack </title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js">
</script>
<script src=
"https://cdjns.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js">
</script>
<script src=
"https://cdjns.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js">
</script>
</head>
<body>
<div id="contents"></div> <!-- this is where the component will appear -->
<script type="text/babel">
var contentNode = document.getElementById('content');
var component = <h1> Hello World </h1>; // A simple JSX component
ReactDOM.render(component, contentNode); // Render the conponent
</script>
</body>
</html>
Here's what the console says,
react-dom.js Failed to load resource: net::ERR_NAME_NOT_RESOLVED
browser.min.js Failed to load resource: net::ERR_NAME_NOT_RESOLVED
I'm not sure what to do at this point. I've never worked with React before
You should update your cdn links to valid ones, use these:
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
contents => content
The preferred way to use react is with some kind of module bundler like webpack. If webpack seems like a hustle you could use create-react-app to have a full react application up and running in no time. it's great.
Fix the links to cdnjs, you misspell it. Also you are creating a div with id "contents", then you select an element with id "content".
The following example works:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>ReactJS Hello World</title>
<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="content"></div>
<script type="text/babel">
var contentNode = document.getElementById('content');
var component = <h1> Hello World </h1>; // A simple JSX component
ReactDOM.render(component, contentNode); // Render the conponent
</script>
</body>
</html>
References
Getting started with React the easy way | CodeUtopia
React without build steps - Babel Standalone
Actualize | Anyone Can Learn To Code
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...')
);
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'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