I am not getting hello world as an output. Can anyone tell me what i am missing , its a basic code , got an output in a different way using createElement function. I am new to react.
Code:
<!DOCTYPE html>
<html>
<head>
<title>My First App</title>
</head>
<body>
<div id="react-app"></div>
<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>
<script type="text/jsx">
class StoryBox extends React.Component{
render(){
return(<div> Hello World </div> );
}
}
var target= document.getElementById('react-app')
ReactDOM.render(<StoryBox>,target);
</script>
</body>
</html>
Do these changes:
1. Include babel standalone script to transform your jsx, put the cdn links in the head part, script:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
2. Instead of storyBox use StoryBox (capital S), check this answer for reason.
3. You forgot to close, here: <storyBox>, use this: <StoryBox />.
4. Instead of Div use div.
Check the working snippet:
<!DOCTYPE html>
<html>
<head>
<title>My First App</title>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
</head>
<body>
<div id="react-app"></div>
<script type="text/jsx">
class StoryBox extends React.Component{
render(){
return(<div> Hello World </div> );
}
}
var target= document.getElementById('react-app')
ReactDOM.render(<StoryBox/>,target)
</script>
</body>
</html>
You need to add babel as well, to transform your jsx into es5. Here is the sample code. NOTE: your cdn for react was throwing error so I have used other cdn.
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
P.S. If you want to try react using npm packages here is a simple github repository to start with.
You need to include a JSXTransformer in order to be able to execute raw JSX. Try running the code below:
<div id="react-app">
</div>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script type="text/jsx">
class StoryBox extends React.Component{
render(){
return(<div> Hello World </div> );
}
}
ReactDOM.render(<StoryBox />, document.getElementById('react-app'))
</script>
You need to add JSX self-closing tag /> - when there is no children.
replace this line:
ReactDOM.render(<StoryBox>,target)
to
ReactDOM.render(<StoryBox />,target)
See working code:
class StoryBox extends React.Component{
render(){
return(<div> Hello World </div>);
}
}
var target= document.getElementById('react-app')
ReactDOM.render(<StoryBox />,target)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="react-app"></div>
Related
I am new to React and would at the moment like to run everything using CDNs. It seems that similar questions to avoid the same error I am getting ("Uncaught SyntaxError: Unexpected token <") are solved by including ''. But that is not working in this example when I run this very basic React app. Does it not work because Babel cannot transcompile the script from this same file?
<!DOCTYPE html>
<html lang="en">
<head>
<body>
<meta charset="UTF-8">
<title>Title</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script>
<script type="text/babel"></script>
<div id="app"></div>
</head>
<body>
<script>
console.log('App.js is running!');
var Template = (
<div>
<h1>John</h1>
<p>Age: 26</p>
<p>Location: Philadelphia</p>
</div>
)
var AppRoot = document.getElementById('app')
ReactDOM.render(Template, AppRoot)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<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>
</head>
<body>
<div id='app'></div>
<script type='text/babel'>
console.log('App.js is running!');
class Template extends React.Component{
render(){
return(
<div>
<h1>John</h1>
<p>Age: 26</p>
<p>Location: Philadelphia</p>
</div>
)
}
}
//ReactDom function starting
var AppRoot = document.getElementById('app')
ReactDOM.render(<Template/>, AppRoot)
</script>
</body>
</html>
Use Reactjs version 16. Create class-based component then render it. Use this documentary for better understanding. Link
You have to add type='text/babel' to your script. I also recommend to use at least react 16 if you want to start learning. You might also want to make sure to use UMD versions of react and reactDOM to make sure they run in the browser.
<!DOCTYPE html>
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<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>
</head>
<body>
<div id='app'></div>
<script type='text/babel'>
console.log('App.js is running!');
var Template = (
<div>
<h1>John</h1>
<p>Age: 26</p>
<p>Location: Philadelphia</p>
</div>
)
var AppRoot = document.getElementById('app')
ReactDOM.render(Template, AppRoot)
</script>
</body>
</html>
I am trying to run a separate file with React.js code.
But when I am trying to run the file it does not work. The page is just a blank. If I do every in the HTML file in-line scripting it works just fine.
I want to have my html file like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React - Projekt</title>
<script src="../../js/react.min.js"></script>
<script src="../../js/react-dom.min.js"></script>
<script src="../../js/browser.min.js"></script>
<script src="../../js/albums.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel" src="script.js"></script>
</body>
</html>
and my js file:
var Albums = React.createClass({
render: function() {
return (
<div className="albums">
{this.state.albums.map(function(album, index) {
return (
<Album
album={album}
onClick={this.removeAlbum.bind(this, index)}
/>
)
}, this)}
</div>
)
}
});
// Rendera the shit innehåll
ReactDOM.render(
<Albums />,
document.getElementById("container")
);
Is there a way to make this work?
You need to load babel core Browser to load your script.js as text/babel
It will read your script.js and transform to JSX. Insert this after react-dom
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
I just started learning React and trying to get Render() to work.
I couldn't get the content to be added to my html page.
This is my index.html
<html>
<head>
<script async src="/bundle.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
and this is my main.js
import React from 'react';
import ReactDOM from 'react-dom';
class Layout extends React.Component{
render(){
return (
<h1>It works!</h1>
);
}
}
document.addEventListener('DOMContentLoaded', function() {
ReactDOM.render(<Layout />, document.getElementById('app'));
});
I have tried not using a js referenced code, but both do not work.
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(<h1>Hello World</h1>, document.getElementById('app'));
</script>
</body>
</html>
To render the dom you just need to put the script tag after the element you want to render on.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React app</title>
</head>
<body>
<div id="app"></div>
<script src="app.min.js"></script>
</body>
</html>
In main.js:
ReactDOM.render(<App />, document.getElementById('app'))
No need to put a event listener that way.
I am a newbie to ReactJS. I was trying yo render a simple div using ReactDOM but not able to do so. Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello React</title>
</head>
<body>
<div id="root">
</div>
<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>
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
Can anybody guide me as to why its happening ?
Note - I am using React 15.4.2 and Chrome version 57.
You need to add the transpiler babel to your project. you can adapt my example below to your needs.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
</script>
</body>
</html>
see another example that doesn't use babel
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
</head>
<body>
<div id="root"></div>
<script>
ReactDOM.render(React.createElement('h1', null, 'hello'), document.getElementById('root'));
</script>
</body>
</html>
You are attempting to use JSX without any transpiler (babel etc).
Try this instead:
ReactDOM.render(
React.createElement('hi', 'Hello, world!'),
document.getElementById('root')
);
Or add a script and type to handle JSX.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var GoodbyeWorld = React.createClass({
render: function() {
return (
<div>
GoodBye World
</div>
);
}
});
var HelloWorld = React.createClass({
render: function() {
return (
<div>
Hello World
<GoodbyeWorld />
</div>);
}
});
ReactDOM.render(
<HelloWorld />,
document.getElementById('example')
);
</script>
</body>
</html>
Output:
Hello World
GoodBye world
When I cut and paste my var GoodbyeWorld into an external javascript file(saved in the same folder called goodbye.js) and change my code to the following, I do not get the desired output:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script src="goodbye.js" type="text/babel"></script>
<script type="text/babel>
var HelloWorld = React.createClass({
render: function () {
return (
<div>
Hello World
<GoodbyeWorld />
</div>);
}
});
ReactDOM.render(<HelloWorld />, document.getElementById('example'));
</script>
</body>
</html>
Is there another way for my inline script that has react code to know that the code it has to call is in a external javascript?
Thank you
You have to expose the GoodbyeWorld var in the end of the goodbye.js file:
window.GoodbyeWorld = GoodbyeWorld;
It happens because browser babel transpiler uses the "use strict;", which enforces private scoping.
Anyway, babel browser and text/babel are just for testing purposes. I suggest using webpack with babel transpiler (to compile and bundle your js files before deploying or in the fly with "hot" reload) and the import/require pattern for modularity.