CODEWITHSUNDEEP
renderreact-dom
MarkoIgic
MarkoIgic

Reputation: 1

How to resolve expected token "<" problem in React

When I write the code below , I receive this error, that is expected "<". The error refers for the last line of posted code. I reviewed code couple times but cannot find error

import React from "react";


export default function Navbar(){
    return <h1>Place for Navbar</h1>
}

import React from "react";

export default function Main(){
    return <h1>Place for Main</h1>
}


import React from "react";
import Navbar from "../componenets/Navbar";
import Main from "../componenets/Main";
export default function App(){
    return (
        <div className="container">
            <Navbar />
            <Main />
        </div>
        )
}

import React from "react";
import  ReactDOM  from "react-dom";
import App from "./App";


ReactDOM.render(
    <App />, document.querySelector(".root")
)

Upvotes: 0

Views: 47

Answers (1)

Quentin
Quentin

Reputation: 943615

JSX syntax is not supported in JavaScript. You need to transpile it into JS before sending it to the browser.

This is usually done using Webpack but other tools are available.

The React documentation has a guide to setting up a React project that includes setting up a suitable toolchain. MDN has it's own version.

Upvotes: 1

Related Questions