reactjsでwebアプリを作成するにあたって、とても参考になりそうなreact-webpack-nodeというBoilerplateを見つけたので、中身を見てみる。 構成は、 React + Redux Express MongoDB + mongoose となっており、フルスタック。 jsのmodule bundlerはwebpackで、hot reloadにもserver side renderingにも対応。 ログインのサンプル実装まである上に、herokuへのdeploy手順まで記載されているので、 reactjsで何か作りたい時はこれを土台に単に機能を乗せていくだけで良い感が... まずは勉強がてらcommitされているファイルを軽めにみていく。 package.jsonをみてみる scriptsは、 "scripts": { "clean": "rimraf public"

Reactのサーバーサイドレンダリング(SSR)の実装方法について、React単体のシンプルなものから、React Router, Reduxを組み合わせたものまでまとめます。 サーバーサイドはExpressを用います。 ※以下のJavaScriptのコードについて、クライアントサイドについてのみJSX + ES6形式でコーディングしており、webpackでcompileして利用しています React単体でSSR React単体でSSRを実現する場合は、ReactDOMServer.renderToStringを使用します。 参考にしたソース React単体のSSRを実装するにあたっては以下のソースを参考にしました。 react-server-example APP_PROPSを利用してfetchしたデータをクライアント側のjsと共有する点を参考にしました 静的な情報をレンダリングするパタ