このブログはReact製のジェネレーターツールGatsbyで作っています。
Webpackによってコンパイルされていますが、aliasの設定がデフォルトではされていないためimportのパスを書くのがつらい状態でした。
ずっと放置したくもなかったのでgatsbyでwebpackのaliasを設定する方法を調べてみました。
gatsby-node.jsにwebpackの設定を追加す...
#React
「React」に関する記事一覧
react-create-appでアプリケーションを作るとwebpackのaliasの指定できないのか？と思いつつimportのパスを書いてました。
使う頻度が増えるに連れていい加減なんとかできないかと思って調べてみるとnpmパッケージを一つインストールすれば設定することができました。
react-app-rewiredをインストール
react-create-appのwebpac...
styled-componentsはスタイル付きの要素を手軽に作れる一方で要素の数が多くなると行数がかさみ読みづらくなってしまいます。
そこでスタイリングした要素だけを別のファイルに切り出して、フォルダにコンポーネントのファイルとまとめるとスッキリさせることができました。
スタイリングした要素のみファイルを分割
コンポーネント名となるフォルダを作りその中に下記の2ファイルを作り...
SPAのアプリケーションを実装する時にREST APIでなくGraphqlを利用することが増えてきました。
Graphqlを利用することで各ページに必要なデータのみを取得できるのは便利ですね。
表示するデータはGraphqlのデータフォーマットだけではない
たとえば下記のようなデータを返すqueryがあるとします。
{
data: {
user: {
...
styled-componentsでFontAwesomeを擬似要素で読み込もうとした時にうまく表示されないという現象に出会いました。
今回はnpmパッケージではなく外部CSSのFontAwesomeを擬似様相で使うときに出くわしました。
調べてみたところ指定方法に一工夫が必要なので紹介します。
通常の読み込み方法
通常無料のFont Awesomeを読み込むには下記のように指...
Reactでデータは更新されているのに、ブラウザ上の表示が変わらないってことないですか？
しっかりReactを使えている人にとっては起こらない現象かもしれませんが、ちゃんと理解せず使っているとハマってしまうかもしれません。
データも開発者ツールもDOMが更新されている
consoleでデータを確認しても、要素を調査でDOMを確認しても意図した通りになっています。 だけど...Nuxt.jsを身につけたい！
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発