webネイティブな僕達

ajaxが複数回終わったら処理をしたい時

いろんな非同期処理をやってデータを集めてから処理をやりたいーー!
ってときのちょっと困ったので調べました

でもコレ全部揃ってからやるなら初期レンダリングするのと変わんない気もするなー

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に

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

②③これは調査なう

« Older posts

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

Theme by Anders NorenUp ↑