So I just got comfortable with ReactJS within a few and want to actually start creating things with it. Before starting to really get into coding it, I made a basic test to see if React is doing what it is supposed to, and it's not. It's not rendering at all, and I don't see any Syntax errors in the code.
<style> in the index file is just for test of course, I'll use Sass later in external files of course. What am I missing or doing wrong here? Thank you in advance.
var React = require('react');
var ReactDOM = require('react-dom');
var Box = React.createClass({
render: function () {
return (
<div>
<h1>React</h1>
<h1>React2</h1>
</div>
);
}
});
ReactDOM.render(<Box />, document.getElementById('app'));<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="app.js"></script>
<style>
body {
height: 100%;
width: 100%;
background-color: rebeccapurple;
}
#app {
height: 100px;
width: 100%;
background-color: rgba(255,255,255,0.1);
}
* {
margin: 0 auto;
padding: 0;
}
h1, h2 {
color: white;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
</html>Follow these steps it will work:
1. Remove these lines:
var React = require('react');
var ReactDOM = require('react-dom');
2. include the script after the div where you defined the id, like this:
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
3. Include the reference of babel, it required to transpile the JSX code into plain js code, include this reference in header:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
4. Define the type of the script, like this:
<script src="app.js" type='text/jsx'></script>
Check the working example:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type='text/jsx'>
var Box = React.createClass({
render: function () {
return (
<div>
<h1>React</h1>
<h1>React2</h1>
</div>
);
}
});
ReactDOM.render(<Box />, document.getElementById('app'));
</script>
</body>
</html>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments