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

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

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

React will not render to screen

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"))

My html template carousel not working on react

I bought html template. When I try to use it on react project, some of function not working. One of it owl carousel. owl.js template file dynamically adding divs and styling them. This section working on html page but not on react. I do not get any error from console.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>aaa</title>
<link href="assets/css/bootstrap.css" rel="stylesheet"/>
<link href="assets/css/style.css" rel="stylesheet"/>
<link href="assets/css/responsive.css" rel="stylesheet"/>
<link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon"/>
<link rel="icon" href="assets/images/favicon.png" type="image/x-icon"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=0">
</head>
<body>
<div id="root"></div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-ui.js"></script>
<script src="assets/js/jquery.fancybox.js"></script>
<script src="assets/js/owl.js"></script>
<script src="assets/js/wow.js"></script>
<script src="assets/js/isotope.js"></script>
<script src="assets/js/mixitup.js"></script>
<script src="assets/js/appear.js"></script>
<script src="assets/js/validate.js"></script>
<script src="assets/js/script.js"></script>
<script src="assets/js/map-script.js"></script>
</body>
</html>
With React your public files, such as JavaScript files, should be in a folder called 'public' in your React app, then in the index.html this should be denoted by '%PUBLIC_URL%'.
So in other words, move your assets folder to a folder called public and add '%PUBLIC_URL%/' before the paths for your files.
After 4 hour i found solition for my problem. It is define script links on component instead of index.html. Hope this post helps more people
import '../assets/css/bootstrap.css';
import '../assets/css/style.css';
import '../assets/css/responsive.css';
import React,{ useEffect } from 'react';
import { Helmet } from 'react-helmet';
const useScript = (src) => {
useEffect(() => {
const tag = document.createElement('script');
tag.async = true;
tag.src = src;
document.body.appendChild(tag);
return () => {
document.body.removeChild(tag);
}
}, [src])
}
export function Home(){
useScript('./assets/js/jquery.js');
useScript('./assets/js/bootstrap.min.js');
useScript('./assets/js/popper.min.js');
useScript('./assets/js/jquery-ui.js');
useScript('./assets/js/jquery.fancybox.js');
return(
<div>
<Helmet>
<title>{model.Title}</title>
<meta name="description" content={model.Desc}/>
<meta name="keywords" content={model.Keys}/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-
scale=1.0, maximum-
scale=1.0, user-scalable=0"></meta>
</Helmet>
.......
</div>
)
}

Alert is getting triggered automatically in react

I am new to reactjs, I have been trying to design a UI such that o every click it displays alert telling this li element is clicked but when the page is rendered I see lot of alerts getting popped out. Can someone point out mistake in my code and how to avoid it!
Here is the code snippet
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"
/>
<title>Grade Score</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
App.js
import './App.css';
function clickhandle (props) {
alert("you clicked on" + props.name)
}
function Stud(props) {
return <li onClick={clickhandle(props)}> { props.name }</li>;
}
function App() {
const students = ['Anil', 'Bob' , 'Clara', 'Dew', 'John', 'Ravi', 'Ram'];
return (
<>
<ul>
{students.map((student) => <Stud name={student} />)}
</ul>
</>
);
}
I want the alerts to be displayed only if I click on the li element but in my my code it continuously pops up alert as soon as page loads!
That's because you are calling the function when the page loads. You have to pass a function to onClick, not call the function directly:
onClick={() => clickhandle(props)}

why is my index.html file returning a blank screen whenever i debug or preview it?

this is the app.js file
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import DashboardLayout from './layouts/DashboardLayout';
import './faithdash/scss/styles.scss';
export default function App() {
return (
<BrowserRouter>
<Switch>
<Route component={DashboardLayout} />
</Switch>
</BrowserRouter>
);
}
this is the index.html file
ive tried everything and have used different my vscode index chrome previewer to view the index file like others but its shows a blank screen
<!DOCTYPE html>
<html lang="en">
<head>
<title> Faithpays dashboard</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
<link
href="https://%PUBLIC_URL%/evergreen.eot"
rel="font"
/>
<link
href="https://%PUBLIC_URL%/evergreen.css"
rel="stylesheet"
crossorigin="anonymous" />
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
<script src="_nav.js"></script>
</body>
</html>
Because you didn't call render function from ReactDOM.
See more here: https://reactjs.org/docs/getting-started.html

Categories