サーバのデータをReactコンポーネントに渡す方法

Question

Reactを学んでいますが、多くの基本を理解していますが、誰も見たことがない1つのコンセプトがあります。サーバー側の言語（例えばPHPなど）、Reactビューをロードするときに使用しますか？

私はちょうどのような、私のPHPビューでRenderDom電話を持っているだろうと期待しているでしょう：

// In the pre-compiled JSX file 
var Greeting = React.createClass({ 
    render: function() { 
     <div> 
      <h1>Hello, { this.props.username }</h1> 
     </div> 
    } 
}); 

// In my PHP view 
<script type="text/jsx"> 
    ReactDOM.render(<Greeting username="<?php echo $username; ?>"/>, document.body); 
</script> 

しかし、それは動作しません。何も表示されません。私は、text/jsxスクリプト領域が実行されないためだと思っています...しかし、私はそれを削除する場合は、構文エラーがあります。

Soo ... DBからロードされたデータをReactコンポーネントに渡す典型的な方法は何ですか？

Answer 1

ザ・は道がRESTfulなAPIを介してデータをロードすることであろう反応します。

ただし、serverside rendering of React components with PHP V8JSに見ることができます。どのくらい安定しているかはわかりませんが、そうであれば、クライアント上のAJAX呼び出しに対する非常に良い/優れた代替手段になります。それはこのように、多少なります

// the library 
$react_source = file_get_contents('/path/to/build/react.js'); 
// all custom code concatenated 
$app_source = file_get_contents('/path/to/custom/components.js'); 

$rjs = new ReactJS($react_source, $app_source); 
$rjs->setComponent('MyComponent', array(
    'any' => 1, 
    'props' => 2 
) 
); 

/// ... 

// print rendered markup 
echo '<div id="here">' . $rjs->getMarkup() . '</div>'; 

あなたが実際にブラウザでこれをレンダリングしたい場合は、代わりにJSXのプレーンなJavascriptを使用することができます。

<?php $username = 'Eric Andre'; ?> 
<script type="text/javascript"> 
    ReactDOM.render(React.createElement(Greeting, { username: "<?php echo $username; ?>" }), document.body); 
</script> 

別のオプションは、にJSXを変換することですプレーンJavascriptをbabel-browserとし、<script type="text/babel">を使用してください。 babelブラウザはもはや積極的に開発されておらず、本番用ではありません。

​​

Answer 2

また、クライアントからRESTfulなAPIを呼び出す方法についていくつかの例についてhttps://github.com/erikras/react-redux-universal-hot-exampleを見てみることができます。

は、具体的には、AJAX呼び出しを作るためたSuperAgentを使用しています..バックエンドからのデータのための https://github.com/visionmedia/superagent