如何使用react需要语法？

Question

我看到很多反应结构与var React = require('react')语法的例子.当我尝试使用它时,我得到"require is not defined".如何使用和设置我的静态项目以使用require语法？

更新

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

Answer 1

require不是React api,也不是本机浏览器api(目前).

require来自commonjs,并且最着名的是在node.js中实现,如果你使用了node.js,你会看到无处不在.

由于节点中需求的普及,人们已经构建了工具,这些工具将以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>

你应该看到两个警报都运行了

现在您可以继续编码,您可以通过执行操作来添加代码中的反应

npm install react --save

然后在app.js中要求它

var React = require('react');

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

Answer 2

顺便说一句，如果您使用的是 webpack，您可以在您的 webpack.config.js 配置文件中添加以下几行，从而无需在您的文件中使用 require 语句：

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

        ],

这当然不那么冗长，并非所有开发人员都喜欢它，但很高兴知道:)