Uncaught SyntaxError: Unexpected token '<' React

Question

我正在尝试使用 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

Answer 1

JSX 不是 JavaScript

浏览器仅支持import JavaScript 模块。

JSX 不是 JavaScript。

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

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部署。

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

或者，使用基于Parcel 的工具链（它比 React 网站上的任何选项都更轻巧，但这种方法不太常见，因此您在 Internet 上找到的帮助较少）。

命名

与您的直接问题无关：

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

Answer 2

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

如果您不使用 babel react presets，请将以下 CDN 放入您的 html 文件中。 您可以在此处找到 cdn 基本解决方案的工作 codepen 链接。

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

主.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;

Uncaught SyntaxError: Unexpected token '<' React

问题描述

2 个解决方案

解决方案1
0 2021-05-16 07:59:32

JSX 不是 JavaScript

命名

解决方案2
0 2021-05-16 08:06:24

Uncaught SyntaxError: Unexpected token '&lt;' React

问题描述

2 个解决方案

解决方案1 0 2021-05-16 07:59:32

JSX 不是 JavaScript

命名

解决方案2 0 2021-05-16 08:06:24

Uncaught SyntaxError: Unexpected token '<' React

解决方案1
0 2021-05-16 07:59:32

解决方案2
0 2021-05-16 08:06:24