【问题标题】：React with Babel without Node与没有节点的 Babel 反应
【发布时间】：2020-06-06 10:37:13
【问题描述】：

我正在创建一个 React 应用程序，而不必使用 npm 或 yarn，只是希望它通过打开 page.html 文件来工作。

我在两个文件 cockpit.html 中都有这段代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />

    <link href="https://raw.githubusercontent.com/cockpit-project/cockpit/master/src/base1/cockpit.css" type="text/plain" rel="stylesheet">
    <script src="https://raw.githubusercontent.com/cockpit-project/cockpit/master/src/base1/cockpit.js" type="text/plain"></script>
    <script src="https://unpkg.com/react@16/umd/react.development.js" type="text/plain" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" type="text/plain" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js" type="text/jsx"></script>   
    <title>Cockpit Test</title>
  </head>
  <body>

    <div id="root"></div>



    <script type="text/babel" src="cockpitTest.jsx"></script>

      </body>

      </html>

和 cockpitTest.jsx：

"use strict";


const rootElement = document.getElementById('root')

    class CockpitTest extends React.Component { 

    componentDidMount() {
      console.log("asd")
    }

    render() { 
        return (
        <div>
          <h1>test</h1>
        </div>

      );
      } 
    }

    function App(){
      return(
      <div>
        <CockpitTest name="Test"/>
      </div>
      )
    }

    ReactDOM.render(<App />, document.getElementById('rootElement'))

但是当预期 h1 文本时，我仍然得到一个空白屏幕。控制台也没有说什么，它只是空白。任何帮助将不胜感激！

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你有很多问题

内容类型

您已经在所有脚本和链接元素上设置了type 属性，以告诉浏览器 CSS 和脚本的格式是它无法理解的。 不要那样做。

只有 JSX 文件本身（在您的 last <script> 中）应该具有 type 属性。

Github 不是托管服务

您正在尝试在raw.github.com 上托管驾驶舱文件。这不是为用作 CDN 而设计的，并返回带有错误Content-Type 标头的数据。使用真正的托管服务。

网址

你将文件命名为 cockpit.jsx 但说的是src="cockpitTest.jsx"

缺少元素

你说document.getElementById('rootElement')，但也说id="root"。这些不匹配。

您在没有 Node.js 的情况下工作

React 的开发者工具使用 Node.js 编译它以获得生产级性能。几乎没有理由不在整个开发过程中使用它们。

【讨论】：

当我删除类型属性时，我在控制台中收到错误，因为每个脚本都有这个错误：CORS 策略已阻止 from origin 'null'：跨源请求仅支持协议方案： http、数据、chrome、chrome-extension、https。
@Karl — 然后，除了此答案解决的代码中的所有问题外，您还未能从 HTTP 服务器加载 HTML 文档。
我确实解决了上述所有问题，我只是从 github 复制了 cockpit.js 和 .css 文件并将它们添加到我的 react 项目的本地文件夹中。而且我仍然遇到上面提到的相同错误 + (babel.min.js:24 GET file:///A:/Users/Karl/Documents/GitHub/Cockpit-test/cockpitTest.jsx net::ERR_FAILED) 这个错误。你有什么建议我可以让它工作吗？
和我之前的评论一样：使用HTTP服务器

【解决方案2】：

先把它做成一个javascript文件.js

然后您可以：改变： rootElement = document.querySelector('#root')); 和： ReactDOM.render(<App />, rootElement)

或者： ReactDOM.render(<App />, document.querySelector('#root')) 和：删除你的常量。

我什至让 React Router 工作，但在将组件分离到文件中以获得整洁的结构时遇到了问题。无法让导入在 app.js 中工作。似乎 Babel 应该帮助导入和导出，但我无法让它工作。

【讨论】：

【解决方案3】：

首先 - 在您的脚本中输入您使用的类型“application/babel”。这不是有效的媒体类型，您可能想使用“应用程序/javascript”。这可能是什么都不显示的原因。

其次 - 您使用的脚本不是有效的 JS，您使用的是浏览器无法理解的 JSX。 JSX 允许我们在 JavaScript 中编写类似 html 的标签（例如）。您要么必须编写 JS 而不是 JSX，要么使用诸如 babel 之类的转译器转译您的 JSX。我建议运行一个编译器，比如 babel。

阅读有关 JSX 的更多信息here。

【讨论】：

“首先 - 在你的脚本中输入你使用的类型“application/babel”。这不是一个有效的媒体类型”——是的，它是。它用于识别需要使用在 title 元素之前加载的 Babel 库来解释的脚本。
"我建议运行一个编译器，比如 babel。" — 他们是！！