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

-1

我是新的反应，我只是试图在我的浏览器中运行一个最简单的反应js文件。但我无法运行简单的浏览器在本地浏览js

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

我下面

我/Users/me/reactwork，我创建了2个文件clock.html和clock.js
然后在Chrome浏览器中，我进入/Users/me/reactwork/clock.html。我期望看到我的时钟，但我不

我做错了什么？

我对js非常陌生并且有所反应，刚开始阅读时请给我提供一步一步的指导。

这里是我的文件

clock.html

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

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

clock.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.

我reasearched这个错误，我发现我需要的服务器，所以我发出从该位置以下命令，其中我的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/[email protected]/babel.min.js:12:27049) 
    at r (https://unpkg.com/[email protected]/babel.min.js:12:27558) 
    at e.src.i.(anonymous function).error (https://unpkg.com/[email protected]/babel.min.js:12:27873) 
    at XMLHttpRequest.i.onreadystatechange (https://unpkg.com/[email protected]/babel.min.js:12:27316)

更新我放弃了试图使其工作的反应页面建议在此链接上尝试使用“Try React”并使用我自己的文本编辑器（https://reactjs.org/docs/installation.html）自己尝试。这不起作用，正如我在上面的帖子中解释的那样。

尽管我希望我能够以这种方式工作，但我没有能力，于是我决定将其作为“创建新应用”选项卡部分，然后修改index.js文件以使用我在我的clock.js文件如上所述。这工作。

来源

2017-09-30 pixel

至少，您需要在clock.html中加载React（和ReactDOM）。有些说明可在React installation docs中找到。

如果您想快速入门，更简单的选项可能是使用create-react-app。你只需要安装node + npm，然后运行在创建反应的应用程序内自述文件中列出的几个命令：

npm install -g create-react-app 

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

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

来源

2017-09-30 20:17:34

我更新了我的html文件，如上所述。我现在失踪了什么？谢谢 – pixel

谢谢你，我放弃了试图自己运行它，而是采用这种方式编辑创建的index.js文件来显示我的时钟。这工作 – pixel

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

第二个问题是您在HTML中缺少必需的反应脚本。在使用反应之前，您需要将反应和必需的JavaScript库添加到您的文件中。你可以找到更多关于这个信息here

我能看到的第三个问题是，你在你的HTML中缺少一个ID为root的标签。与document.getElementById('root')一起尝试在您的html中查找具有id根的元素以呈现react元素。

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

来源

2017-09-30 20:42:14 bennygenel

我更新了我的HTML文件像上面，但我仍然没有看到任何输出？谢谢 – pixel

你的脚本的来源是在错误的地方开始。它应该是'' – bennygenel

我移动它并更新如上，但仍然看不到输出？谢谢 – pixel

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

回答

相关问题