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"
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 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.
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>
This code works on jsfiddle
https://jsfiddle.net/2gkzqw0o/2/
whereas I get a blank screen on my local server, why ?
<!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" />
?
<title>test</title>
<link rel="stylesheet" href="css/main.css" />
<link rel="icon" href="images/favicon.png" />
<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="app.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
app.js
const title = React.createElement('h1', {}, 'Hi');
ReactDOM.render(title, document.querySelector('#app'));
I got a problem when I try to use Angular Material design.
It wont style anything.
This is my HTML:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test</title>
<link rel="stylesheet" href="./libs/css/angular-material.css"/>
<script src="./libs/js/angular.js"></script>
<script src="./libs/js/angular-aria.js"></script>
<script src="./libs/js/angular-animate.js"></script>
<script src="./libs/js/hammer.js"></script>
<script src="./libs/js/angular-route.js"></script>
<script src="./libs/js/angular-resource.js"></script>
<script src="./libs/js/angular-material.js"></script>
</head>
<body>
<md-button>asd</md-button>
</body>
</html>
Is there anything I'm missing?
angular-material.js is the file from bower install
angular-material.css is also
<html ng-app="app">
<head lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test</title>
<link rel="stylesheet" href="./libs/css/angular-material.css"/>
<link rel="stylesheet" href="./libs/themes/purple-theme.css">
<link rel="stylesheet" href="./libs/themes/blue-grey-theme.css">
<script src="./libs/js/angular.js"></script>
<script src="./libs/js/angular-aria.js"></script>
<script src="./libs/js/angular-animate.js"></script>
<script src="./libs/js/hammer.js"></script>
<script src="./libs/js/angular-route.js"></script>
<script src="./libs/js/angular-resource.js"></script>
<script src="./libs/js/angular-material.js"></script>
<script>
var app = angular.module('app',
[
"ngAnimate",
"ngSanitize",
"ngMaterial"
]);
</script>
</head>
<body>
<md-button>asd</md-button>
</body>
</html>
If this didn't work, you might have wrong paths or maybe a newer Version. To check it, look in your angular-material folder. Do you have a "theme" folder? The new version does not have one. Remove the newer version and take an earlier version.
If you can handle a bit with shell you can try these :
bower install
bower uninstall angular-material
bower install angular-material
good luck!