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
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...
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
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>
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>
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'));