I start to learn React and I try to run this page but I caught this error :
Refused to execute script from 'https://unpkg.com/browse/babel-standalone#6.26.0/babel.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Can anyone helps me?
<!DOCTYPE html>
<html lang="en">
<head>
<title> React work </title>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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 crossorigin src="https://unpkg.com/browse/babel-standalone#6.26.0/babel.min.js"></script>
</head>
<body>
<div id='react-root'></div>
<script type="text/babel">
class Bonjour extends React.Component
{
render()
{
return (
<h1> Hello from React </h1>
)
}
}
ReactDOM.render(
<Bonjour/>,
document.getElementById('react-root')
)
</script>
</body>
</html>
Your link is wrong. The /browse is:
https://unpkg.com/browse/babel-standalone#6.26.0/babel.min.js
This is a webpage, not a .js file. Click the "View Raw" button to get to the plain JS:
https://unpkg.com/babel-standalone#6.26.0/babel.min.js
Use that instead, and you get:
<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 crossorigin src="https://unpkg.com/babel-standalone#6.26.0/babel.min.js"></script>
<div id='react-root'></div>
<script type="text/babel">
class Bonjour extends React.Component
{
render()
{
return (
<h1> Hello from React </h1>
)
}
}
ReactDOM.render(
<Bonjour/>,
document.getElementById('react-root')
)
</script>
But, a suggestion - only use Babel Standalone for debugging, if possible. For real apps, once they're ready for public consumption, better to transpile the JSX on your own, then serve that to clients. (Babel Standalone makes clients transpile the code themselves, which requires quite a lot of overhead)
Related
When I add React via script tags (as described here), and also add Babel as script tag, I can write a script tag like this:
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
This works. However, creating a new JavaScript file with this exact content and adding a script tag with the path to it as its src attribute does not. I'm a complete beginner, this is propably a really simple problem, but please help me out. Why does this not work, and how can I make it work?
Edit: This is how my files look:
<!-- index.html -->
<!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>Test</title>
</head>
<body>
<div id="root"></div>
<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#6/babel.min.js"></script>
<script type="text/babel" src="./index.js"></script>
</body>
</html>
// index.js
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
I want to import reactjs or any framework app in html.
Example:
<html>
<head>
<title>Test Bot</title>
<style>
.chatbot-goes-here {
position: fixed;
bottom: 0;
right: 5rem;
}
</style>
</head>
<body>
<div id="chatbot-goes-here"></div>
</body>
<script src="./index.js"></script>
</html>
my index.js
const x = document.getElementById('chatbot-goes-here');
x.innerHTML = `<h1>hi</h1>`
Now in "index.js" i want my react app logic which is changing the "div" with id="chatbot-goes-here". So the idea is this index.js file will be hosted on cloud instance and someone can include the div and script file to use the chatbot.
you can import react in your html file using cdn link, You can copy the following template i have designed
<!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 practice</title>
</head>
<body>
<div id="root"></div>
<!-- React CDN Link -->
<script crossorigin src="https://unpkg.com/react#17/umd/react.production.min.js"></script>
<!-- React-DOM CDN Link -->
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.production.min.js"></script>
<!-- Babel CDN Link -->
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<!-- Linking index.js file -->
<script src="index.js" type="text/jsx"></script>
</body>
</html>
You can easily do that using react cdn :
<head>
<script src="https://unpkg.com/react#16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.13.1/umd/react-dom.development.js">
<script src="https://unpkg.com/#babel/standalone#7.9.3/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const className = 'container';
const children = 'Hello World';
const props = {children, className};
const element = <div {...props} />;
ReactDOM.render(element, document.getElementById('root'));
</script>
</body>
Not sure to understand fully what you want. For what I understood if you want to import reactjs or any framework app in html you can use CDN or other similar links.
https://reactjs.org/docs/cdn-links.html
<script crossorigin src="YOUR FRAMEWORK LINK HERE"></script>
For exemple using react it looks like that :
<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>
More CDN libraries can be found here
https://www.youtube.com/watch?v=NyZzRSTZQ2Y
I follow this video to open an HTML file and JS file in VSC. but I can't render the js file on the web.The hi I am tom hi is not appear on the web.
index.html
<!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">
<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/babel.min.js"></script>
<title>Random Quote Machine</title>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="./index.js"> </script>
</body>
</html>
index.js
function App(){
return(
<div> hi I am tom hi </div>
);
}
ReactDom.render(<App/>,document.getElementById("app"))
Update the last line in index.js to:
ReactDOM.render(<App/>,document.getElementById("app"))
and it'll work.
Explanation:
What was wrong in your index.js?
Ans: ReactDOM is an object which is imported from react library to handle the rendering the component. In your code you were accessing ReactDom, note the caps are different, you were referring to ReactDom instead of ReactDOM.
Remember that JavaScript is a case-sensitive language.
Almost done learning React on Codecademy, so I wanted to start coding something in it on my PC. I have put the directory onto my XAMPP server, but the React app still won't render.
class LandingPage extends React.Component {
render() {
return (
<h2>Hello</h2>
);
}
}
ReactDOM.render(<LandingPage />, document.getElementById('app'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>ReactApp</title>
<meta name="author" content="Mae" />
<link type="text/css" rel="stylesheet" href="sass/design.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
<!-- import react, react-dom and babel-core -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<body>
<div id="app">
</div>
<script type="text/babel" src="react-front.js"></script>
<!--Import jQuery-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</body>
</html>
I don't think any browser by default understands JSX. You need to set up the chain to compile your source to pure JS.
If you only want to play around I recommend using the Create React App.
See: https://reactjs.org/docs/installation.html#creating-a-new-application
I'm making a simple flask app, using react for the front-end stuff. Right now I'm experimenting with importing React components from other files, without success. This is the error I'm getting:
Uncaught ReferenceError: require is not defined
This is my html file:
<html>
<head>
<meta charset="UTF-8">
<title>Index page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.16/css/bulma.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body>
<div class="columns">
<div class="column">
some stuff
</div>
<div class="column">
<div id="index"></div>
</div>
</div>
<script type="text/babel" src="static/js/index.js"></script>
</body>
</html>
and my index.js:
import FormComponent from './FormComponent.js';
var MainClass = React.createClass({
render:function(){
return (
<div>
<div>this is the main component</div>
<div><FormComponent /></div>
</div>
);
}
});
ReactDOM.render(<MainClass />, document.getElementById('index'));
and finally the FormCommponent.js, which is in the same folder:
var FormComponent = React.createClass({
render: function() {
return (
<div>this is an imported component</div>
);
}
});
module.exports = FormComponent;
Does anyone know what am I doing wrong?
I'm not using any package managers.
EDIT
Solved the problem by using browserify, as mentioned below.
Thanks for the help
You need to use something like Rollup, Webpack, or Browserify. This statement import FormComponent from './FormComponent.js'; doesn't mean anything on the client. No browser natively supports it so you need something like the tools mentioned above to turn it into something the browser can actually use.
Without them you just have to load the files in your index.html.
Maybe if you try to include components like the first but declare like text/javascript should run.
I hope this solves your problem