• ホーム
• React

カテゴリー：React

1. 09.28

   StoryBookの基本

   アプリケーションとUIコンポーネントを切り離し、独立した状態でコンポーネントの開発を行うことができるオープンソースツールです。 特徴 開発したUIコンポーネントをカタログとして一元管理します。 カタログ上でコンポーネン…

   • JavaScript, React
   • コメントを書く

2. 09.27

   【React】setTimeoutのテスト

   [crayon-66dfb70aafe6c945625191/] テストコード [crayon-66dfb70aafe73766615241/] waitFor setTimeoutの結果を待ちます。 int…

   • React
   • コメントを書く

3. 09.26

   【React】viteでjestを導入する方法

   昨今はtypescriptを使うのが当たり前ですのでtsに対応したjestを導入 [crayon-66dfb70ab014a346953775/] 追加パッケージ npm i -D jest-environment-js…

   • React
   • コメントを書く

4. 09.07

   【React】カスタムフックについて

   特徴 基本はただの関数になるのですが、ただの関数なのにhooksの各機能を使用することができます。普通のJavaScriptの関数だとhooksは使えないです。 コンポーネントからロジックを分離して、ロジックを使いまわそうとい…

   • React
   • コメントを書く

5. 11.10

   【Recoil】概要

   Reactの状態管理ライブラリの一つです。2020年に発表されてReactを作っているfacebookが開発しているライブラリのためこれから主流になるといわれています。非常に簡単にグローバルな状態管理を実現できます。 メリット …

   • React
   • コメントを書く

6. 11.09

   【React】「Material-UI」のデザイン手法(Theme、Box、Container、Typographyなど）

   Theme 基本的な使い方 [crayon-66dfb70ab0af3339641587/] createThemeという関数でthemeを作って、ThemeProviderというコンポーネントにラップしてthemeをソース全体に適用…

   • React
   • コメントを書く

7. 10.08

   【React】react-queryでGraphQLを使う

   サンプルコード GraphQLの操作情報は以下のように定義しておきます。指定したい情報を定義します。（下の例で言えばname) [crayon-66dfb70ab0e34704754694/] カスタムフックとして以下のhooksを定…

   • GraphQL, React
   • コメントを書く

8. 10.08

   【Next.js】「Hasura」と「Apollo Client」の連携

   Next.jsではクライアントサイドとサーバーサイドの処理を扱うことができるのでApolloClientを使う場合は処理の切り分けが重要になってきます。 サーバーサイドで実行される箇所（SSG、ISR：getStaticProps、get…

   • GraphQL, Hasura, Next.js, React
   • コメントを書く

9. 10.08

   【React】GraphQL &Apollo Clientでの状態管理

   REST API & Reduxの場合 グローバルストアにReduxを使ってコンポーネント間で状態管理します。 もしくは、最近はRecoilなども使われることも多いです。 GraphQL & Apollo Clie…

   • GraphQL, React
   • コメントを書く

10. 06.04

    【React】バージョン「18」について

    開発時にstrictモードでは2回レンダリングが行われる。 React18のstrictモードの仕様になります。yarn startなどの開発モードでアプリケーションを起動した場合だけ適用されます。yarn buildでビルド時には…

    • React
    • コメントを書く