如何使用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'
            })

        ],

這當然不那么冗長，也不是所有的開發者都喜歡它，但知道:)