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.
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
This is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
```
Javascript
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
The problem is that there are no problems and nothing shows up on the output as wrong. I made sure to save my code and rebooted VS code a bunch of times. I installed all the libraries and was following a tutorial. Then for some reason it isn't working.
I am trying to load react and material ui directly through a cdn but am unable to get material ui to work.
Here is the code I have tried so far
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bundleless React</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/#material-ui/core/umd/material-ui.production.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="./index.jsx" type="text/babel"></script>
</body>
</html>
index.jsx
ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"));
The above code works fine with just React but when I try using a material UI component like below it throws an error.
index.jsx
ReactDOM.render(
<Button variant="contained" color="primary">
Hello World
</Button>,
document.getElementById("root")
);
The above code throws a Button is not defined error in the console. How exactly do I solve this?
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