Uncaught SyntaxError: Unexpected token '<' React

1
votes

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
javascriptreactjssyntax

2 Answers

0
votes

JSX is not JavaScript

Browsers only support JavaScript modules for import.

JSX is not JavaScript.

You need to compile 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 recompiles it as you edit and (in build mode) will output static, compiled files for you to deploy.

Follow the guidelines on the React website to set up a toolchain for compiling your JSX. (I do not recommend 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 common approach so you'll find less help for it on the Internet).

Naming

Unrelated to your immediate problem:

React requires components be named starting with a <CapitalLetter>

0
votes

The problem is with the naming convention that you have used for react components. For the react components, you have to use pascal case. Your components should be corrected as follows.This can be also occurs when you are not configure your babel react presets in order to compile 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.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/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;