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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

我照做了

  1. 在我的中/Users/me/reactwork，我创建了2个文件 和

  2. 然后在Chrome浏览器中，输入/Users/me/reactwork/clock.html。我希望看到我的时钟，但我不知道

我做错了什么？

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

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 Dev Tools中显示错误

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)

，以使用“ Try

React”并使用我自己的文本编辑器（https://reactjs.org/docs/installation.html）自行尝试。正如我在上面的帖子中解释的那样，这没有用。

尽管我希望我能以这种方式工作，但是我却无法完成工作，因此我决定将其作为“创建新应用”选项卡部分，然后修改index.js文件以使用我clock.js中的代码。如上所述的文件。那行得通。

回答：

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

如果您想快速入门，可能更简单的选择是使用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”应用程序并在浏览器中打开它。然后，您可以对其进行更改，并在浏览器中实时查看它的更新。

以上是 在浏览器中本地运行简单的React js 的全部内容， 来源链接： utcz.com/qa/431419.html

回到顶部