未捕获的语法错误：意外的令牌“<” React

Question

未捕获的语法错误：意外的令牌“<” React

javascriptreactjssyntax

6

我正在尝试使用React创建一个简单的网站，但由于某些原因它只显示一个空白页面。

控制台日志显示的错误是Uncaught SyntaxError: Unexpected token '<' main.js:6，这是一行非常正常的代码。能否有人告诉我错误在哪里？

非常感谢。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>U4Ever</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="main.js" type="module"></script>
    </body>
</html>

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

导航栏：

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

正文

 import React from "react"
    
        function body() {
            return (
                <div>
                    
                    <h1>Hi, I'm Me</h1>
                    
                    <p>Lorem Ipsum</p>   
                    
        
                </div>
            )
        }
        
        export default body

- Thái Sơn

2个回答

1

问题在于你所使用的React组件命名惯例。对于React组件，必须使用帕斯卡命名法。你需要按照以下方式更正你的组件。如果没有配置Babel react预设来编译JSX，则也可能会出现此问题。

如果你没有使用Babel react预设，请在你的HTML文件中添加以下CDN。你可以在这个链接找到基于CDN的解决方案的可工作代码示例。

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

导航栏：

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;

正文-

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;

- Aravinda Meewalaarachchi

虽然这是一个问题，但它并不是导致所问的错误的问题。 - Quentin

你是使用Webpack还是仅使用React CDN？ - Aravinda Meewalaarachchi

只需要使用React CDN，我猜:) - Thái Sơn

如果你能将它放到Git并分享，我可以提供帮助...如果你愿意。 - Aravinda Meewalaarachchi

使用<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>加载React不会为浏览器添加JSX支持。 - Quentin

它仍然无法工作。Main.js 包含 JSX。 - Quentin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Quentin · Accepted Answer

JSX不是JavaScript

浏览器仅支持使用import的JavaScript模块。

JSX不是JavaScript。

您需要使用Babel将JSX编译为JavaScript。

通常情况下，这将使你拥有一个应用程序，使用Node.js，在开发模式下运行一个HTTP服务器来托管您的应用程序，并在您编辑时重新编译它（在构建模式下），并输出静态已编译文件供您部署。

按照React网站上的指南设置工具链以编译您的JSX。（我不推荐第一种选项（使用客户端Babel），因为它有很多限制，比如不支持模块（您已经在使用）。）

或者，使用基于Parcel的工具链（它将比React网站上的任何选项都要轻量级，但是它是一种较少见的方法，因此您在互联网上会找到更少的帮助）。

命名

与您当前的问题无关：

React要求组件名称以<CapitalLetter>开头。