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>
Related
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.
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"
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'));
Why do I get error in console for:
<!DOCTYPE html>
<html ng-app="MyApp" ng-controller="myCtrl">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
</head>
<body>
</body>
</html>
Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=MyApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.3%2F%24injector%2Fnomod%3Fp0%3DMyApp%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A6%3A416%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A24%3A66%0A%20%20%20%20at%20a%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A23%3A109)%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A23%3A352%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A37%3A381%0A%20%20%20%20at%20m%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A7%3A322)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A37%3A229)%0A%20%20%20%20at%20eb%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A40%3A503)%0A%20%20%20%20at%20d%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A19%3A339)%0A%20%20%20%20at%20Ac%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A20%3A151)
at angular.js:38
at angular.js:4385
at m (angular.js:336)
at g (angular.js:4346)
at eb (angular.js:4272)
at d (angular.js:1630)
at Ac (angular.js:1651)
at Zd (angular.js:1545)
at angular.js:28359
at HTMLDocument.a (angular.js:2996)
You need to declare the module and controller under the script or in a separate file
<!DOCTYPE html>
<html ng-app="MyApp" ng-controller="myCtrl">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
</head>
<body>
<h1>{{text}}</h1>
<script>
var app = angular.module('MyApp',[]);
app.controller('myCtrl',function($scope){
$scope.text = "Works";
});
</script>
</body>
</html>
Because you haven't defined 'MyApp' or 'MyCtrl'. They need to be defined in a js file included on your web page. I suggest you read a basic tutorial on setting up an AngularJs app.