web-dev-qa-db-ja.com

反応を使用する方法には構文が必要ですか？

var React = require('react')構文で構造化された反応の例がたくさんあります。これを使用しようとすると、「require is not defined」というメッセージが表示されます。 require構文を使用するように静的プロジェクトを使用および設定するにはどうすればよいですか？

更新

実際には、ReactとCommonJSをすぐに開始できるように、webpack/browserify構成ファイルを探しています。上記のビルドツールを使用せずにリアクションアプリのみを記述しました。

javascriptnode.jsreactjswebpack
12
Connor Leech

requireはReact apiではなく、ネイティブブラウザapi（今のところ）ではありません。

requireはcommonjsから来ており、node.jsで最も有名に実装されています。node.jsを使用している場合、どこでもrequireが表示されます。

ノードでの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

そして、シェルでこのコマンドを呼び出します

browserify index.js > bundle.js

これでb​​undle.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*/}
})
16
Yang Li

ところで、webpackを使用している場合は、webpack.config.js構成ファイルに次の行を追加できます。ファイルでrequireステートメントを使用する必要はありません。

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

        ],

もちろん、これはそれほど冗長ではなく、すべての開発者がそれを好むわけではありませんが、知っておくと便利です:)

3
danikoren