I am a newbie of ReactJS and is learning it through a Hello World example as shown below:
abc.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="abc.js"/>
</body>
</html>
abc.js
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
I expect Hello, world should be shown, but instead, an empty page is rendered. I have already put the abc.html and abc.js in the same folder. Did I miss anything or do anything wrong?
I have just copy pasted your code and it's working fine. Just one correction where you don't need to add your abc.js file in html file like you have done in your code.
<script src="abc.js"/>
Can you please verify what is your entry point because by default index.js/index.tsx file is your entry point in react. Please try something below and it should work properly.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
When using the Babel in-browser compiler you must include your code inline and set the script tag type to text/babel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
</script>
</body>
</html>
What you have seems to work - I just copy and pasted into a codepen. It's possible that your browser is blocking the react script or something
Maybe try it in a different browser?
Related
When I add React via script tags (as described here), and also add Babel as script tag, I can write a script tag like this:
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
This works. However, creating a new JavaScript file with this exact content and adding a script tag with the path to it as its src attribute does not. I'm a complete beginner, this is propably a really simple problem, but please help me out. Why does this not work, and how can I make it work?
Edit: This is how my files look:
<!-- index.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>Test</title>
</head>
<body>
<div id="root"></div>
<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>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="./index.js"></script>
</body>
</html>
// index.js
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
I want to import reactjs or any framework app in html.
Example:
<html>
<head>
<title>Test Bot</title>
<style>
.chatbot-goes-here {
position: fixed;
bottom: 0;
right: 5rem;
}
</style>
</head>
<body>
<div id="chatbot-goes-here"></div>
</body>
<script src="./index.js"></script>
</html>
my index.js
const x = document.getElementById('chatbot-goes-here');
x.innerHTML = `<h1>hi</h1>`
Now in "index.js" i want my react app logic which is changing the "div" with id="chatbot-goes-here". So the idea is this index.js file will be hosted on cloud instance and someone can include the div and script file to use the chatbot.
you can import react in your html file using cdn link, You can copy the following template i have designed
<!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>React practice</title>
</head>
<body>
<div id="root"></div>
<!-- React CDN Link -->
<script crossorigin src="https://unpkg.com/react#17/umd/react.production.min.js"></script>
<!-- React-DOM CDN Link -->
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.production.min.js"></script>
<!-- Babel CDN Link -->
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<!-- Linking index.js file -->
<script src="index.js" type="text/jsx"></script>
</body>
</html>
You can easily do that using react cdn :
<head>
<script src="https://unpkg.com/react#16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.13.1/umd/react-dom.development.js">
<script src="https://unpkg.com/#babel/standalone#7.9.3/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const className = 'container';
const children = 'Hello World';
const props = {children, className};
const element = <div {...props} />;
ReactDOM.render(element, document.getElementById('root'));
</script>
</body>
Not sure to understand fully what you want. For what I understood if you want to import reactjs or any framework app in html you can use CDN or other similar links.
https://reactjs.org/docs/cdn-links.html
<script crossorigin src="YOUR FRAMEWORK LINK HERE"></script>
For exemple using react it looks like that :
<script crossorigin src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
More CDN libraries can be found here
I'm new to React and having trouble placing React code into separate files (i.e. moving the React code out of my main html file). Here is a simple example. The code below works fine. I get the correct "Hello, World!" output.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>, document.getElementById('root') );
</script>
</body>
</html>
When I try to split this into 2 files, "Hello, world!" does not display at all. That code is below:
ReactDOM.render( <
h1 > Hello, world! < /h1>,
document.getElementById('root')
);
<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>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="component2.js"></script>
</body>
</html>
Why does this not work when I split it into 2 files?
You are almost correct. Remove the type="text/babel" from the html file
Then convert your JSX into plain using by keeping it in an src folder and running the command
npx babel --watch src --out-dir . --presets react-app/prod
which will create a file component2.js
ReactDOM.render(React.createElement(
'h1',
null,
'Hello, world!'
), document.getElementById('root'));
From src/component2.js, which is
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
ReactDOM.render(React.createElement(
'h1',
null,
'Hello, world!'
), document.getElementById('root'));
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="component2.js"></script>
</body>
</html>
You can find the documentation about the same in https://reactjs.org/docs/add-react-to-a-website.html
#SydneyY's advice I think worked here. When I inspected in the browser and then looked in the console I got errors like this:
Access to XMLHttpRequest at component2.js from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
I was able to solve this issue by setting up a local development environment using create-react-app and then importing component2.js through the index.js file that create-react-app sets up.
Your .js file is not having access to ReactDOM and you will also need to add
type="text/babel"
as script attribute.
I am trying to load react and material ui directly through a cdn but am unable to get material ui to work.
Here is the code I have tried so far
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bundleless React</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/#material-ui/core/umd/material-ui.production.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="./index.jsx" type="text/babel"></script>
</body>
</html>
index.jsx
ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"));
The above code works fine with just React but when I try using a material UI component like below it throws an error.
index.jsx
ReactDOM.render(
<Button variant="contained" color="primary">
Hello World
</Button>,
document.getElementById("root")
);
The above code throws a Button is not defined error in the console. How exactly do I solve this?
I'm just learning reactjs - I'm going through the tutorials. What I can't figure out is why when I include my React script in the code it works (1st snippet). However, when I extract the script code into a separate .js file (2nd snippet) it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
2nd Snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script src="Scripts/custom/react.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
react.js file:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
As a note, I've wrapped the above js file in the <script type="text/babel"></script> and that didn't work either.
I've asked this in the Code Review site as well, however, I'm not sure if it belongs there or not.
As noted in a comment below, I do see a syntax error, highlighted on the <h1>Hello, world!</h1>, line.
Try naming the file with the .jsx extension, and with text/babel type. You have to use the .jsx extension for Babel to know how to transpile it, which loaders to use, etc. With your current .js extension, Babel sees a regular JavaScript file and does not do anything, thus the error occurs. Also, include your custom script after your div because React has to wait for root to be loaded before it can insert anything -- and also, rename your file, it's quite confusing:
<div id="root"></div>
<script type="text/babel" src="Scripts/custom/react.jsx"></script>