styled-componentsでのファイル管理方法を改善するstyled-componentsはスタイル付きの要素を手軽に作れる一方で要素の数が多くなると行数がかさみ読みづらくなってしまいます。 そこでスタイリングした要素だけを別のファイルに切り出して、フォルダにコンポーネントのファイルとまとめるとスッキリさせることができました。 スタイリングした要素のみファイルを分割 コンポーネント名となるフォルダを作りその中に下記の2ファイルを作り...styled componentsReact
Graphqlのデータを表示するためのDecoratorSPAのアプリケーションを実装する時にREST APIでなくGraphqlを利用することが増えてきました。 Graphqlを利用することで各ページに必要なデータのみを取得できるのは便利ですね。 表示するデータはGraphqlのデータフォーマットだけではない たとえば下記のようなデータを返すqueryがあるとします。 { data: { user: { ...GraphqlReactVue
styled-componentsでFontAwesome Freeを表示する方法styled-componentsでFontAwesomeを擬似要素で読み込もうとした時にうまく表示されないという現象に出会いました。 今回はnpmパッケージではなく外部CSSのFontAwesomeを擬似様相で使うときに出くわしました。 調べてみたところ指定方法に一工夫が必要なので紹介します。 通常の読み込み方法 通常無料のFont Awesomeを読み込むには下記のように指...React
ReactでDOMもデータも更新されているのにブラウザの表示が変わらない時に確認することReactでデータは更新されているのに、ブラウザ上の表示が変わらないってことないですか？ しっかりReactを使えている人にとっては起こらない現象かもしれませんが、ちゃんと理解せず使っているとハマってしまうかもしれません。 データも開発者ツールもDOMが更新されている consoleでデータを確認しても、要素を調査でDOMを確認しても意図した通りになっています。 だけど...React