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
Related
Is there an issue with how I imported react or am I just missing something small? Any feedback would be greatly appreciated. I'm pretty new to programming so there's probably a really simple solution here that I'm just not informed enough to see. Thanks.
Edit:
After taking out the commented out portion of the body, the component still doesn't render. I get this error
Uncaught SyntaxError: Unexpected token '<' (at index.html:22:13)
Can the file not understand that I'm trying to use a react component? Thanks.
2nd edit:
Solved it, I was missing type="text/babel" in the script element.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- React Import -->
<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>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<title>Markdown Previewer</title>
</head>
<script>
class App extends React.Component {
render() {
return(
<div class="">
Hi
</div>
);
}
}
ReactDOM.render(<App/>,
document.getElementById('app'));
</script>
<body>
<!--<wrapper>
<div id="app"></div>
<textarea name="name" rows="8" cols="80" id="editor"></textarea>
<div id="preview"></div>
</wrapper>-->
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>
remove comment braces: <!-- -->
and write just:
<wrapper>
<div id="app"></div>
<textarea name="name" rows="8" cols="80" id="editor"></textarea>
<div id="preview"></div>
</wrapper>
I want to use a 3rd library only for my homepage in a React application. The problem is : the library is developed with Jquery : www.npmjs.com/package/fullview
I need to import : Jquery, js file and css file.
so far, I haven't found any way to import this type of library into a functionnal component. Only class components.
Can I import these files directly in index.html with or i need to import them in my component with import ... from "..."
Thank you !
You can add jquery CDN in your public/index.html like this:
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
crossorigin="anonymous"
></script>
</body>
</html>
no need to import jquery in component or something else now jquery is avalible golobally.
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.
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?