gpt4 book ai didi

reactjs - 如何在本地 PC 上运行 ReactJS?

转载 作者:行者123 更新时间:2023-12-03 13:37:49 25 4
gpt4 key购买 nike

谁能告诉我如何在我的本地电脑上运行我在 JSFiddle 中创建的 ReactJS 示例吗? ?
我对 ReactJS 还很陌生。

最佳答案

2019 年更新答案

自从我在下面写下原始答案以来,三年来事情发生了变化。

Facebook 现在有一个很好的例子,添加 React to an existing site如果您有一些基本的 Web 经验,这可能是启动和运行 React 的最简单方法。

还有一个经常更新且维护得很好的 official Facebook React starter kit这是另一个很好的起点。

2016 年原始答案

有两种快速方法:

使用入门套件

official facebook documentation提供了一个可供您下载的入门工具包,然后您所要做的就是:

  1. 解压缩入门工具包
  2. 添加helloworld.html文件位于解压的入门工具包的根目录中(根目录是包含构建和示例文件夹的目录)
  3. 编辑该 html 文件,删除文件中现有的 React 组件,然后从 fiddle 中添加任何必要的 html 部分
  4. 在根目录中添加一个名为 src 的新文件夹
  5. 在 src 目录中添加一个名为 helloworld.js 的新文件
  6. 将 js 从 fiddle 复制到该文件中
  7. 在 helloworld.html 文件中添加一个指向 js 文件的脚本标记:<script type="text/babel" src="src/helloworld.js"></script>

完成后,您的文件应如下所示:

Hello World .html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel" src="src/helloworld.js"></script>
</head>
<body>
<div id="container"></div>

</body>
</html>
src\helloworld.js
var H = React.createClass({

getInitialState:function(){
return{count:0}
},

increment:function(){
this.setState({count:this.state.count+1});
},

render: function() {
return (
<button onClick={this.increment}>I have been clicked {this.state.count}times!</button>
);
}
});

ReactDOM.render(
<H />,
document.getElementById('container')
);

在浏览器中查看

然后,在浏览器中打开 helloworld.html 文件。 Internet Explorer 不会为我打开它,文档说 Chrome 可能不喜欢单独的 js 文件,我不得不使用 Firefox。我只是右键单击该文件并选择使用 Firefox 打开。 URL 应类似于 file:///C:/Users/Tom/Downloads/react-0.14.6/react-0.14.6/helloworld.html

使用 NPM

或者,如果您熟悉 Node 和 npm,那么 that page还提供了从 npm 启动和运行 React 所需的所有说明。

关于reactjs - 如何在本地 PC 上运行 ReactJS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34924086/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com