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>
Related
This is my first time to learn react and I began to watch a tutorial but when I write the code it doesn't show me anything on the browser so what is the problem?
inbox.html:
<html>
<head>
<link rel="stylesheet" href="index.css">
<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>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<h1>Hello, React!</h1>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
index.js:
ReactDOM.render(<ul><li>Thing 1</li><li>Thing 2</li></ul>, document.getElementById('root'));
and also there is an empty index.css file and all of them are saved in one folder so what is the problem
I tested you code here and I no saw nothing wrong. It's correct, is working.
enter image description here
enter image description 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'm trying to render react components from an html page. I referenced the question React - component in seperate script does not work and loaded the html file from a URL like http://localhost/index.html.
My index.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://...fb.me/react-0.13.3.js"></script>
<script src="https://...fb.me/JSXTransformer-0.13.3.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx" src="index.js"></script>
</body>
</html>
My index.js:
ReactDOM.render(<MainPage />, document.getElementById('example'))
The error is that MainPage is not defined. But when I write
include MainPage
There is an error on the include statement. Also, how can i include other React libraries like 'Tabs' from react-tabs?
If you index.js which is loaded inside your html contains <MainPage />, that means you did not compile your code. Browsers do not support text/jsx natively.
In order to use react with JSX you will need to use a compiler / bundler like webpack.
As you are just learning React.Js for the first time, please consider #Kapil's answer:
<!DOCTYPE html>
<html>
<head>
<script crossorigin src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</head>
<body>
<div id="example"></div>
</body>
</html>
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?
<!DOCTYPE html>
<html lang = "en">
<head>
<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>
</head>
<body>
<div class="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello,World!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
The above code only produces a blank page looking at the console i don't see any errors.
Your element has a class called root. You need an element with an id called root:
<div id="root"></div>
DEMO
EDIT: you will also need to add the babel-standalone module (see this previous SO answer).
You said document.getElementById('root') but your element is a class. Your element should have an id of root: <div id="root"></div>.
<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-standalone/6.24.0/babel.js"></script>
<script type="text/babel">
const element=<h1>Hello,World</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
</script>
Run above code, main problem with you code is you have used babel and havenot added js dependency.Moreover,your are getting element by id in js but class name is defined in html.