This question already has answers here:
what is the purpose of using demo or root
(4 answers)
Error: Target container is not a DOM element with React
(2 answers)
Closed 9 months ago.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/react#18.1.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script type="text/babel">
//app code
ReactDOM.render(
<h1 id = "my-heading">
Hello world!
</h1>,
document.getElementById('app')
)
</script>
</body>
</html>
Right now, I am trying to learn React, and according to the book I am reading, this should work. I am confused on why Babel isn't working the way I thought it would. If anyone could advise me, that would be great.
Thanks in advance
Related
This question already has answers here:
Uncaught SyntaxError: Unexpected token < with React
(4 answers)
Closed 5 hours ago.
I'M A NEW IN REACT AND FROM THE BEGINING I HAVE A BROBLEM ANYBODY CAN HELP ME PLEASE!
I'M JUST TRY THE HELLO WORD BUT DOESN'T WORKING
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<h1>ALLAH</h1>, document.getElementById("root"));
body {
margin:0;
min-height: 100vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Our React App</title>
<link rel="stylesheet" href="styles.css"/>
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<div id="root"></div>
<script src="..\src\index.js" type="text/JSX"></script>
</body>
</html>
Please, next time don't use CAPS on the question description.
The way you are doing is to add react to an existing project, is it what you really want? Or do you want do build a brand new full react application?
I would recommend for you to follow some react tutorial on youtube.
This is a working version of what you are trying to do:
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Our React App</title>
<link rel="stylesheet" href="styles.css" />
<!-- ##### AS YOU ARE STARTING TO LEARN, USE THE NEWER VERSION (18) #######-->
<script src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script src="..\src\index.js"></script> <!-- ##### REMOVED TYPE=TEXT/JSX ######-->
</body>
</html>
index.js
const root = ReactDOM.createRoot(document.getElementById("root"));
const el = React.createElement("h1", { className: "class1 class2", id: "identity" }, "ALLAH");
root.render(el);
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 9 months ago.
I want the div to be output in the console but I am getting 'null' in the console.
This is my HTML ->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="two_js.js"></script>
<title>:)</title>
</head>
<body>
<div id="main" class="container">
This is my HTML Body.
</div>
</body>
</html>
This is my JavaScript ->
let main = document.getElementById('main');
console.log(main);
What should I do?
Put your script tag inside and at the bottom of body tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>:)</title>
</head>
<body>
<div id="main" class="container">
This is my HTML Body.
</div>
<script src="two_js.js"></script>
</body>
</html>
This question already has answers here:
`string.replace` doesn’t change the variable [duplicate]
(4 answers)
Closed 12 months ago.
I have below code and i am trying to replace regex with another text but it is not working any suggestion what. i am doing wrong?
const regex = /\?/g;
let p = document.querySelectorAll('.test');
p.forEach((pa) => {
pa.style.color = 'red';
pa.innerHTML.replace(regex, 'test');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p class="test">This one was, hopefully, quite straightforward although? it did get a bit more complicated as a? previous exercise had created multiple paragraph tags on the page. It’s a good bit of string! manipulation practice too.Got your own solution for this?;</p>
</body>
<script src="app2.js"></script>
</html>
Like Ivar mentioned you need to set the innerhtml.
pa.innerHTML = pa.innerHTML.replace(regex, 'test');
const regex = /\?/g;
let p = document.querySelectorAll('.test');
p.forEach((pa) => {
pa.style.color = 'red';
pa.innerHTML = pa.innerHTML.replace(regex, 'test');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p class="test">This one was, hopefully, quite straightforward although? it did get a bit more complicated as a? previous exercise had created multiple paragraph tags on the page. It’s a good bit of string! manipulation practice too.Got your own solution for this?;</p>
</body>
<script src="app2.js"></script>
</html>
This question already has answers here:
JS function named `animate` doesn't work in Chrome, but works in IE
(3 answers)
Closed 1 year ago.
I am new to JS so please bear with me :)
below is the code but on clicking it does not trigger the function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button type="submit" onclick="evaluate()">Submit</button>
</body>
<script type="text/javascript">
function evaluate(){
document.write("Working");
};
</script>
</html>
evaluate() is a reserved function in JavaScript. Name your function something else.
The fact that the console error mentioned the need for two arguments was a clue that the function was defined somewhere already, and that your definition wasn't being considered.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button type="submit" onclick="notEvaluate()">Submit</button>
</body>
<script type="text/javascript">
function notEvaluate() {
document.write("Working");
};
</script>
</html>
Regarding document.write, see Why is document.write considered a "bad practice"?.
Try using a function name different than "evaluate" - evaluate is a reserved function name
I am doing Bucky Robert's (The New Boston) tutorial on React (hyperlink in the code below).
I'm stuck at the beginning, with just trying to install/load React with the tag instead of using local files. I get two error messages:
TypeError: t(...).Object is undefined[Learn More] browser.min.js:8:31612
SyntaxError: expected expression, got '<'[Learn More] test.html:19:24
I bet my problem is pretty basic, but I spent a lot of time trying to figure out what's going on.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--The tutorial that I'm trying to do https://www.youtube.com/watch?v=2NLgQMs2hOw&list=PL6gx4Cwl9DGBuKtLgPR_zWYnrwv-JllpA&index=2-->
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script>
ReactDOM.render(<h1>test2</h1>, document.getElementById('example'));
</script>
</body>
</html>
Basically, I just want to know what the non-buggy version of my code would be so I can do the tutorials.
Your script element doesn't contain regular JavaScript and you omitted the type attribute to show what it does contain.
After searching on the Internet and asking other people, here is what I found.
TypeError: t(...).Object is undefined[Learn More] browser.min.js:8:31612
This issue is related with tags I provided. I was able to solve the problem by using this instead:
<script src= "https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script src= "https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
SyntaxError: expected expression, got '<'[Learn More] test.html:19:24
As was pointed out: I was missing the "marking" of the code with
<script type="text/babel">
Here is the full code, without the two bugs I had:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--https://reactjs.org/docs/add-react-to-a-website.html-->
<script src= "https://unpkg.com/react#16/umd/react.production.min.js"> </script>
<script src= "https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(<h1>test2</h1>, document.getElementById('example'));
</script>
</body>
</html>