react+rails+サーバーサイドレンダリングで開発してますよメモ①

react+railsでアプリケーション作ってるのでメモ

まだ今作ってる最中ですがだーーーーーと殴り書きでメモっていってます(´;ω;`)

## Reactでアプリケーション作るときに参考&勉強した記事

React

公式チュートリアル
react dev tool
React.jsのComponent Lifecycle
すでに動いているRailsアプリケーションにReact.jsを投入する

Webpack

webpack最低限(JavaScript編)
【意訳】Webpackの混乱ポイント
Webpack入門編
webpackを使った Rails上でのReact開発
Node.js gulpでwebpackを使う[
ECMAScript6で書こう!WebPackとES6-loaderで環境を作り、ES6を先取り体験する方法
webpack+babel環境でフロントエンドもES6開発
webpack.config.jsの読み方、書き方
なんとなくで理解しないWebpackのCSS周辺

Redux

Redux入門 1日目 Reduxとは(公式ドキュメント和訳);
ReactとFluxとReduxについて順を追って整理する
Fluxフレームワーク戦争の現状確認(前編)
これクソほどわかりやすい!!!!Reduxチュートリアル動画を見ながらReduxを基礎の基礎から

react + webpack + rails環境構築系

React+ReduxをRails環境下で開発する環境構築テンプレート(Webpackも使うし、Reduxのサーバサイドレンダリングもあるよ)
Rails + モダンJS環境(Webpack)で新規アプリ作成
Rails環境にWebpackを導入する(前半)
すでに動いているRailsアプリケーションにReact.jsを投入する
gulp.jsを用いたフロントエンド開発環境の構築

エラー系

【エラー】Refusing to install as a dependency of itself
npmのinstall時にエラーが出た。packege.jsonのnameとインストールしようとしているパッケージが同じだった

React×ES6×JSXつかってたら怒られたError/Warning集(2016/7/3)
React.Componentを作成したら出たエラーの記事。class作ったらconstructorの記述は必須ですよ。

その他

【メモ】Frontend Meetup vol.1 -SPAを語り尽くす会! 2016/9/16 @株式会社FiNC

メモ達

rquireとimportって何が違うん

Q. reactやcomponentを読み込むときに使うrequireとimportって何が違うねん
A. requireはnode jsの使い方でimportはES2015の使い方

fluxとかreduxとかなんなん

ぶっちゃけ一個のjsでも管理できるよね
Action → onClickとか
Dispatcher → this.setState
store → this.stateで定義したやつ
状態(State)を保管する場所であるStoreは1つだけ
状態(State)は基本読み取りのみ。書き込むにはStoreが提供するメソッドであるDispatchでActionを投げる時だけ
実際にActionを受け取ってStateを変更するのはReducerが受け持つが、Reducerは副作用を持たない関数でなければならない

サーバサイドレンダリングに関して

サーバーサイドレンダリングとか難易度高いのでハマるかもしれない。この環境ではSprocketにのせる前に、gulpでcompileしているので問題ない。app/assets/javascript以下にES6とか書いてる場合、サーバーサイドレンダリングできない。react_railsのサーバーサイドレンダリングではexecjs(v8)を使うんだけどrequire()が使えないため動かない。

app/frontends/にES2015で書いたreact系のComponentファイルを入れて、gulpとwebpackを通じてapp/assets/javascripts/componentにコンポーネントをES5方式で書き出し、それをreact-railsでレンダリングする

以下の用にES2015形式で書いたものをwebpackを使ってES5形式まで落としてapp/assets/javascripts/components/に書き出す

react-railsがやってくれるのはデフォルトだと、app/assets/javascripts/components.js内に記述してあるjsをSSR時に読み込みhtmlにして返すこと

これには条件があり「SSRしたいコンポーネントはwindowオブジェクトに登録されている必要がある」ので、どれだけコンポーネントを作りまくってもwindowオブジェクトに登録されいない限りSSRは出来ない。

現在進行形で困っていること

mobileとPCのリクエストでレンダリングコンポーネントを変更

React-railsはcomponents.jsをデフォルトで読み込み、components.jsの中に書かれているソースの場所からwindowオブジェクトに登録されているReactコンポーネントをSSRする

今回のプロジェクトではRack User Agentを使用してmobileとPCのレンダリングしている。

しかし、React-railsが初期レンダリング時にcomponents.jsを登録するのはアプリケーションの初期化時であるため、リクエストに応じてレンダリングを分ける事ができない。

どういうことかというと、mobile、PCともに同じ名前のHeaderコンポーネントを作った際に、components/App.bundle.jsxとcomponents/AppMobile.bundle.jsxを作った場合、headerという名前がかぶっていると先に読み込まれたほうがレンダリングサれてしまう。

あまり気持ちよくないがHeaderコンポーネントとHeaderMobileコンポーネントを作ることで対応した。
もっとうまくやりたいです。。。

jsx内で参照する画像のパスをどうするか

<%= image_path %>とかをReactコンポーネントから参照したい場合はどうしよう。

多分propsで渡すしかない
アプリケーション全体で使うもの(logo)とかはpublic/assets配下においちゃえばいいかなぁ
ユーザーのアイコンとかはpropsで渡すのが良さそう。
コンポーネントになるし。。。もし分かる人がいたら教えてください。。。

fukamiiiiinminのtwitterまでお願いします(´;ω;`)

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク