在本地浏览器中运行简单的 react js [英] Run simple react js in browser locally
问题描述
我是 React 新手，我只是想在我的浏览器中运行一个最简单的 React js 文件.但我无法
请注意，我不想 create-react-app，我只想在我的本地系统上尝试.
我做了以下
- 在我的
/Users/me/reactwork中，我创建了 2 个文件 clock.html 和 clock.js - 然后在 Chrome 浏览器中，我输入
/Users/me/reactwork/clock.html.我希望看到我的时钟，但我没有
我做错了什么?
我对 js 和 react 很陌生，刚开始阅读，所以请给我一步一步的说明.
这是我的文件
clock.html
<头><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><身体><div id="root"></div><script type="text/babel" src="clock.js"></html>clock.js
从'react'导入React；从 'react-dom' 导入 ReactDOM；功能滴答(){const 元素 = (<div><h1>你好，世界！</h1><h2>它是{new Date().toLocaleTimeString()}.</h2>);ReactDOM.render(元素，document.getElementById('root'));}setInterval(tick, 1000);
Chrome 开发者工具显示此错误
Failed to load file:///Users/me/reactwork/clock.js:跨源请求仅支持协议方案: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 未定义在 <匿名>:3:14在 n (https://unpkg.com/babel-standalone@6.15.0/babel.min.js:12:27049)在 r (https://unpkg.com/babel-standalone@6.15.0/babel.min.js:12:27558)在 e.src.i.(匿名函数).错误(https://unpkg.com/babel-standalone@6.15.0/babel.min.js:12:27873)在 XMLHttpRequest.i.onreadystatechange (https://unpkg.com/babel-standalone@6.15.0/babel.min.js:12:27316)更新我放弃了尝试让它像反应页面在此链接上建议的那样工作，而是使用尝试反应"自行尝试并使用我自己的文本编辑器(https://reactjs.org/docs/installation.html).正如我在上面的帖子中所解释的那样，这不起作用.
虽然我希望我能以这种方式工作，但我做不到，所以我决定将它作为创建新应用程序"选项卡部分，然后修改 index.js 文件以使用我在我的如上所述的clock.js 文件.那行得通.
至少，您需要在 clock.html 中加载 React(和 ReactDOM).React 安装文档中提供了一些说明.
如果您想快速入门，一个更简单的选择可能是使用 create-react-app.你只需要安装 node + npm 然后运行 create-react-app README 中列出的几个命令:
npm install -g create-react-app创建反应应用程序我的应用程序cd 我的应用程序/启动这将创建一个简单的Hello, world"应用程序并在浏览器中打开它.然后您可以对其进行更改并在浏览器中实时查看更新.
I am new to react and I am just trying to run a simplest react js file in my browser. But I am unable to
Please note that I do not want to create-react-app, I just want to try it on my local system.
I did following
- in my
/Users/me/reactwork, I created 2 files clock.html and clock.js - then in Chrome browser, I enter
/Users/me/reactwork/clock.html. I expect to see my clock but I dont
What I am doing wrong?
I am very new to js and react, just started reading so please provide me step by step instructions.
Here are my files
clock.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>
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 Developer Tools shows this error
Failed to load file:///Users/me/reactwork/clock.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
I reasearched this error and found that I need server so I issued following command from the location where my html and js files are
python -m SimpleHTTPServer
this starts a server on port 8000, then I went to Chrome and typed
http://localhost:8000/clock.html
, but this shows error in 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)
UPDATE
I gave up trying to make it work as react page suggests on this link to try it on your own using the "Try React" and use my own text editor (https://reactjs.org/docs/installation.html). That did not work as I explained in my post above.
Although I wish I could get it work this way, I was not able, so I then decided to do it as the "Create New App" tab section, then modified index.js file to use the code I had in my clock.js file as described above. That worked.
At the very least, you will need to load React (and ReactDOM) in clock.html. Some instructions are available in the React installation docs.
If you want to get started quick, an easier option might be to use create-react-app. You just need to install node + npm and then run the few commands listed in the create-react-app README:
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
That will create a simple "Hello, world" app and open it in your browser. Then you can make changes to it and see it update in the browser in real time.
这篇关于在本地浏览器中运行简单的 react js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
