【问题标题】：Uncaught SyntaxError: Unexpected token '<' ReactUncaught SyntaxError: Unexpected token '<' React
【发布时间】：2021-08-05 19:21:06
【问题描述】：

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

控制台日志中显示的错误是 Uncaught SyntaxError: Unexpected token '，这是一条非常正常的行。谁能告诉我错误在哪里？

非常感谢。

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

【问题讨论】：

标签： javascript reactjs syntax

【解决方案1】：

问题在于您用于反应组件的命名约定。对于反应组件，您必须使用帕斯卡大小写。您的组件应按如下方式更正。当您未配置 babel react 预设以编译 JSX 时，也会发生这种情况。

在你的 html 文件中放入以下 CDN如果你没有使用 babel react 预设。你可以找到cdn基础解决方案工作codepen链接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"))

导航栏：

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;

【讨论】：

虽然这是 a 问题，但这不是问题导致的错误。
你是在使用 webpack 还是仅仅响应 cdn？
反应cdn吧，我猜:)
如果你能把它放到 git 上分享...我可以帮忙...如果你喜欢
使用 <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> 加载 React 不会向浏览器添加对 JSX 的支持。

【解决方案2】：

JSX 不是 JavaScript

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

JSX 不是 JavaScript。

你需要使用 Babel 将 JSX 编译成 JavaScript。

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

按照guidelines on the React website 设置用于编译 JSX 的工具链。（我不推荐第一个选项（使用客户端 Babel），因为它有很多限制，例如不支持模块（您已经在使用）。

或者，使用Parcel-based toolchain（这将比 React 网站上的任何选项都更轻巧，但这是一种不太常见的方法，因此您在 Internet 上找到的帮助较少）。

命名

与您当前的问题无关：

React 要求以<CapitalLetter> 开头的组件命名

【讨论】：

我已经安装了 Babel 并将所有名称更改为 CapitalLetter，但它仍然不起作用。它仍然是空白并出现相同的错误。
安装 Babel 是不够的。您必须按照 React 网站中的说明设置工具链，使用它编译代码，然后运行生成的代码。