I get the following error while executing this piece of code -
Unreachable code after return statement.
<!DOCTYPE html>
<html>
<head>
<title>React Components</title>
</head>
<body>
<div id="react-container"></div>
<script type="text/babel">
var MyComponent = React.createClass({
render: function(){ return
<div>MyComponent</div>; }
});
React.render(<MyComponent/> ,document.getElementById('react-container'));
</script>
</body>
</html>
The problem was probably you are using newer version of babel(versions which comes after 6). Because i faced the same problem like you.Try using a version which is older like as follows,
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
JSX cannot be interpreted by browsers so you cannot do things like return <div>MyComponent</div> directly in an HTML page that you intend to render on a browser like this. You will need to transpile the JSX into ES5 using Babel before gicing it to the browser to interpret.
Related
React noob here, I am working on a simple JSX based component with the code below:
<!DOCTYPE html>
<html>
<head>
<title>React Boot camp Day 1</title>
</head>
<body>
<div id='app'></div>
<!--Needed for react code-->
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<!--Needed for react dom traversal-->
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src='https://unpkg.com/babel-standalone#6/babel.min.js'></script>
<script>
console.log('Test React', window.React)
const name = "Callat"
const handle = "#latimeks"
// create components and use jsx
function FirstComponent(props){
return <h1>{props.name}</h1>
}
function TestJSX(){
return (<FirstComponent name={name}/>)
}
ReactDOM.render(<TestJSX/>, document.getElementById('app'))
</script>
</body>
</html>
Running this code yields no UI and in dev tools I see this
Uncaught SyntaxError: Unexpected token < index.html:42
Which is the
function FirstComponent(props){
return <h1>{props.name}</h1>
}
What is wrong here? According to everything I've seen online and in the bootcamp instructions my syntax is correct and this should work.
Can anyone give some insight?
I found an answer to this. Including the CDN was only part of the fix. The second part is to include the following:
<script type="text/babel">//My react code</script>
Once that's done reloading the page works. I really should get more used to the native react ecosystem though.
I have the following react html page contents, and I would like to know the problems with this style of react development. Mainly I do not use any bundling tools. I am a newbie and finds this very easy for development and integration with server side languages.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First React Example</title>
</head>
<body>
<div id="greeting-div"></div>
<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
<script src="browser.min.js"></script>
<script>
</script>
<script type="text/babel">
class Greeting extends React.Component{
render() {
return (
<p id="test">Hello, Universe</p>
)
}
};
ReactDOM.render(
<Greeting/>,
document.getElementById('greeting-div')
);
</script>
</body>
</html>
You can't have hot reloading which is pretty awesome in React.
It will also scale awfully as you will have all your elements inside of the same html.
It will probably be bad to run a linter / any code analysis tool for it.
You should probably try create-react-app: https://github.com/facebookincubator/create-react-app, it's really simple to get started and you'll get a really good development setup.
This is my first react code to try react work in my laptop but it does not work
As you can see in the picture, the shadow ends before . The shadow must be covering all script tags. I do not know why!
<!DOCTYPE html>
<html>
<head>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.js"></script>
</head>
<body>
<div id = "dome"></div>
<script type='text/jsx'>
ReactDOM.render(<h1>Hello React </h1>,document.getElementById("dome");
</script>
</body>
</html>
JSX is not valid javascript, so it has to be transpiled first. this is why you get the error there. The source you mentioned is somewhat outdated, and is not the origin actually.
Just go with the actual tutorial here:
https://reactjs.org/tutorial/tutorial.html
Your code have a syntax error, bracket of render function is not closed.
ReactDOM.render(<h1>Hello React </h1>,document.getElementById("dome");
Use this:
ReactDOM.render(<h1>Hello React </h1>,document.getElementById("dome"));
Edit: If you want use JSX, you should use text/babel in script type and be sure to import browser.js file.
<script type='text/babel'>
ReactDOM.render(<h1>Hello React </h1>, document.getElementById("dome"));
</script>
just began to learn React and here are my very simple JSX and HTML files. I don't see any error in Console (Chrome) when I run it from my http-server. However the button Im expecting to see won't show in the browser. I'm not sure why it does not and what is missing.
Can anyone please help? Also why should we specify type=text/babel" in the tag? If I don't do this, I get an error (unexpected syntax <) in console.
Thanks!
Prem
HTML Code:
<html>
<head>
<title>
!My first React JS Component!
</title>
</head>
<body>
<div id="root"></div>
<script src="react.js"></script>
<script src="script.jsx" type="text/babel"></script>
</body>
</html>
my JSX File:
var Button = React.createClass({
render: function () {
return (
<button> Go! </button>
)
}
});
ReactDOM.render(<Button />, document.getElementById("root"));
You cannot just include the jsx in your site like that - it won't work :)
You need to transpile your jsx via a tool like Webpack.
The official documentation really is excellent and easy to understand, and it should explain how you setup a basic environment.
Also, there are dozens of tutorials on this, but here's a free one that I found helpful and easy to understand on youtube:
React + Redux + Webpack (Feel free to skip the redux part for a starter - really just a popular addon to React for managing state, which you can expand upon later)
For good measure, something like this should work:
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="app.jsx"></script>
</body>
</html>
App.jsx:
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('app')
);
I am only a few days into AngularJS, and have been having trouble trying to print out this simple message. I have 2 files, one is "index.html" and the other is "app.js". They are mind-numbingly simple:
<!--index.html:-->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Testing Angular</title>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="maryCtrl">
<p>{{mary}}</p>
</div>
</body>
</html>
<<!--end of index-->
//app.js:
var myApp = angular.module('myApp', []);
myApp.controller('maryCtrl', function ($scope) {
$scope.mary = 'had a little lamb.';
});
//end of app.js
The output on the page should be "had a little lamb." but I get "{{mary}}" instead. What really pisses me off is that I have a separate computer where it works just fine. I figure I must have a character wrong or am missing an extension, but I find that hard to believe since I just downloaded Visual Studio 2015 on this machine which has AngularJS and Angular-intellisense pre-loaded. Any help or criticism would be greatly appreciated.
you need a reference to the angular.js code.
make sure it is at the top of your script references.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
The link I provided is for a copy of the code that is hosted on a Google CDN. There are tons of benefits for using the CDN as opposed to having a local copy of angular.js on your computer (as long as you aren't trying to test your code offline).
You can find the CDN link on angularjs.org; Just click on the big blue download button and you will see options for obtaining the most recent version or legacy versions of angular.js
as #Pankaj Parkar commented, you should have angular.js file referenced before your app.js file:
<!--index.html:-->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Testing Angular</title>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="maryCtrl">
<p>{{mary}}</p>
</div>
</body>
</html>
<<!--end of index-->
//app.js:
var myApp = angular.module('myApp', []);
myApp.controller('maryCtrl', function ($scope) {
$scope.mary = 'had a little lamb.';
});
//end of app.js
you can download it from https://github.com/angular/angular.js