React will not render to screen - javascript

I am trying to test my React to make sure it can render but for some reason it will not work. I am using npx create-react-app to create my app. Please help
JavaScript:
import React from "react"
import ReactDOM from "react-dom"
const app = () => {
return (
<div>
<h1>Hello World</h1>
</div>
)
}
ReactDOM.render(app(), document.getElementById("root"))
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 src="index.js"></script>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

Instead of ReactDOM.render(app()... should be ReactDOM.render(<App>, because you want to render a component not a function,
Also as you mentioned you are using create-react-app, the default imports are these:
import React from 'react';
import ReactDOM from 'react-dom/client';
Which means you need to update your ReactDOM import
Note: every component should start with capital letter, so change const app to const App
Here is a snippet with the changes:
import React from "react"
import ReactDOM from "react-dom/client"
const App = () => {
return (
<div>
<h1>Hello World</h1>
</div>
)
}
ReactDOM.render(<App/>, document.getElementById("root"))

already answered but comments should help to understand
import React from "react"
import ReactDOM from "react-dom"
// component name should start with uppercase
const App = () => {
return (
<div>
<h1>Hello World</h1>
</div>
)
}
// render function takes a Reactelement as first parameter
ReactDOM.render(<App/>, document.getElementById("root"))

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...

Cannot import components with React

So I'm getting into React and I cannot see my components, only my background image of the CSS.
Here is my App.jsx:
import React from 'react'
import Header from './components/header/Header'
import Nav from './components/nav/Nav'
import About from './components/about/About'
import Experience from './components/experience/Experience'
import Services from './components/services/Services'
import Portfolio from './components/Portfolio/Portfolio'
import Testimonials from './components/Testimonials/Testimonials'
import Contact from './components/contact/Contact'
import Footer from './components/footer/Footer'
const App = () => {
return (
<>
<Header />
<Nav />
<About />
<Experience />
<Services />
<Portfolio />
<Testimonials />
<Contact />
<Footer />
</>
)
}
export default App
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>The Ultimate React Personal Portfolio Website</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
What am I doing wrong?
I've changed import React from 'react to import React from 'react-dom' to no avail. Please help
My apologies, I removed a confusing section and included snippets for further clarification.
Here is a screenshot of my project folders
Also here is my index.js:
import ReactDOM from 'react-dom'
import App from './App'
import './style.css'
ReactDOM.render(<App/>, document.querySelector("#root"))
Until I do not see the logs from your console I can only assume what I am wrong.
This is a very fresh post and I assume you are using the latest version of react 18.
Hopefully this will help :)
// React 17
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App/>, document.querySelector("#root"))
// React 18
import ReactDOM from 'react-dom/client'
const container = document.getElementById('app')
const root = ReactDOM.createRoot(container) // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />)

How to render <scipt> tags in React JS?

I am trying to render <script> tags but unable to do so. Although javascipt is already enabled for the browser. Screenshot of the error message on browser console.
Code snippet.
import './App.css';
import React from "react";
import {Helmet} from "react-helmet";
class App extends React.Component {
render () {
return (
<div className="application">
<h1>My name is </h1>
<script src="https://XXXXX.com/XX.js" id="XXX-embedded-form" primary-color="" secondary-color="" margin-x="" data-uuid="ffwesfwef" ></script>
<Helmet>
<script src="https://XXXXX.com/XX.js" id="XXX-embedded-form" primary-color="" secondary-color="" margin-x="" data-uuid="wefewfwefwe" ></script>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://myurl.net/example" />
</Helmet>
</div>
);
}
};
export default App;

Uncaught SyntaxError: import declarations may only appear at top level of a module on React

I'm creating a react component, its a very simple example to start to learn react , and I get this error Uncaught SyntaxError: import declarations may only appear at top level of a module, I¡, not sure what it's wrong
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=ç, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<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 src="./mynumber.js"></script>
<script src="./index.js"></script>
</body>
</html>
mynumber.js
import React from 'react';
class MyNumber extends React.Component{
render(){
return <div>Hello</div>
}
}
export default MyNumber
and index.js
import React from 'react';
import ReactDOM from 'react-dom';
import MyNumber from './mynumber';
const container = document.getElementById('root');
ReactDOM.render( MyNumber,container);

Can't close a JSX. Parsing error: Unterminated JSX contents

I just want to try out a Hello World of an UI framework for React, called CoreUI.
But it says I got my JSX wrong and unclosed. But I already closed all } and ), so please tell me what am I doing wrong here?
Thanks
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (
<html lang="en">
<head>
// Required meta tags
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
// CoreUI CSS
<link rel="stylesheet" href="https://unpkg.com/#coreui/coreui#3.0.0-rc.0/dist/css/coreui.min.css" crossorigin="anonymous" />
<title>CoreUI<title/>
<head/>
<body class="c-app">
<h1>Hello, world!<h1/>
// Optional JavaScript
// Popper.js first, then CoreUI JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js" integrity="sha384-L2pyEeut/H3mtgCBaUNw7KWzp5n9+4pDQiExs933/5QfaTh8YStYFFkOzSoXjlTb" crossorigin="anonymous"><script/>
<script src="https://unpkg.com/#coreui/coreui#3.0.0-rc.0/dist/js/coreui.min.js"><script/>
<body/>
<html/>
);
};
ReactDOM.render(
<App />, document.querySelector('#root')
);
Meta tags are not closed. Try this:
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (
<html lang="en">
<head>
// Required meta tags
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
// CoreUI CSS
<link rel="stylesheet" href="https://unpkg.com/#coreui/coreui#3.0.0-rc.0/dist/css/coreui.min.css" crossorigin="anonymous" />
<title>CoreUI<title/>
<head/>
<body class="c-app">
<h1>Hello, world!<h1/>
// Optional JavaScript
// Popper.js first, then CoreUI JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js" integrity="sha384-L2pyEeut/H3mtgCBaUNw7KWzp5n9+4pDQiExs933/5QfaTh8YStYFFkOzSoXjlTb" crossorigin="anonymous"><script/>
<script src="https://unpkg.com/#coreui/coreui#3.0.0-rc.0/dist/js/coreui.min.js"><script/>
<body/>
<html/>
);
};
ReactDOM.render(
<App />, document.querySelector('#root')
);
Your closing tags are not proper.it should be
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (<html lang="en">
<head>
// Required meta tags
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
// CoreUI CSS
<link rel="stylesheet" href="https://unpkg.com/#coreui/coreui#3.0.0-rc.0/dist/css/coreui.min.css" crossorigin="anonymous" />
<title>CoreUI</title>
</head>
<body class="c-app">
<h1>Hello, world!</h1>
// Optional JavaScript
// Popper.js first, then CoreUI JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js" integrity="sha384-L2pyEeut/H3mtgCBaUNw7KWzp5n9+4pDQiExs933/5QfaTh8YStYFFkOzSoXjlTb" crossorigin="anonymous"></script>
<script src="https://unpkg.com/#coreui/coreui#3.0.0-rc.0/dist/js/coreui.min.js"></script>
</body>
</html>
);
};
ReactDOM.render(
<App />, document.querySelector('#root')
);

Categories