I'm trying to create a simple website using React, but for some reason it just displays a blank page.
The error that show up on the console log is Uncaught SyntaxError: Unexpected token '<' main.js:6, which is a really normal line. Can somebody tell me where the error is?
Many thanks.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>U4Ever</title>
</head>
<body>
<div id="root"></div>
<script src="main.js" type="module"></script>
</body>
</html>
Main JS:
import React from "react"
import ReactDOM from "react-dom"
import _navbar from "./navbar.js"
import _body from "./body.js"
ReactDOM.render(<_navbar />, document.getElementById("root"))
ReactDOM.render(<_body />, document.getElementById("root"))
Navbar:
import React from "react"
function navbar() {
return(
<navbar>
<a href="#">Articles</a>
<a href="#">Notes</a>
<a href="#">Course</a>
<a href="#">Brain</a>
<a href="#">Newsletter</a>
<a href="#">Facebook</a>
</navbar>
)
}
export default navbar
Body
import React from "react"
function body() {
return (
<div>
<h1>Hi, I'm Me</h1>
<p>Lorem Ipsum</p>
</div>
)
}
export default body
I'm trying to create a simple website using React, but for some reason it just displays a blank page.
The error that show up on the console log is Uncaught SyntaxError: Unexpected token '<' main.js:6, which is a really normal line. Can somebody tell me where the error is?
Many thanks.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>U4Ever</title>
</head>
<body>
<div id="root"></div>
<script src="main.js" type="module"></script>
</body>
</html>
Main JS:
import React from "react"
import ReactDOM from "react-dom"
import _navbar from "./navbar.js"
import _body from "./body.js"
ReactDOM.render(<_navbar />, document.getElementById("root"))
ReactDOM.render(<_body />, document.getElementById("root"))
Navbar:
import React from "react"
function navbar() {
return(
<navbar>
<a href="#">Articles</a>
<a href="#">Notes</a>
<a href="#">Course</a>
<a href="#">Brain</a>
<a href="#">Newsletter</a>
<a href="#">Facebook</a>
</navbar>
)
}
export default navbar
Body
import React from "react"
function body() {
return (
<div>
<h1>Hi, I'm Me</h1>
<p>Lorem Ipsum</p>
</div>
)
}
export default body
2 Answers
Reset to default 3JSX is not JavaScript
Browsers only support JavaScript modules for import.
JSX is not JavaScript.
You need to pile the JSX to JavaScript using Babel.
In general this will result in you having an application, using Node.js, that (in development mode) will run an HTTP server hosting your application and which repiles it as you edit and (in build mode) will output static, piled files for you to deploy.
Follow the guidelines on the React website to set up a toolchain for piling your JSX. (I do not remend the first option (using client-side Babel) as it has a lot of limitations, such as not supporting modules (which you are already using)).
Alternatively, use a Parcel-based toolchain (which will be lighter than any of the options on the React website but is a less mon approach so you'll find less help for it on the Internet).
Naming
Unrelated to your immediate problem:
React requires ponents be named starting with a <CapitalLetter>
The problem is with the naming convention that you have used for react ponents. For the react ponents, you have to use pascal case. Your ponents should be corrected as follows.This can be also occurs when you are not configure your babel react presets in order to pile your JSX.
put following CDN in your html file if you are not using babel react presets. You can find cdn base solution working codepen link here.
<script src="https://unpkg./react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg./react-dom@17/umd/react-dom.development.js" crossorigin></script>
Main.js
import React from "react"
import ReactDOM from "react-dom"
import Navbar from "./navbar.js"
import Body from "./body.js"
const App = ()=> {
<Navbar />
<Body />
}
ReactDOM.render(<App/>, document.getElementById("root"))
//******************without babel react presets********************
const App = [Body, NavBar];
ReactDOM.render(App, document.getElementById("app"))
Navbar:
import React from "react"
const NavBar = () => {
return(
<navbar>
<a href="#">Articles</a>
<a href="#">Notes</a>
<a href="#">Course</a>
<a href="#">Brain</a>
<a href="#">Newsletter</a>
<a href="#">Facebook</a>
</navbar>
)
}
//************without babel react presets************
const NavBar = React.createElement("nav", null,
React.createElement("a", { href: "#"}, "Articles"),
React.createElement("a", { href: "#"}, "Notes"),
React.createElement("a", { href: "#"}, "Course"),
React.createElement("a", { href: "#"}, "Brain"),
React.createElement("a", { href: "#"}, "Newsletter"),
React.createElement("a", { href: "#"}, "Facebook")
);
//*****************************************
export default NavBar;
Body-
import React from "react"
const Body = () => {
return (
<div>
<h1>Hi, I'm Me</h1>
<p>Lorem Ipsum</p>
</div>
)
}
//**************without babel react presets************
const Body = React.createElement("div", null,
React.createElement("h1", null, "Hi, I'm Me"),
React.createElement("p", null, "Lorem Ipsum")
);
//***************************************************
export default Body;