タグ React の記事

React でウィンドウサイズが小さいときだけスライドショー表示をする方法

ピンポイントな小ネタですが、 React で「ウィンドウサイズが大きいときは画像をそのまま並べて、ウィンドウサイズが小さいときは画像をスライドショー表示する方法」についてです。今回はスライドショーの例ですが、この方法は「画面幅によって出力コンポーネントを切り替える方法」として…

JavaScript のフレームワーク React で使われる PropTypes.element と PropTypes.elementType の違いについてです。両者には次の違いがあります。意味例 PropTypes.element React エレメント …

フロントエンドフレームワーク React の Context API と useContext() の使い方についてまとめました。ウェブ上で見つかる Context API と useContext() についての説明は、読者にクラスコンポーネントの知識があることを前…

今回は Next.js を使って Jamstack なブログを作る方法を紹介します。ゴール本チュートリアルでは最終的に以下の構成のブログサイトを作ります。ページ構成「フロントページ」「投稿一覧ページ」「投稿詳細ページ」の 3 つだけのシンプルな構成です。投稿の管理方法…

React ベースの静的サイトジェネレータ（ SSG ）である Gatsby が公式に提供するプラグインとテーマについてまとめました。正確には、公式の monorepo リポジトリ ↓ で管理されているプラグインとテーマを一覧にしました。記事執筆時点で monorepo…

今回は静的サイトジェネレーターの Gatsby を使ったプロジェクトにおいて Google Analytics Reporting API v4 を使って投稿一覧を作成する方法を紹介します。前提今回は 2020 年時点で最新の Reporting API v4 を使います。…

最近 React ベースのフレームワークである Next.js と Gatsby を使っています。ある程度客観的に比較できるだけの知識がたまったと思うので、 Next.js と Gatsby の比較情報をまとめてみました。これからどちらを使うか・学ぶか迷っている方のご参考に…

JavaScript のフレームワーク React に関する小ネタです。掲題のとおり「 state hook で array を扱っているときに、 array を更新してもコンポーネントの再描画が起こらない」という問題についてです。今回動作確認に使った React のバージ…

Gatsby 公式のブログ用テーマ gatsby-theme-blog を使うときの tips 集です。追記 2020/07/29: この説明は gatsby-theme-blog のバージョン 1.x 系に対するものです。 2020 年 7 月にリリースされた …