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);
Related
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>)
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
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
I am using react application.. The third party css and js files currently loaded into index.html, But my problem is when any changes updated in thrid party css/js files it;s not reflecting..
So I need to add cache busing to css and js files..
index.html
<!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" />
<title>test</title>
<link href="https://abcd.css?v=1" rel="stylesheet" type="text/css">
<link href="https://efgh.css?v=1" rel="stylesheet" type="text/css">
<script src="https://abcd.js?v=1"></script>
<script src="https://efgh.js?v=1"></script>
</head>
<body class="test">
<div id="root"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</html>
Shall I remove the version(?v=1) ?
Or Shall i load all css/js files via js, there adding version based on time?
I am not sure which is the best method. Can you please suggest me..
App.js (sample)
import React from 'react';
import './App.css';
const App = () => {
return (
<div className="react-app">
content.....
</div>
);
};
export default App;
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>