I am following Mike Dane's React tutorial and for some reason the code is not showing in the browser. What am I doing wrong?
index.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>
<script src="https://unpkg.com/react#18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#18/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<div id="root"></div>
<script src = "index.js"></script>
</body>
</html>
index.js:
const reactContentRoot = document.getElementById("root")
ReactDom.render('hello world', reactContentRoot)
Things have probably changed slightly since the video you reference was released. ReactDom.render is no longer the way to do things.
Always best to give the documentation a read :) https://reactjs.org/docs/add-react-to-a-website.html#step-2-add-the-script-tags
Anyway here is how it is done now. in your index.js:
const reactContentRoot = document.getElementById("root");
const root = ReactDOM.createRoot(reactContentRoot);
root.render("hello world");
And you are off an running.
Enjoy your learning.
Related
If I separate the code into a index.js then a blank page is rendered.
If however I keep Reactjs in the same index.html then the page renders correctly.
<index.html --->
<!DOCTYPE html>
<html>
<head>
<!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 CDN</title>
<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>
<script src='https://unpkg.com/babel-standalone#6.26.0/babel.js'></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="./index.js" >
</script>
</body>
</html>
const ReactAppFromCDN = ()=>{
return (
<div>My React App with CDN</div>
)
}
ReactDOM.render(<ReactAppFromCDN />, document.querySelector('#root'));
<!DOCTYPE html>
<html>
<head>
<!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 CDN</title>
<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>
<script src='https://unpkg.com/babel-standalone#6.26.0/babel.js'></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const ReactAppFromCDN = ()=>{
return (
<div>My React App with CDN</div>
)
}
ReactDOM.render(<ReactAppFromCDN />, document.querySelector('#root'));
</script>
</body>
</html>
i am a beginner learning react but i get trouble from my first react code, the ReactDOM.render() is showing anything. what is the problem?
<!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</title>
<link rel="stylesheet" href="../REACT/style.css">
<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="../REACT/app.js" type="text/babel">
ReactDOM.render(<h1>Hello, everyone!</h1>, document.getElementById("root"))
</script>
</body>
</html>
i expect to see hello everyone! but it shows nothing
Remove this from the script tag:
src="../REACT/app.js"
I am new to React and would like to ask why the following code in vs code wont render the h1 component in my html page?
When I run the html page, it just shows empty page. Anyone know what is happening?
Code as follows:
My index.html code as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<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</title>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
My index.js code as follows:
ReactDOM.render(<p>Hello, everyone!</p>,document.getElementById("root"))
Whenever I run the html file, it just shows blank page rather than "Hello, everyone!". Does anyone know what is going on here?
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
React uses JSX to render all the components. This means in simple terms, it collects all the components and converts them into an HTML page.
React renders each component as a tree. So it is not advisable to add all your code to a single component. As in your case, you tried to print Hello Everyone! on the render function without specifying the HTML tag.
App.js
import React from "react";
function App() {
return (
<div>
<h1>Hello Everyone</h1>
</div>
);
}
export default App;
If you're wondering how I'm importing App.js and CSS files, It is called path specifying for the files. If the files are present are on the same folder then use ./filename.extension(css/js)
What is React.StrictMode?
It renders all the child components in strict mode.
This prevents certain actions being taken and throws errors/warnings if there are any
Most importantly it does a lot of checking which will be really helpful to correct all the possible errors.
You should not open the HTML page to see changes instead use any package managers to run the react code. For Example:
npm start or yarn start
All the best! 😁
<html>
<head>
<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/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(<p>Hello world!</p>, document.getElementById("root"));
</script>
</body>
</html>
here you have to specify the data-preset="react"
<script src="index.js" type="text/babel" data-preset="react"></script>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<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</title>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel" data-preset="react"></script>
</body>
</html>
Steps:
I have many custom components. Hence, I created standalone package.
I did it bundle using webpack.
Include that bundle file in HTML page using script tag.
Now, I just want to use it in HTML page like below example, but I cant access it.
<!DOCTYPE html />
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<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="build.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/jsx">
ReactDOM.render(<CustomButton />, document.getElementById('root'));
</script>
</body>
</html>
Is it possible to access component once bundle ?
Why does this not work? I checked the React docs and the CDN links seem to be all right.
<!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>
<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>
</head>
<body></body>
<script>
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.querySelector("body"));
</script>
</html>
To use JSX, you need a transpiler such as Babel because JSX support is not built in to browsers.
You can use the Babel CDN:
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>