react button doesn't show up - javascript

I am a beginner in React, and I am trying to put a button on my page, but the button doesn't show up.
The following is my code(updated version after adding the div tag with a id "root" inside the body tag)
<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Gambling Online</title>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
console.log("dha");
class Start extends React.Component{
render(){
return(
<button className="start">
testing
</button>
);
}
}
ReactDOM.render(
<Start />,
document.getElementById('root')
);
</script>

You need to include a babel transpiler in order to use text/babel script, add this in your <head> :
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

Related

why my react code not working although other stuff is okay

decided to make react project for the first time, noticed that it's not working, css is good, but not react code, checked a lot tutorials but haven't found any solution:(
P.s this is my first time using react,therefore sorry guys and thanks for feedback
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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="restaurant"></div>
<script src="js.js" type="text/babel"></script>
</body>
</html>
js.js:
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
ReactDOM.render(<App />, document.getElementById("restaurant"))
ReactDOM.render(<h1>hiii</h1>, document.getElementById("restaurant"))
App.js:
import React from "react"
import Header from 'header'
export default function App() {
return(
<Header />
)
}
Header.js :
import React from 'react'
export default function Header(){
return (
<div className='container'>
<div className='head-part'>
<h1>HopeLake</h1>
<div className='icons'>
<span>i1</span>
<span>i2</span>
<span>i3</span>
</div>
<div className='list-pages'>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>MENU</li>
<li>ORDER</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
)
}
Here is my example to use React.JS by CDN.
No need to export default but need to import file in index.html
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
</head>
<body>
<div id="root"></div>
<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>
<!-- Import new component before use here!!! -->
<script type="text/babel" src="./App.js"></script>
<script type="text/babel" src="./Header.js"></script>
<script type="text/babel" src="./index.js"></script>
</body>
</html>
App.js
const App = () => {
return <Header/>
}
Header.js
const Header = () => {
return <div>This is my header</div>
}
index.js
const container = document.querySelector("#root");
const root = ReactDOM.createRoot(container);
root.render(<App />);
Hope this will help you...

Unable to import JS files with a project using CDN links (react, reactDOM)

I want to import subfiles (Header.js; Footer.js, MainContent.js) into index.js instead of coding similar subfunctions in index.js file.
I put the functions in index.js and it worked but splitting the file and importing it didn't. When I write the import, it doesn't work and doesn't show the elements.
There ara list of my folders and code.
(index.js)
import Header from "./Header";
import Footer from "./Footer";
import MainContent from "./MainContent";
function App() {
return (
<div>
<Header />
<MainContent />
<Footer />
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
(index.html)
<html>
<head>
<link rel="stylesheet" href="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="index.js" type="text/babel"></script>
</body>
</html>
(Header.js)
export default function Header() {
return (
<header>
<nav className="nav">
<img src="./react-logo.png" className="nav-logo" />
<ul className="nav-items">
<li>Pricing</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
);
}
(MainContent.js)
export default function MainContent() {
return (
<div>
<h1>Reasons I'm excited to learn React</h1>
<ol>
<li>
It's a popular library, so I'll be able to fit in with the cool kids!
</li>
<li>I'm more likely to get a job as a developer if I know React</li>
</ol>
</div>
);
}
(Footer.js)
export default function Footer() {
return (
<footer>
<small>© 2021 Ziroll development. All rights reserved.</small>
</footer>
);
}
Please help me with the answer, thanks
I found the solution and and it is noted where it is added below:
(index.html)
<html>
<head>
<link rel="stylesheet" href="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>
<!--This must be added to the file for each imported function-->
<!-- Here for Header.js-->
<script
data-plugins="transform-es2015-modules-umd"
type="text/babel"
src="./Header.js"
></script>
<!-- Here for MainContent.js-->
<script
data-plugins="transform-es2015-modules-umd"
type="text/babel"
src="./MainContent.js"
></script>
<!-- Here for Footer.js-->
<script
data-plugins="transform-es2015-modules-umd"
type="text/babel"
src="./Footer.js"
></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<!-- Final, I have to add data-plugins here -->
<script
src="index.js"
type="text/babel"
data-plugins="transform-es2015-modules-umd"
></script>
</body>
</html>
Everything works after adding the above script

Need help to get started with React

im getting started with React and im trying to start with basics. Now, this is my code
index.html
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8" />
<title>index</title>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script type="text/babel" src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="index.js" type = "text/babel "></script>
</head>
<body>
<div id = 'try'></div>
<script type= "text/babel">
const element = <Welcome />;
ReactDOM.render(
element,
document.getElementById('try')
);
</script>
</body>
</html>
and this is my index.js
class Welcome extends React.Component {
render(){
return <h1> hello</h1>;
};
};
it is supposed to show me "hello" on index.html but the page stills blank, where is the error?
pd: also tried using "text/jsx" instead of "text/babel"
Try calling Welcome without setting to const.
ReactDOM.render(
<Welcome />,
document.getElementById('try')
);
Try this, this should work:
class Welcome extends React.Component {
render(){
return <h1> hello</h1>;
};
};
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="try"></div>
<script type="text/babel">
const element = <Welcome/>
ReactDOM.render(element, document.getElementById("try"));
</script>
</body>
</html>

Reactjs console errors: 'Components object is deprectated' & 'ReferenceError: require is not defined'

I'm trying to use jsx with classes create a simple hello world program to print 'Hello world' in my browser(firefox).
I can get a single page [html with embedded jsx][1] to work. But not when I try to use classes.
I am receiving the following in my console output
Download the React DevTools for a better development experience: https://fb .me/react-devtools
You might need to use a local HTTP server (instead of file://): https://fb .me/react-devtools-faq react-dom.development.js:21347:9
unreachable code after return statement[Learn More]
babel.js:61389:2
You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/ babel.js:61666:4
The Components object is deprecated. It will soon be removed. index.html
ReferenceError: require is not defined[Learn More]
<anonymous> file:///Users/Jacob/temp/index.html:5
run https://unpkg.com/babel-standalone#6.26.0/babel.js:61531
check https://unpkg.com/babel-standalone#6.26.0/babel.js:61597
loadScripts https://unpkg.com/babel-standalone#6.26.0/babel.js:61624
onreadystatechange https://unpkg.com/babel-standalone#6.26.0/babel.js:61549
jsx/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class NavBar extends React.Component {
render() {
return (
<div>
Hello world
</div>
);
}
}
ReactDOM.render(<NavBar />, document.querySelector('#root'))
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.js"></script>
<!--
<script data-main="scripts/main" src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script> #caused other errors
-->
<meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body>
<div id="root"></div>
<script type='text/babel' src='jsx/index.js'></script>
</body>
</html>
​
A quick fix in firefox for your problem would be to change your jsx/index.jsx to
class NavBar extends React.Component {
render() {
return (
<div>
Hello world
</div>
);
}
}
ReactDOM.render(<NavBar />, document.querySelector('#root'))
i.e remove 'import'
Go through this for babel usage with babel-standalone.
As you are using babel-standalone it would be best if you change your code to
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.js"></script>
<!--
<script data-main="scripts/main" src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script> #caused other errors
-->
<meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body>
<div id="root"></div>
<script type='text/babel'>
class NavBar extends React.Component {
render() {
return (
<div>
Hello world
</div>
);
}
}
ReactDOM.render(<NavBar />, document.querySelector('#root'))
</script>
</body>
</html>

Why won't my picture appear in ReactJS?

I'm starting out with ReactJS & I want this simple image to appear on my practice web app but it isn't appearing. I thought my logic was correct but I guess not.
Here's my index.html file:
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
</head>
<body>
<div id="firstBar"></div>
<div id="body"></div>
<script type="text/babel" src="index.js"></script>
<script type="text/babel" src="body.js"></script>
</body>
</html>
Here's my body.js file:
import myPic from 'pictures/myPic.JPG' // myPic.JPG is in my pictures folder.
var Body = React.createClass({
render: function() {
return(
<img src={myPic}></img>
);
}
});
ReactDOM.render(<Body />, document.getElementById('body'));
Error I'm getting is:
`Uncaught ReferenceError: require is not defined
at eval (eval at transform.run (browser.js:4613), <anonymous>:6:25)
at Function.transform.run (browser.js:4613)
at exec (browser.js:4649)
at browser.js:4661
at XMLHttpRequest.xhr.onreadystatechange (browser.js:4632)`
require/import might not be supported in the browser
Try this:
var Body = React.createClass({
render: function() {
return(
<img src={"./pictures/myPic.JPG"}></img>
);
}
});
ReactDOM.render(<Body />, document.getElementById('body'));

Categories