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>
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 have a nx workspace where I have several react apps. One of them is payment and I want to serve it under mybaseurl.com/payment . The static assets (css, js) are failing to load because they are still pointed at root in the index.html. I cannot seem to change the PUBLIC_URL to "/payment" so that all the static files are served from mybaseurl.com/payment instead of mybaseurl.com.
I have tried putting PUBLIC_URL="mybaseurl.com/payment" in the .env file as well as, PUBLIC_URL="mybaseurl.com/payment" nx build payment --prod but nothing seems to have any result.
How can I change PUBLIC_URL here during build time?
For ref, use of PUBLIC_URL: https://create-react-app.dev/docs/adding-custom-environment-variables/
Example code:
Currently the build is generating the following
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Payment</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="styles.eb84118aca9dde73dfd8.css">.
<link rel="stylesheet" href="main.0e4338761429b4eb16ac.css">
</head>
<body>
<div id="root"></div>
<script src="runtime.28c323bf8ee123f67bad.esm.js" type="module"> </script>
<script src="polyfills.dd856a07eb47f9259494.esm.js" type="module"></script>
<script src="main.705bf19aea16ed7111ba.esm.js" type="module"></script>
</body>
</html>
But I want the build to generate the follwing in the index.html,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Payment</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="/payment/styles.eb84118aca9dde73dfd8.css">.
<link rel="stylesheet" href="/payment/main.0e4338761429b4eb16ac.css">
</head>
<body>
<div id="root"></div>
<script src="/payment/runtime.28c323bf8ee123f67bad.esm.js" type="module"> </script>
<script src="/payment/polyfills.dd856a07eb47f9259494.esm.js" type="module"></script>
<script src="/payment/main.705bf19aea16ed7111ba.esm.js" type="module"></script>
</body>
</html>
The easiest way to achieve this is to change the base tag by editing apps/payment/src/index.html:
<base href="/payment/">
The browser will then prepend the path to those assets.
i set the "baseHref" property in the production config in the project.json and then it appeared in the generated index.html
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!