使用 NodeJs 运行 React答案

【问题标题】：running React with NodeJs使用 NodeJs 运行 React
【发布时间】：2023-02-03 02:38:00
【问题描述】：

我正在运行一个运行 React 的本地环境 (Live Server)。我已经安装了以下软件包以确保正确运行：

反应 17.0.2 反应 dom 17.0.2

我想运行我制作的自定义导航栏，但它从浏览器端返回以下错误。

未捕获的语法错误：意外的标记 '<' main.js 18

这些是我正在使用的文件：

主程序

import React from 'react';
import ReactDOM from 'react-dom';

const navbar = () => 
{
    <div>
        <h1>Computers</h1>
        <div>
            <ul>
                <li>Pricing</li>
                <li>About</li>
                <li>Contact</li>
            </ul>
        </div>
    </div>
}

ReactDOM.render(navbar, document.querySelector(".nav"));

包.json

{
  "name": "project1_staticpage",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

索引.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'/>
    <title>Page Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"/>
    <meta name='viewport' content='width=device-width, initial-scale=1'/>

</head>
<body>
    <div class="nav">
        
    </div>
    <script type="module" src='main.js'>
        
    </script>    
</body>
</html>

我搜索了与此相关的可能问题，发现解释器期待 json，但它收到了 < 或 HTML。

似乎解决这个问题的方法是确保整个 javascript 脚本路径是正确的，尽管从我的角度来看是正确的。

如果有帮助，这是我的目录结构

enter image description here

【问题讨论】：

标签： node.js reactjs

【解决方案1】：

首先，浏览器不理解JSX语法，所以你需要先将main.js转译为浏览器可以理解的文件。看看这个tutorial

【讨论】：