web-dev-qa-db-ja.com

ReactJSをビルド/コンパイル/本番環境にデプロイする最良の方法

私はreactJSを初めて使用し、コードを本番環境にデプロイするための最良の方法を理解しようとしています。以下のリンクに従って、私は以下のコードとしてbabelを使用して構築していますが、これが良いのか、またはReactJSを本番環境にデプロイすることに関する他のベストプラクティスがあるのか​​と思っていました：

npm init -y
npm install --save-dev babel-cli
npm install --save-dev babel-preset-es2015 babel-preset-react

babel --presets es2015,react --watch src/ --out-dir dist

http://www.sitepoint.com/getting-started-react-jsx/

ここに私のindex.htmlとmain.jsファイルがあります：

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Resources prototype</title>
    <!-- React / Babel / Jquery Libraries -->
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.min.js"></script>
    <script src="jquery.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel" src="main.js"></script>

  </body>
</html>

main.js

var First = React.createClass({
  render: function() {
    return (
      <div className="First">
        Hello, world!
      </div>
    );
  }
});
ReactDOM.render(
  <First />,
  document.getElementById('content')
);
reactjsreact-jsxjsx
8
Aujasvi Chitkara

Webpackを使用してコードをバンドルすることをお勧めします。アプリ全体を1つのファイルにまとめます（Webpackをもう少し最適化する場合はいくつかのファイルにします）。次に、バンドルされたjsファイルを単にロードする非常に基本的なindex.htmlファイルを作成できます。それを好きな方法で運用サーバーにプッシュします。

Webpackを使い始めるのに適したチュートリアルを以下に示します。 WebpackとBabelを使用するES6の場合、Reactを設定する （そうしないと、これらがたくさんあります。これは好きです）

Reactの現在の課題の1つは、最適なバンドルサイズよりも大きいです。複雑なアプリの場合、これは最初のページの読み込みで問題になる可能性があります。同型レンダリングを入力してください。Reactはサーバー側で実行し、アプリのスナップショットをレンダリングしてすぐにダウンロードできます。次に、実際のApp Bundleがダウンロードされると、現在のDOMとシームレスにピックアップして、彼らがあなたのページに到着したとき、はるかに素早いユーザー体験。

Reactで同形レンダリングを行う例を次に示します。 Githubの例

詳細については、Googleで「ReactJS同形レンダリング」をスローしてください。
頑張って楽しんでください-これはクールなものです:)

16
Ian