web-dev-qa-db-ja.com

呼び出しReact Expressからの表示

Express.jsルートを接続してreactビューを呼び出すことができる最低限の良い例を見つけることができません。

これまでのところ、これは私が持っているものです。

+-- app.js
+-- config
|   +-- server.js
+-- routes
|   +-- index.js
+-- views
|   +-- index.html

app.js

require('./config/server.js');
require('./routes/index.js');

設定| server.js

"use strict";
var express = require('express'),
app = express(),

routes = require('./routes');

app.set('view engine', 'html');
app.engine('html', ); // how do I tell express that JSX is my template view engine?

var port = process.env.PORT || 3000;

app.engine('handlebars', exphbs({ defaultLayout: 'main'}));
app.set('view engine', 'handlebars');


var server = app.listen(port, function(){
    console.log('Accepting connections on port ' + port + '...');
});

ルート| index.js

app.get('/', function(request, response){
    // how do we call the route that will run index.html ?
    request.render('index');
});

ビュー| index.html

<!DOCTYPE html>
<html>
<head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
    <script type="text/jsx" src="build/noEpisodes.js"></script>
</head>
<body>
    <div id="noEpisodesMessage"></div>
</body>
</html>

次に、index.htmページと生成されたjsx。

javascriptnode.jsreactjsreact-jsx
12
PositiveGuy

通常は、 react-router を使用してルートを処理し、Reactアプリを単一のReactアプリ（つまり、すべてのJSXソース）として記述します。最終的には単一のapp.jsファイルにバンドルされます。このファイルはすべての「ページ」または「ビュー」をロードする方法を知っており、Express（またはHapi、またはその他のサーバープロセス）を主にAPIおよびアセットサーバーとして使用します。ページ/ビュージェネレータ。

次に、react-routerルーターオブジェクトで設定したルートを利用して、エクスプレス側でreact-routerがコンテンツの読み込みに処理できるURLにユーザーを転送できるようにします。

  1. ユーザーリクエストsite.com/lol/monkeys
  2. /＃/ lol/monkeysへのエクスプレスリダイレクト
  3. ルーターのルートにより、reactアプリは正しいビューをロードします
  4. オプションで、アプリはhistory.replaceStateを実行して、ユーザーにsite.com/lol/monkeysが表示されるようにします（これを行うためのreact-routerのトリックがいくつかあります）

サーバー側のレンダリングを介してこれのほとんどを自動化することもできますが、名前が混乱する可能性があります：あなたまだサーバーがないかのようにReactアプリを作成します関与し、Reactのレンダリングメカニズムに依存して、要求されたURLの個々の「ページ」を完全にレンダリングします。これにより、またアプリを読み込んで、サイレントにすべての正しい初期コンテンツが表示されます。ユーザーが見ているコンテンツにフックして戻すと、最初のページの読み込みを過ぎたインタラクションは再びReactによって処理され、後続のナビゲーションは「偽の」ナビゲーションになります（URLバーに新しいURLが表示されます）ただし、実際のネットワークナビゲーションは発生しません。Reactは単にコンテンツをスワップイン/スワップアウトします）。

これの良い例は https://github.com/mhart/react-server-example

10
Mike 'Pomax' Kamermans

他の答えは、reactを使用する通常の方法で機能し、そのようにdom内の要素を置き換えます

React.render(<APP />, document);

ただし、reactをExpressの「テンプレート言語」にしたい場合は、reactを使用して次のような単純なhtml文字列をレンダリングすることもできます。

app.get('/', function(req, res) {
  var markup = React.renderToString(<APP />);  // <-- render the APP here
  res.send(markup);                          // <-- response with the component
});

すべての依存関係をバンドルし、jsxを操作するという点で、注意が必要なことが他にもいくつかあります。この単純なミニマリスト チュートリアル そしてこれ ブログ投稿 私は状況をよりよく理解するのに役立ちました

チュートリアルのサンプルコードはこの構文を使用していることに注意してください

var markup = React.renderToString(APP());

これは非推奨になり、エラーが発生します。それを使用するには、交換する必要があります

var APP = require('./app');

と

var APP = React.createFactory(require('./app'));

または、最初の例で行ったようにjsxをレンダリングします。チュートリアルを機能させるには、package.jsonの依存関係の最新バージョンを使用する必要があったかもしれません。

それを理解したら tutorial は、react-engineを使用してexpress内でreactをレンダリングするより強力な方法を示しています

3
ChetPrickles

シンプルにしたい場合は、アプリのエントリポイントに対してこれを行うことができます。

ルート| index.js

app.get('/', function(request, response){

    // how do we call the route that will run index.html ?
    res.sendfile('../views/index.html');
});

Reactは、そのrenderメソッドでindex.htmlページの特定の要素をターゲットにします。

React.render(<Application />, document.getElementById('foo'));

したがって、JavaScriptがindex.htmlに含まれていて、そのIDを持つ要素が存在する場合、reactはアプリケーションをそのdivに挿入します。その時点から、react-router ORを使用して、すべてのルーティングを実行できます。Expressでさまざまなルートを設定し、index.htmlと同じように処理できます。

2
deowk

React.renderを手動で処理する代わりに、react-helper（ https://github.com/tswayne/react-helper ）というライブラリを使用できます。 divを設定し、reactコンポーネントをdivにバインドし、コンポーネントのサーバー側にプロパティを渡すことができます。ノードアプリ用にwebpackを構成している場合、またはbabelを使用する場合は、サーバー側のレンダリングを処理することもできます。 -登録（製品には推奨されません）。

1
Tyler