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>)
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);
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
So I've been learning React and I'm trying to add it to a webpage that I'm working on. But whenever I try to use React or JSX code, nothing happens. The browser doesn't even acknowledge it. Here's my index.html and index.js code.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Experimental Website</title>
<!-- CSS file link -->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Hello world!</h1>
<h2 id="test"></h2>
<!-- React.js CDN links -->
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<!-- Babel (remove later) -->
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<!-- JavaScript file link -->
<src type="text/babel" src="index.js"></src>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react';
let testVariable = <h2>Help me</h2>;
ReactDOM.render(
testVariable,
document.getElementById("test")
);
What am I doing wrong? Why won't React run in the browser?
This worked.
// index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Experimental Website</title>
<!-- CSS file link -->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Hello world!</h1>
<div id="test"></div>
<!-- React.js CDN links -->
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<!-- Babel (remove later) -->
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<!-- JavaScript file link -->
<!-- you had <src> here -->
<script type="text/babel" src="index.js"></script>
</body>
</html>
and,
// index.js
let testVariable = <h2>Help me</h2>;
ReactDOM.render(testVariable, document.getElementById('test'))
So, you had <src> instead of <script> and you were also using imports without modules. Linking the library injects a global React and ReactDOM object, so you're good to go there.
Happy coding!
so i am trying to get practice using import and export with javascript. i keep getting errors, "Uncaught SyntaxError: Unexpected token 'export'" and "Uncaught SyntaxError: Cannot use import statement outside a module" its just a simple alert function i am exporting from page1 and importing to main.
HTML:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>module</title>
<link rel= "stylesheet" href="styleSheets/main.css">
<script src= "JS/jquery.js"></script>
<script src= "JS/main.js"></script>
<script src= "JS/page1.js"></script>
</head>
<body>
</body>
</html>
JS/page1:
export function myAlert() {
alert("My Import/Export worked");
}
JS/main:
import {myAlert} from "./page1"
window.onload = myAlert;
You should:
Use import {myAlert} from "./page1.js" (include .js in path)
No need to include <script src= "JS/page1.js"></script> in your HTML
Use type="module" on module script tag (<script src="main.js" type="module"></script>)
Codes:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>module</title>
<script src="JS/main.js" type="module"></script>
</head>
<body>
</body>
</html>
JS/page1.js:
export function myAlert() {
alert("My Import/Export worked");
}
JS/main.js:
import {myAlert} from "./page1.js"
window.onload = myAlert;
If you use babel standalone version this is the way: https://babeljs.io/setup#installation
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>module</title>
<link rel= "stylesheet" href="styleSheets/main.css">
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script text="text/babel">
// Your js code will be here
</script>
<script src= "JS/jquery.js"></script>
<script src= "JS/main.js"></script>
<script src= "JS/page1.js"></script>
</head>
<body>
</body>
</html>
You will use your code with https://babeljs.io/docs/en/babel-core#transform
babel.transform(code: string, options?: Object, callback: Function)
But this is a very inconvenient way of using babel, so I recommend you to use it with a bundler such as Webpack and install babel with npm install, so all these details will be handled by webpack: https://webpack.js.org/
I am trying to run my first React code but when I refresh the page nothing shows.
This is how my HTML looks like:
<!DOCTYPE html>
<html>
<head>
<title>React course</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(<h1>Hi, my name is Sidney</h1>, document.getElementById('example'));
</script>
</body>
</html>
Anything that I am possibly doing?
AS i found on the #stackoverflow, you have a problem with your version of babel. Look at this demo, uses a previous version of babel
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(<h1 key="0.01">Hi, my name is Sidney</h1>, document.getElementById('example'));
</script>
You need this version of Babel to transpile your JSX code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>