I have this simple code to test if react works but for whatever reason it does not render anything.
I've no idea what the problem is.
<!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 crossorigin src="https://unpkg.com/react#17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.production.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type = "text/babel">
ReactDOM.render(<p>'test'</p>, document.getElementById("root"));
</script>
</body>
</html>
If you want to use babel in the browser you need to load it.
Add the following script just before the react one.
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
Please refer to the documentation https://babeljs.io/docs/en/babel-standalone
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);
Below is my html and index.js code. I can't seem to find the mistake as right now nothing is rendering on my html page.
<!DOCTYPE html>
<html>
<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>
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
index.js
ReactDOM.render(<h1>Hello</h1>, document.getElementById("root"))
You need the babel standalone link as well for this to work.
Add this just above your index.js import in your html file:
<script
src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"
integrity="sha512-kp7YHLxuJDJcOzStgd6vtpxr4ZU9kjn77e6dBsivSz+pUuAuMlE2UTdKB7jjsWT84qbS8kdCWHPETnP/ctrFsA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
Change your index.js to this:
import { createRoot } from "https://cdn.skypack.dev/react-dom#17.0.1"
createRoot(document.getElementById('root')).render(<h1>Hello</h1>)
Can anyone please help me to understand why I'm not able to append the HTML head to index.htm from an external file(header.htm)?
I'm using the following codes:
Index.htm:
<!DOCTYPE html>
<html lang="en">
<head id="head">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<script>
//window.location.replace('./Components/header.htm');
$.get("./Components/header.htm", function(data) {
//alert(1);
$("head").append(data);
});
</script>
</html>
header.htm:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SAM Store</title>
<link rel="icon" href="./Static/Final-JPEG.jpg">
I'm able to successfully redirect from index.htm to header.htm
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>
Hi I am trying to build the "get started" application from the threejs website. https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene
I made a html like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>BIM Demo</title>
<script>"/js/three.min.js"</script>
<script type="module" src="./js/view.js"></script>
</head>
<body>
<h1>BIM DEMO</h1>
</body>
</html>
I specified my view.js as a module since I want to be able to use the import statement to import my typescript files, but when I try to show my application in the browser I get the message THREE not found.
I tried adding it with yarn but it does not work.
This is my structure
Your three.min.js file is wrongly included. Your HTML should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>BIM Demo</title>
<script type="text/javascript" src="./js/three.min.js"></script>
<script type="text/javascript" src="./js/view.js"></script>
</head>
<body>
<h1>BIM DEMO</h1>
</body>
</html>