Javascript 如何使用react require语法？

我看到了许多使用

var react=require（'react'）

语法构造的react示例。当我尝试使用它时，我得到“需求未定义”。如何使用和设置静态项目以使用require语法

更新

---

实际上，我正在寻找一个webpack/browserify配置文件，这样我就可以快速开始使用React和CommonJS。我只编写了react应用程序，但没有提到构建工具。require不是react api，也不是本机浏览器api（目前）

require来自commonjs，最著名的实现是在node.js中，如果您使用了node.js，您将在任何地方看到requires

由于requireinnode的流行，人们已经构建了一些工具，这些工具可以将以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>

然后在app.js中要求它

var React = require('react');

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

顺便说一句， 如果您正在使用webpack，则可以将其添加到webpack.config.js配置文件中 以下几行，无需在文件中使用require语句：

 plugins: [
            new webpack.ProvidePlugin({
              'React':     'react',
              '$':          'jquery',
              '_':          'lodash',
              'ReactDOM':   'react-dom',
              'cssModule':  'react-css-modules',
              'Promise':    'bluebird'
            })

        ],

---

这当然不太详细，也不是所有开发人员都喜欢它，但最好知道：）

如果您使用的是“require”，而不是commonjs模块模式的react。您需要使用webpack或其他一些通用的JS模块加载程序，将模块转换为浏览器友好的代码Browserify是另一种（可能更适合初学者）选择，请参见编辑。实际上，我有静态文件，想知道如何使用

index.html

为项目设置webpack/browserify好的，谢谢您的解释。您有在项目中使用的示例browserify配置文件吗？browserify通常与gulp一起使用，而webpack与配置文件一起使用。好的，谢谢。我在这里使用webpack设置了一个入门模板：棒极了，看起来很棒。你可能想忽略bundle.js，因为它只是webpack的产品。你能用webpack解释一下吗？

 plugins: [
            new webpack.ProvidePlugin({
              'React':     'react',
              '$':          'jquery',
              '_':          'lodash',
              'ReactDOM':   'react-dom',
              'cssModule':  'react-css-modules',
              'Promise':    'bluebird'
            })

        ],