webネイティブな僕達

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

react-railsを使っているとdebugがしづらく困ることが多い。
Debugging server-side Javascript in a Ruby on Rails app Taming ExecJS

これ調べてみたけど結局わからなかったなーー
デバッグ方法がいまいちわからんぬ

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

結構ハマったエラー

→単純に違うファイル内でJSX内をコメントアウトしてたらそこで落ちてた
React.Component内のコメントアウトは要注意。。。

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

言葉のおさらい

仮想DOM

JSXなどで書いたファイルの中にhtmlのDOMのような記述で書いていったもの

タブ作りたいときに2つの要素の中に追加したい

根本的にjsx内にdomを書いたときにどういう値が返ってくるかわかってない(´・ω・`)
調べる

reactのclassSetアドオンを使いたいんだけどreact-railsに入ってない

としたいのだがundefinedになってしまう。
consoleでReact.addonsを出してみると

のみしかなかったのでclassSetが定義されていないのかもしれない。。。

なんか意味不明なエラーになる

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

react-railsのコンパイルというかリロードがマジ遅い

普通に3s位かかる。
おそらくこれはrailsのweblickのせいじゃなくてwebpackのbuildの速さなのではないかと予想。
webpackのbuild用にプラグインを追加 webpackで差分ビルドをする
developmentモードではwebサーバをweblick(rails server)からthinに変更

reactコンポーネントでSSRするものがたくさんありすぎて管理できない問題

みたいに沢山コンポーネントを登録していったらキリがないと思ったけど、page用のパーツを切り出せばよかった。
例えば/books/pages/show.jsxのようなファイルを作ってインポートする。
こうやるとスッキリする

export とかの詳細はこっち → MDNのexportの説明

react-rails内でのassets imageの参照をどうするか

Railsアプリrootの/frontendsディレクトリにreactのsrcを置いており、webpackを用いてapp/assets/javascripts/components/App[Mobile].bundle.jsxにコンポーネント群を置いている。
この場合、コンポーネント内のassetsのパスをどうするかで悩んでいる。
もともとdigestを付けずにpubic配下に置いてそこを参照しようとしていた。
しかし、アプリケーションに対するリクエストが増えるため却下。

対応策の候補としては以下があげられる。
①コンポーネントのpropsとして画像のパスを渡す(一番簡単)
②react-assets-pathとかのgemを使う?
③npmのmoduleを使う
後読み! Using webpack to build React components and their assets

①に関して
実際コンポーネントに渡す画像(ロゴとか矢印とか)が多くないためpropsに

のように渡す。
これが今のところ一番の候補。

②③これは調査なう

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までお願いします(´;ω;`)

« Older posts

Copyright © 2017 webネイティブな僕達

Theme by Anders NorenUp ↑