Question

我很反应，我只是想在浏览器中运行一个最简单的react js文件。但我无法

请注意，我不想创建反应应用，我只是想在我的本地系统上尝试。

我做了以下

在我的String convertedClass = Convert(File.ReadAllText("SomeClass.cs"));中，我创建了2个文件 clock.html 和 clock.js
然后在Chrome浏览器中输入/Users/me/reactwork。我期待看到我的时钟，但我不

我做错了什么？

我是js的新手并做出反应，刚开始阅读，所以请一步一步指导我。

这是我的文件

clock.html

/Users/me/reactwork/clock.html

clock.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel" src="clock.js">

    </script>
  </body>
</html>

Chrome开发者工具显示此错误

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

function tick() {
    const element = (
        <div>
            <h1>Hello, world!</h1>
            <h2>It is {new Date().toLocaleTimeString()}.</h2>
        </div>
    );

    ReactDOM.render(
        element,
        document.getElementById('root')
    );
}

setInterval(tick, 1000);

我重新搜索了这个错误，发现我需要服务器，所以我从我的html和js文件所在的位置发出了以下命令

Failed to load file:///Users/me/reactwork/clock.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

这会在端口8000上启动服务器，然后我转到Chrome并输入

python -m SimpleHTTPServer

，但这显示Chrome开发工具中的错误

http://localhost:8000/clock.html

更新我放弃尝试使其工作，因为反应页面建议在此链接上使用“Try React”自己尝试并使用我自己的文本编辑器（clock.js:1 Uncaught ReferenceError: require is not defined at <anonymous>:3:14 at n (https://unpkg.com/babel-standalone@6.15.0/babel.min.js:12:27049) at r (https://unpkg.com/babel-standalone@6.15.0/babel.min.js:12:27558) at e.src.i.(anonymous function).error (https://unpkg.com/babel-standalone@6.15.0/babel.min.js:12:27873) at XMLHttpRequest.i.onreadystatechange (https://unpkg.com/babel-standalone@6.15.0/babel.min.js:12:27316)）。这不起作用，正如我在上面的帖子中解释的那样。

虽然我希望我能以这种方式工作，但我无法工作，所以我决定将其作为“创建新应用程序”选项卡部分，然后修改index.js文件以使用我在我的代码中clock.js文件如上所述。这很有用。

Answer 1

至少，您需要在clock.html中加载React（和ReactDOM）。 React installation docs中提供了一些说明。

如果您想快速入门，可以使用create-react-app更简单的选项。您只需安装node + npm，然后运行create-react-app自述文件中列出的几个命令：

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

这将创建一个简单的“Hello，world”应用程序并在浏览器中打开它。然后，您可以对其进行更改，并在浏览器中实时更新它。

Answer 2

您可以直接在浏览器中运行react.js， NPM 或 NODE.JS 是不需要。这是一个片段：

// main.js

/* You don't need these imports
**  import React from 'react';
**  import ReactDOM from 'react-dom';
*/
// React and ReactDOM are already imported in you HTML
// Also import / require are NodeJS thing that doesn't exist in a browser


function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('the_root_of_your_reactJS_component')
  );
}

setInterval(tick, 1000);

<!-- index.html -->


<body>

  <!-- some HTML -->
  <div id="the_root_of_your_reactJS_component"></div>
  <!-- some other HTML -->
  
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <!-- babel is required in order to parse JSX -->

  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- import react.js -->

  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script>
  <!-- import react-dom.js -->

  <script type="text/babel" src="main.js"></script>
  <!-- import your JS and add - type="text/babel" - otherwise babel wont parse it -->
</body>

Answer 3

首先你的html文件有一些错误的语法。 head标记用于非可视元素。您需要在h1标记内添加body标记。如果您对html的了解不是那么好，我建议您在深入了解React之前先熟悉一下HTML和Javascript。

第二个问题是您在html中缺少必需的反应脚本。在使用react之前，您需要在文件中添加react和required javascript库。您可以找到有关here

的更多信息

我可以看到的第三个问题是你在html中遗漏了一个标识为root的标记。与document.getElementById('root')一致的行试图在你的html中找到一个id为root的元素来渲染内部的反应元素。

如果您不熟悉，我建议您查看W3Schools以便快速轻松地学习基本HTML和Javascript。之后，您可以开始使用官方工具create-react-app学习React。这将有助于您了解项目结构以及如何更好地工作。

Answer 4

您现在可以在开发期间使用 styleguidist 实时审核单个组件。

这是一个旨在在工程和设计团队之间共享设计知识的工具，它充当实时组件的“厨房”或“展示柜”。

虽然与 storybook 有点相似，但出于开发目的，它是可取的，因为 storybook 仅会呈现组件的静态状态（类似于电影制作中的故事板。

在 developing components in isolation 上的 create-react-app 文档中对此进行了提及。

Answer 5

您将无法使用以下路径打开文件：/Users/me/reactwork/index.html。不幸的是，React 文档没有提到这一点，也没有为您指明正确的方向。

最好的解决方案是使用 Live Server 之类的工具：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer。

如果您使用 VS Code，您可以添加此扩展程序，右键单击您的 index.html 文件，然后单击“使用 Live Server 打开”，然后即可获得所需的内容。

在本地浏览器中运行简单的反应js

5 个答案: