I am having problem with my table showing up in the browser - javascript

I a creating a React App that keeps Score but so far my components are not showing up in the browser could anyone help? The Scoreboard should have a score counter so far and player name but so far nothing is appearing I am new to react.
I have tried linking babel in the HTML and This is the React Code
const Header = () =>
<header>
<h1>ScoreBoard</h1>
<span className="stats">Player: 1 </span>
</header>;
const Player = () => {
return(
<div className="player">
<span classNae="player-name">
Guil
</span>
<Counter />
</div>
);
}
const counter = () => {
return(
<div className="counter">
<button className="counter-decriiment">-</button>
<span className="counter-score"></span>
<button className="counter-incriment">+</button>
</div>
);
}
const App = () =>{
return(
<div className="scoreboard">
<Header/>
{/* { Players List } */}
<PLayer />
</div>
);
}
ReactDom.render(
<App />,
document.getElementById('root')
);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scoreboard</title>
<link rel="stylesheet" href="./app.css" />
</head>
<body>
<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>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="./app.js"></script> </body>
</html>


You are missing an element which has to have a root id to be render on.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scoreboard</title>
<link rel="stylesheet" href="./app.css" />
</head>
<body>
<div id="root"></div>
<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>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="./app.js"></script> </body>
</html>


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scoreboard</title>
<link rel="stylesheet" href="./app.css" />
</head>
<body>
<div id="root"></div>
<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>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="app.js"></script>
</body>
</html>
const Header = () => {
return(
<header>
<h1>ScoreBoard</h1>
<span className="stats">Player: 1 </span>
</header>
);
}
const Player = () => {
return( <div className="player">
<span className="player-name"> Guil </span><Counter />
</div>
);
}
const Counter = () => {
return( <div className="counter">
<button className="counter-decrement">-</button>
<span className="counter-score"></span>
<button className="counter-increment">+</button>
</div>
);
}
const App = () =>{
return(
<div className="scoreboard">
<Header/> { } <Player /> </div> ); }
ReactDOM.render( <App />, document.getElementById('root') );

Related

Functional component after being called 5 times and wrapping in React.Fragment tag still not displaing anything

<html lang="en">
<head>
<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/babel.min.js"></script>
</head>
<body>
<Div id="asdfg"></Div>
</body>
<script type="text/babel">
function Dalo()
{ return (
<h1>bhj</h1>
)
}
function Panch ()
{
return
( <React.Fragment>
<Dalo/><Dalo/><Dalo/><Dalo/><Dalo/><Dalo/>
</React.Fragment>
)
}
ReactDOM.render( <Panch/> , document.getElementById("asdfg") );
</script>
</html>
Here nothing is being rendered after calling function Panch.

The parenthesis after the return must be on the same line as the return itself. So change this:
return
( <React.Fragment>
<Dalo/><Dalo/><Dalo/><Dalo/><Dalo/><Dalo/>
</React.Fragment>
)
to
return (
<React.Fragment>
<Dalo/><Dalo/><Dalo/><Dalo/><Dalo/><Dalo/>
</React.Fragment>
)

Trying to export components on React and they are not working

Hi all i'am having problems when exporting React components to a App.js file, this App.js referenced on index.html is not been loaded.
I'am using react cdn on index.html
There follows (index.html):
<html>
<head>
<link rel="stylesheet" href="index.css" />
<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#6/babel.min.js"></script>
</head>
<body>
<div id="page"></div>
<script src="App.js" type="text/babel"></script>
</body>
</html>
There follows (App.js):
import HeaderComponent from "./Header";
import FooterComponent from "./Footer";
import AbcOrderedList from "./MainContent";
//Parent component
function App() {
return (
<div>
{/* Children component */}
<HeaderComponent />
<AbcOrderedList />
<FooterComponent />
</div>
);
}
ReactDOM.render(<App />, document.getElementById("page"));
There follows (Header.js):
export default function HeaderComponent() {
return (
<header>
<nav className="nav">
<img
className="nav-logo"
src="react-removebg-preview.png"
alt="react logo"
/>
<ul className="nav-items">
<li>Tools</li>
<li>View</li>
<li>Log out</li>
</ul>
</nav>
</header>
);
}
There follows (Footer.js):
export default function FooterComponent() {
return (
<footer className="footer">
<small>© 20xx Nathanzeira development. All rights reserved.</small>
</footer>
);
}
There follows (MainContent.js):
export default function AbcOrderedList() {
return (
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ol>
);
}
Thank you all!

Loading JavaScript files using Helmet not working

I am trying to use Helmet to load javascript files but it does not seem to work. I tried various paths like './vendor','../vendor' '/vendor' and it did not work. Here is what I have. Thanks a lot.
function DashboardLayout(props) {
return (
<Fragment>
<Helmet>
<title>Dashboard</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<meta name="robots" content="noindex" />
<script src="./vendor/jquery/jquery.min.js" type="text/javascript" />
<script src="./vendor/bootstrap/js/bootstrap.bundle.min.js" type="text/javascript" />
<script src="./vendor/jquery-easing/jquery.easing.min.js" type="text/javascript" />
<script src="./js/sb-admin-2.min.js" type="text/javascript" />
</Helmet>
{props.children}
</Fragment>
);
}
and the folder directories.

React component not linking to HTML div

I am new to React and wanted to inject the nav bar I created in HTML, into my original document. However the React component isnt linking to the div in the HTML, I'm not really too sure as to what is wrong to be honest!
var NavBar = React.Component({
render () {
return (
<div className="nav">
<div className="bottom-nav">
<div className="container-fluid">
<img className="logo" src="assets/images/alt-logo-2.png" alt="Native Creative"></img>
<input className="menu-btn" type="checkbox" id="menu-btn" />
<label className="menu-icon" for="menu-btn"><span className="navicon"></span></label>
<ul className="menu">
<li className="item">Collection</li>
<li className="item">Inspiration</li>
<li className="item">Shop</li>
<li className="item">Contact</li>
</ul>
</div>
</div>
</div>
);
}
});
ReactDOM.render(
<NavBar />,
document.getElementById('navbar')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<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>
</head>
<body>
<!-- - - - - - - - NAVIGATION START - - - - - - - -->
<div id="navbar"></div>
<script src="javascript/navbar.js"></script>
<!-- - - - - - - - NAVIGATION END - - - - - - - -->
</body>

Use class NavBar instead var NavBar =
Here is the example:
class NavBar extends React.Component {
render() {
return (
<div className="nav">
<div className="bottom-nav">
<div className="container-fluid">
<img className="logo" src="assets/images/alt-logo-2.png" alt="Native Creative"></img>
<input className="menu-btn" type="checkbox" id="menu-btn" />
<label className="menu-icon" for="menu-btn"><span className="navicon"></span></label>
<ul className="menu">
<li className="item">Collection</li>
<li className="item">Inspiration</li>
<li className="item">Shop</li>
<li className="item">Contact</li>
</ul>
</div>
</div>
</div>
);
}
}
ReactDOM.render( <
NavBar / > ,
document.getElementById('navbar')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='navbar'></div>

Correct syntax #1
var NavBar = React.createClass({ // ...})
Correct syntax #2
class Navbar extends React.Component { // ...}
Make sure you use a transpiler (e.g. Babel) or the JSX will not be interpreted correctly.

Conditional rendering is not working as expected in reactjs

function Demo(props){
return(
<div>
{props.boolean && <div>}
<h1>
HI,many of these kind of dom elements will be here
</h1>
{props.boolean && </div>}
</div>
)
}
ReactDOM.render(
<Demo boolean="true"/>, document.body
);
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
</head>
<body>
</body>
</html>
Here i want to get the form tag if the prop boolean value is true,but its not working as expected.
if i use code like this
{props.boolean && <div></div>}
<h1>
HI,many of these kind of dom elements will be here
</h1>
{props.boolean && <div></div>}
it comes,So if opening and closing tags are together then its working.is there any way to get the values when the tags are apart...please help

You're trying to do something, that's somewhat of an anti-pattern. This might be a better solution:
function Demo(props) {
function MyContents() {
return (
<h1>
HI,many of these kind of dom elements will be here
</h1>
);
}
return (
<div>
{ props.boolean ?
<div><MyContents /></div>
:
<MyContents />
};
</div>
);
}
ReactDOM.render(
<Demo boolean="true" />, document.body
);

Please try Conditional Rendering
function Demo(props) {
const flag = props.flag;
return (
if (flag) {
return <h1 > true < /h1>;
}
return <h1 > false < /h1>;
)
}
ReactDOM.render(
<Demo flag={true}/>, document.getElementById('root')
);
HTML
<body>
<div id="root"></div>
</body>

A different and better way to do conditional rendering
function Demo(props) {
return (
<h1>{props.flag ? true : false}</h1>;
)
}
ReactDOM.render(
<Demo flag={true}/>, document.getElementById('root')
);

Categories

Resources