カテゴリー：React
-
【React】「emotion」について
11.12
特徴 Styled Componentsなど他のCSS in JS思想のライブラリに比べて色々な使い方がある。 インストール [crayon-63e145bf636ca545698641/] サンプル1（Sassと同じ記法） [c…
-
Styled Componentsとは？ 根強い人気があって今でも人気上位のReact CSSライブラリになります。 メリット sassと同じ記法で記述ができ、hoverなどが使える。（普通のcssがデフォルトで拡張されている。）、な…
-
ブロックレベル要素 Boxコンポーネント 普通のHTMLで言えばdivの代わりになります。（divだとsxが使えない） sx Propsを直接記述できるのでレイアウトの基礎になります。v4でもありましたが、v5ではパフォーマンスが…
-
基本的な使い方 [crayon-63e145bf68b95208409187/] createThemeという関数でthemeを作って、ThemeProviderというコンポーネントにラップしてthemeをソース全体に適用させます。 …
-
サンプルコード カスタムフックとして以下のhooksを定義します。 [crayon-63e145bf69267266009079/] request REST APIで言うところのAxiosになります。GraphQLの場合はrequ…
-
Next.jsではクライアントサイドとサーバーサイドの処理を扱うことができるのでApolloClientを使う場合は処理の切り分けが重要になってきます。 サーバーサイドで実行される箇所（SSG、ISR：getStaticProps、get…
-
REST API & Reduxの場合 グローバルストアにReduxを使ってコンポーネント間で状態管理します。 GraphQL & Apollo Clientの場合 GraphQLとApollo Clientの場合はグ…
-
【React】バージョン「18」について
06.04
Suspenseコンポーネント データの受け取り状態を検知できるコンポーネント [crayon-63e145bf6be50385180402/] 任意のコンポーネント（非同期処理があるもの）が返ってくるまで待機中に表示させたいコンポー…
-
環境変数設定ファイル .env 汎用的な環境変数ファイルです。プロジェクトのルートディレクトリに配置します。 変数の定義方法 React [crayon-63e145bf6c571910588230/] Next.js [cr…
-
【React】「CSSの選択肢」について
03.06
ReactのCSS記述方法は戦国時代らしい。しっかり学習しておく必要がある。 Pure CSS 通常のCSSです。create-react-appした時にデフォルトで適用されているCSSでもあります。 メリット 「通常のCSS」なの…