我是新手,我只是想在我的浏览器中运行一个最简单的react js文件.但我无法做到
请注意,我不想创建反应应用程序,我只想在我的本地系统上尝试它.
我做了以下
/Users/me/reactwork,我创建了2个文件clock.html和clock.js/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/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开发者工具会显示此错误
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中的代码.文件如上所述.那很有效.
Ned*_*rov 13
您可以直接react.js运行在浏览器NPM或Node.js的是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>Joh*_*ata 10
至少,您需要加载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"应用程序并在浏览器中打开它.然后,您可以对其进行更改,并在浏览器中实时更新.
| 归档时间： |
|
| 查看次数： |
25652 次 |
| 最近记录： |