I am a beginner in react. When I render elements with createElement, it works fine. But rendering like below with JSX, it throws and error saying Uncaught SyntaxError: Unexpected token <
const { createElement } = React;
const { render } = ReactDOM;
const style = {
fontFamily: 'Arial',
color: 'White',
backgroundColor: 'Red',
padding: '10px',
border: '10px solid black'
}
render(
<h1 id="emp-title" className="header" style={style}>Full time Employee</h1>,
document.getElementById('react-container-jsx')
);
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<title>React 101</title>
</head>
<body>
<div id="react-container-jsx"></div>
<script src="index.js"></script>
</body>
</html>
Attempts: tried but did not work
<script src="index.js" type = "text/babel"></script>
Also
<script src="index.js" type = "text/jsx"></script>
Didn't work. Any help is much appreciated.
You will need to link babel-standalone as well
And add type="text/babel" to the script tag.
Working snippet:
const { createElement } = React;
const { render } = ReactDOM;
const style = {
fontFamily: 'Arial',
color: 'White',
backgroundColor: 'Red',
padding: '10px',
border: '10px solid black'
}
render(
<h1 id="emp-title" className="header" style={style}>Full time Employee</h1>,
document.getElementById('react-container-jsx')
);
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.min.js"></script>
<title>React 101</title>
</head>
<body>
<div id="react-container-jsx"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
Related
why do some styles inside jsx (in case of a width) stop working, for example, the red color span seems broken and does not change to the width value to 100px, the green ones without jsx work correctly
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react#18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<div class="title test">df</div>
<div class="title test">dfwertds4</div>
<script type="text/babel">
function App() {
let arr = [
{ title: '12', text: 'text' },
{ title: '43', text: 'text' },
{ title: '23', text: 'text' },
{ title: '56w2345', text: 'text' },
{ title: '34234645436', text: 'text' },
{ title: '2344f', text: 'text' }
];
return (
<>
{arr.map((i, index) => {
return (
<div className="item" key={i.title}>
<span className="title" >
{i.title}
</span>
<span>{i.text}</span>
</div>
);
})}
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);
</script>
<style>
.title {
background: #e31937;
border-radius: 4px;
width: 100px;
height: 20px;
}
.test {
background: green;
}
</style>
</body>
</html>
Why is this happening?
And why, for example, background works correctly both inside jsx and without jsx
struggling with this simple example of React for 3 hours :C . The "mainDiv" works fine as it should, but i see no HELLO WORLD there.
here is the code:
<html>
<head>
<title>REACT</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="mainDiv" class="divstyle"></div>
<script type="text/babel">
let A = <div className="HW">HELLO WORLD!</div>;
let B = document.getElementById("mainDiv");
reactDOM.render(A,B);
</script>
<script src="https://unpkg.com/react#16.7.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/browse/babel-standalone#6.26.0/babel.min.js"></script>
</body>
======================= CSS =======================
.divstyle {
text-align: center;
background-color: #4285F4;
color: white;
height: 300px;
width: 100%;
font-size: 30px;
}
.HW {
text-align: center;
color: white;
}
Ok so here's some minor tweaks I made to get it working.
Put loading of Babel/React libs in the head tag
Use current, official Babel CDN, your one was giving me some issues in Chrome
Looks like you had a typo, you had reactDOM instead of ReactDOM
I tried this and it worked just fine:
<html>
<head>
<title>REACT</title>
<script src="https://unpkg.com/react#16.7.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="mainDiv" class="divstyle"></div>
<script type="text/babel">
let A = <div className="HW">HELLO WORLD!</div>;
let B = document.getElementById("mainDiv");
ReactDOM.render(A,B);
</script>
</body>
in file public/index.html
<html>
<head>
<title>REACT</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react#16.7.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/browse/babel-standalone#6.26.0/babel.min.js"></script>
</body>
in file index.js:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Index extends Component {
render() {
return (
<div className="HW">HELLO WORLD!</div>;
)
}
}
ReactDOM.render(<Index />, document.getElementById('root'));
I try to test functionality of getUserConfirmation. Code is following:
getUserConfirmation={(message, callback) => {
const container = document.createElement('div');
// callback(false);
document.body.append(container);
ReactDOM.render(
<div
style={{
width: '400px',
height: '400px',
backgroundColor: 'black',
zIndex: 1000,
}}
/>,
container,
console.log('Here'),
);
}}
>
Code reacts to my attempt to change url and callback (console.log('here')) works. But nothing appears in browser. What I do wrongly?
It works in this example:
const getUserConfirmation = (message, callback) => {
const container = document.createElement("div");
// callback(false);
document.body.append(container);
ReactDOM.render(
<div
style={{
width: "400px",
height: "400px",
backgroundColor: "black",
zIndex: 1000
}}
/>,
container,
console.log("Here")
);
};
getUserConfirmation();
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
</body>
</html>
However, what's the purpose of this?
Why not have a single and fixed "root div" in the html and pass this element to ReactDOM.render?
I added position: 'absolute' and now I can see my div. Before I it 'hided' under scripts tags. Lol
I am using reactJS to create a group of buttons.
However, I am unable to view the output (nothing comes on screen).
I have properly created a react class and rendered the HTML using babel. Here is the code. Please find where am I going wrong at this, why nothing gets printed on the screen.
I have imported the CDN of the required files.
react-min.js
react-dom.min.js
browser.min.js
babel.js
``
Main
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel = "stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<script src="browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<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>
<style>
#side{
position: fixed;
width:10%;
height:100%;
background-color: black;
border:2px solid black;
color:white;
z-index: -1;
}
#buttons{
position: fixed;
top:10%;
left:2%;
color:white;
}
</style>
<div id="side"></div>
<div id="buttons"></div>
<script type = "text/babel">
var side = React.createClass({
render:function(){
return
(
<div>
<div id="Profile">
<button class="btn btn-danger">Profile</button>
</div>
<div id="Maps">
<button class="btn btn-primary">Maps</button>
</div>
<div id="video">
<button class="btn btn-danger">Video</button>
</div>
</div>
);
}
});
ReactDOM.render(
<side />,
document.getElementById('buttons'));
</script>
React Component names should start with a capital letter.
Change
var side = React.createClass({
...
});
ReactDOM.render(
<side />,
document.getElementById('buttons')
);
To
var Side = React.createClass({
...
});
ReactDOM.render(
<Side />,
document.getElementById('buttons')
);
Refer official docs - components must be capitalized for more info.
Adding executable code for clarity
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<script src="browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<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>
<style>
#side {
position: fixed;
width: 10%;
height: 100%;
background-color: black;
border: 2px solid black;
color: white;
z-index: -1;
}
#buttons {
position: fixed;
top: 10%;
left: 2%;
color: white;
}
</style>
<div id="side"></div>
<div id="buttons"></div>
<script type="text/babel">
var Side = React.createClass({ render:function(){ return (
<div>
<div>Hello World</div>
<div id="Profile">
<button class="btn btn-danger">Profile</button>
</div>
<div id="Maps">
<button class="btn btn-primary">Maps</button>
</div>
<div id="video">
<button class="btn btn-danger">Video</button>
</div>
</div>
); } }); ReactDOM.render(
<Side />, document.getElementById('buttons'));
</script>
This is derived from my question here: Changing style on <body> element where the suggestion was to style a top level DIV. Having tried that I find that I get a different output using React compared to direct HTML. I am at a loss to understand why.
Consider a very simple react app consisting of a basic index.html file:
<!DOCTYPE HTML>
<html>
<head>
<style>
html { min-height: 100%; }
body { height: 100%; background-color: blue; margin: 0; }
</style>
</head>
<body>
<div id='root'></div>
<script src="https://fb . me / react-15.0.1.js"></script>
<script src="https://fb . me / react-dom-15.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="main.js" type="text/babel"></script>
</body>
</html>
and a corresponding main.js file
var TestDiv = React.createClass({
render: function () {
const style = {
divStyle: {
height: "100%",
background: "red"
}
}
return (
<div style={style.divStyle}>
<h1>Hello World</h1>
</div>
)
}
});
ReactDOM.render(<TestDiv/>, document.getElementById('root'));
Rendering this produces a blue screen with a red bar at the top with the text on. With the DIV set to a height of 100% I had expected the red background to fill the viewport.
Now, take the output from that React app (as given by Chrome Inspector) and create a simple html file from it.
<html>
<head>
<style>
html { min-height: 100%; }
body { height: 100%; background-color: blue; margin: 0; }
</style>
</head>
<body>
<div id="root">
<div data-reactroot="" style="height: 100%; background: red;">
<h1>Hello World</h1>
</div>
</div>
<script src="https://fb . me/react-15.0.1.js"></script>
<script src="https://fb . me/react-dom-15.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="main.js" type="text/babel"></script>
</body>
</html>
The code is essentially the same but this renders with the whole viewport in red and no blue at all.
Why?