I cannot seem to figure out what I shall do to correct the issue:
I always got no display on the browser, where I expect to see "Hello React".
Here is the HelloWorld code:
ReactDOM.render(Hello, React!,document.getElementById('root'));
You can use following code base to understand basic of React JS (have been used latest version react-15.0.0) -
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First React Example</title>
<!-- use this as script file "fb.me/react-15.0.0.js"
"fb.me/react-dom-15.0.0.js"
cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js" -->
</head>
<body>
<div id="greeting-div"></div>
<script type="text/babel">
var Greeting = React.createClass({
render: function() {
return ( <div>{this.props.children} </div>)
}
});
ReactDOM.render(
<div>
<Greeting>hello Aby</Greeting>
<h1>HELLO</h1>
</div>,
document.getElementById('greeting-div') );
</script>
</body>
</html>
check your example here, https://codesandbox.io/s/ElRmqWK5Y
what I will suggest download the react package and run your code there in the beginning, and what I think about your code is you should add react library first than react-dom.
there is a missing < body > in your code , try to add it and tell us if it works
So basically the problem is that you don't transpile your jsx. For your simple example what you can do if you don't want to configure transpiling 'explicitly' with some bundler you can add Babel library and change
<script type="text/jsx">
to
<script type="text/babel">
Let's have a look here, but please remember that jsfiddle uses babel behind (quite sure):
https://jsfiddle.net/69z2wepo/83023/
Also let me paste example from babel docs. Especially take a look for added babel lib + script type.
<div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>
Related
I'm sorry to ask such a specific question but I'm working on a simple tutorial which introduces React with the following HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Separate</title>
</script>
</head>
<body>
<h1>Hello Separate</h1>
<div id="app"></div>
</body>
</html>
And a script to create a <p> within the div id ="app" using ReactDOM
ReactDOM.render(
<p>Rendered by React</p>,
document.getElementById("app")
)
I've provided the code in a fiddle here:
I don't understand why I'm getting the error Uncaught SyntaxError: Unexpected token < but think it's coming from the ReactDOM.render function, can anyone provide insight? Thank you!
Two issues with your code,
First
Your scripts are not proper. As per docs, you should add these scripts,
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
Second
Might be you are writing your JS code in external JS file.
From the docs,
Now you can use JSX in any <script> tag by adding type="text/babel" attribute to it.
You need to add this script in your HTML file only,
<script type="text/babel">
ReactDOM.render(
<p>Rendered by React</p>,
document.getElementById("app")
)
</script>
Demo
As Emile Bergeron mentioned you're actually writing JSX, so you need 'build'
or transpile the code in regular JavaScript.
However if you're using just JSFiddle, they can transpile the code for you like this.
If you're working locally you can look into create-react-app as they mentioned or babel and webpack to build/bundle your files.
yes you might be right, you will might need to change: <p>Rendered by React</p> to either '<p>Rendered by React</p>' or "<p>Rendered by React</p>"
like this:
ReactDOM.render(
"<p>Rendered by React</p>",
document.getElementById("app")
)
you have to always enclose text or html in ".."
I'm building an App in a non-node environment but I want to make use of Babel's ES6 transpiling so that I can write somewhat nicer code and still support IE11.
So I went ahead and included the standalone file found here:
https://github.com/babel/babel/tree/master/packages/babel-standalone
But it seems like you also need an additional plugin to actually transpile arrow function syntax, but of course because I don't have access to the import/export module features I'm not sure if it is even possible to include these plugins.
Does anyone know a way around this?
As you have shown ZERO code in the question, and you're going on about setting this preset or that preset (blah blah blah), I can only assume you're doing something wrong
This HTML works in IE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Home</title>
<script src="https://unpkg.com/#babel/polyfill/browser.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="output"></div>
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>
</body>
</html>
How does it compare with what you are doing?
I am trying to reference a jsx file from my html, but the render function is not showing anything, and there aren't any errors in the console.
*Note - I changed the fb CDN links below as SO wouldn't allow them. The CDN links are not the issue.
My code looks like this:
HTML
<html>
<head>
<script src="https://f*b.me/react-0.14.6.js"></script>
<script src="https://f*b.me/react-dom-0.14.6.js"></script>
<script src="http://f*b.me/JSXTransformer-0.12.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div id="loggedin"></div>
</div>
<script type="text/babel" src="js/script.jsx"></script>
</body>
</html>
JSX
var App = React.createClass({
render: function() {
return(
<h1>Hello</h1>
)
}
});
ReactDOM.render(<App />, document.getElementById('loggedin'));
React uses babel to convert your jsx to js. So, add babel instead of JSXTransformer and save the file as .js not .jsx
Add this to your script
<script src="https://unpkg.com/babel-core#5.8.38/browser.min.js"></script>
Reference
I am beginning to learn React through a tutorial, however I ran into this error when I ran the code that I created.
The error seems to be one that has to do with the framework of the languages. Perhaps with the version of Babel that I imported for the translation.
Does anyone know the actual situation and how to find a soulution.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js"></script>
<title>ReactJs</title>
</head>
<body>
<script type="text/babel">
var HelloWorld = ReactDOM.createClass({
render: function() {
return <div>
<h1>Hello World</h1>
<p>This is some text></p>
</div>
}
});
ReactDOM.render(<HelloWorld/>, document.body);
</script>
</body>
</html>
I'm not sure if you have found the results yet, but I got the same error and found out it's the cdn version mismatch issues.
If you use these cdn's:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>
and change your
ReactDOM.render(<HelloWorld/>, document.body);
to
React.render(<HelloWorld/>, document.body);
it will work now.
babel-browser is deprecated. use babel-standalone https://github.com/babel/babel-standalone instead:
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
React.render has been deprecated since React 0.14 (released October 7, 2015):
https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html
I'd strongly recommend the awesome Create React App NPM module from Facebook, which creates React apps with no configuration, but still uses the latest ES6 and Babel features. Also it comes with hot reloading out of the box and has a build option, for creating a minified, bundled .js file ready for production.
https://github.com/facebookincubator/create-react-app
I'm trying to use React as part of a firefox addon I'm working on. React works fine as long as I don't use jsx. Babel isn't working - because I can't specify the type of the script I add.
I'm doing:
tabs.open({
url: 'index.html',
onReady: function( tab ){
var worker = tab.attach({
contentScriptFile: [
'./jquery-2.1.4.min.js',
'../node_modules/react/dist/react.js',
'../node_modules/react-dom/dist/react-dom.js',
'../node_modules/babel-preset-react/index.js',
'./js/main.js', // the file i need to specify as type: text/babel
],
});
}
);
Ideally I'd be able to set a type property on the './js/main.js' script, but the docs don't appear to have anything.
The trick is to load react, jquery, babel and your jsx directly in your html, as you usually do. The javascripts files that you'll have to load using the contentScriptFile param are those one that you need to load the logic to communicate with the addon main js file.
An example for a valid html will be:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="react-with-addons.js"></script>
<script src="react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<h1>Hello!</h1>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<p>Hello, world!</p>,
document.getElementById('example')
);
</script>
</body>
</html>
If you tell me what you need to do in that html/content script I can give you an example of how you can do to communicate it with the main script.