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

IT技术 reactjs
2021-05-08 02:24:45

我是 React 新手，我只是想在我的浏览器中运行一个最简单的 React js 文件。但我无法

请注意，我不想 create-react-app，我只想在我的本地系统上尝试它。

我做了以下

  1. 在 my 中/Users/me/reactwork，我创建了 2 个文件clock.html和clock.js
  2. 然后在 Chrome 浏览器中，我输入/Users/me/reactwork/clock.html. 我希望看到我的时钟，但我没有

我做错了什么？

我对 js 和 react 很陌生，刚开始阅读，所以请给我一步一步的说明。

这是我的文件

时钟.html

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

时钟.js

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

Chrome 开发者工具显示此错误

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

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

python -m SimpleHTTPServer

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

http://localhost:8000/clock.html

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

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)

更新 我放弃了尝试让它像react页面在这个链接上建议的那样工作，使用“尝试react”并使用我自己的文本编辑器 ( https://reactjs.org/docs/installation.html)自己尝试。正如我在上面的帖子中所解释的那样，这不起作用。

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

4个回答

你可以直接在你的浏览器NPM 中运行 react.js或者NODE.JS are NOT REQUIRED。这是一个片段：

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

至少，您需要在clock.html. React 安装文档中提供了一些说明。

如果您想快速入门，一个更简单的选择可能是使用create-react-app。你只需要安装node + npm，然后运行 ​​create-react-app README 中列出的几个命令：

npm install -g create-react-app

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

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

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

第二个问题是您的 html 中缺少所需的react脚本。在使用 react 之前，您需要将 react 和所需的 javascript 库添加到您的文件中。您可以在此处找到更多相关信息

我可以看到的第三个问题是root您的 html中缺少带有 id 的标签。符合document.getElementById('root')试图找到在你的HTML标识根元素来渲染react元素里面。

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

您现在可以在开发过程中使用styleguidist实时审核单个组件。

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

虽然有点类似于storybook，但它更适合用于开发目的，因为storybook只会渲染组件的静态状态（类似于电影制作中的故事板）。

在create-react-app文档中提到了关于单独开发组件的内容。

其它你可能感兴趣的问题
上一篇锂离子电池上的 3D 打印危险 下一篇是否可以只映射数组的一部分？(Array.map())