javascript - 如何使用 react 需要语法？

Question

我看到很多使用 var React = require('react') 语法构建的 react 示例。当我尝试使用它时，我得到“未定义要求”。如何使用和设置我的静态项目以使用 require 语法？

更新

实际上，我正在寻找一个 webpack/browserify 配置文件，这样我就可以快速开始使用 React 和 CommonJS。我只编写了没有上述构建工具的 react 应用程序

Answer 1

require 不是 React api，也不是原生浏览器 api(目前)。

require来自commonjs，最著名的是在node.js中实现，如果你用过node.js，你会到处看到require。

由于 node 中 require 的流行，人们已经构建了一些工具，可以将用 nodejs 样式编写的代码转换为可在浏览器上使用。

使用 require 有一些好处，它可以帮助您保持代码模块化，并且对于某些项目，它允许您编写同构代码(在客户端和服务器上运行且更改最少的代码)

为了使用require，你需要使用webpack或browserify等工具，我以browserify为例。

首先创建一个'index.js'

require('./app.js');
alert('index works');

然后创建一个 app.js

alert('app works');

接下来安装 browserify cli

npm install -g browserify

在你的 shell 中调用这个命令

browserify index.js > bundle.js

现在您将拥有一个 bundle.js，在您的 html 页面中创建一个

<script src="bundle.js"></script>

您应该会看到两个警报都运行

现在你可以继续编码了，你可以在你的代码中添加 react

npm install react --save

然后以 app.js 为例

var React = require('react');

React.createClass({
    render: function(){/*Blah Blah Blah*/}
})