副作用フックの利用法 – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 エフェクトを使って同期を行う エフェクトは必要ないかもしれない useEffect フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。 副作用 (effect) フック により、関数コンポーネント内で副作用を実行することができるようになります： import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); /
正しく使えていますか？ ReactのHooks APIおさらい（応用編） - ICS MEDIA
ReactのHooks APIにはuseStateやuseEffectなどの基本系のAPIのほか、パフォーマンス改善や状態のスコープ管理など、特定のケースで使うと便利なHooksが用意されています。今回は基本形から一歩進んだ応用系のHooksのほか、コンポーネント内部のHooksを切り出す手法について紹介します。本記事は前後編の内容なので、React Hooksの入門向けの内容は前回の記事を参照ください。 useContextを使ってContextを管理する useContextを利用すると、スコープ単位でステートを共有できるContextという機能を使用できます。 useContextは現在のContextの値を読み取り、変化していた場合はそれを伝える役割をもちます。Contextを設定するためには上位のコンポーネントでProviderを決定する必要があることに注意しましょう。 Cont
ベストな手法は？ Reactのステート管理方法まとめ - ICS MEDIA
Reactでのシングルページアプリケーションを作成していると、必ず意識しなくてはいけないのが状態管理です。Hooks APIの登場により、アプリケーションの状態管理方法にも選択肢が増えてきました。2023年のReactアプリケーションの状態管理方法はどのような選択肢が考えられるでしょうか？ 状態管理の選択肢 Reactの状態管理として本記事でには紹介している手法は下記の4通りになります。 ローカルステート（useState、useReducer）での管理 Hooks APIのuseReducer、useContextを使った管理 Reduxによる管理 Recoilによる管理 状態管理フレームワークは他にも選択肢がありますが、Reduxを紹介します。理由は、候補として挙がるライブラリの中でもっともシェア数が多く、知名度が高いためです。 下図は、主要なReact状態管理フレームワークのダウンロ
The Complete Guide to React User Authentication with Auth0
Look for the 🛠️️ emoji if you'd like to skim through the content while focusing on the build steps. The focus of this tutorial is to help developers learn how to secure a React application by implementing user authentication. You'll enhance a starter React application to practice the following security concepts: Add user login and logout.Retrieve user information.Protect application routes.Call p
Reactで誰もがやりたかった10の機能。アプリ構想はあるけど作れない人の壁をぶっ壊す。 - Qiita
この記事は Reactで今どきなWebアプリを作りたい（あわよくばサーバーレスにしたい） チュートリアルは触ってみたけど、その後はどうしたら良いのか右も左も分からない という人向けに、「こんな感じで実装したら公開できるアプリとしての体裁は整いそうですぞ」というオレオレHowToをまとめたものです。 ーー追記（2019/4）ーー この記事は2018/9に作ったものなので、バージョン周りなど結構古くなっちゃってます。MaterialUIなどは今はV3が出ていてドキュメントを見る時などご注意いただければと思います。参考程度にご活用下さい。 まとめてたら少し長くなってしまったのですが、とりあえず動くソースだけくれれば良いよって人は、GitHubでソースも全て公開（MIT License）もしてますのでgit cloneするなりご自由にどうぞ。 ※最近はVue系のNuxtでこんなこともやってみたので
モック関数 · Jest
モック関数によりコード間の繋がりをテストすることができます。 関数が持つ実際の実装を除去したり、関数の呼び出し（また、呼び出しに渡されたパラメータも含め）をキャプチャしたり、new によるコンストラクタ関数のインスタンス化をキャプチャできます。 そうすることでテスト時のみの返り値の設定をすることが可能になります。 関数をモックするには、次の2つの方法があります。 1つは、テストコードの中でモック関数を作成するという方法。 もう1つは、manual mockを作成してモジュールの依存性を上書きするという方法です。 モック関数を利用する forEach 関数の実装をテストすることを考えてみましょう。 この関数は、与えられた配列の各要素に対して、コールバック関数を呼び出します。
テストのレシピ集 – React
React コンポーネントのための一般的なテストのパターン集です。 補足： このページではテストランナーとして Jest を使用することを前提としています。もし別のテストランナーを使う場合は API を修正する必要があるかもしれませんが、やり方の全体的な見た目についてはおそらく同じようなものになるはずです。テスト環境のセットアップについては テスト環境 のページをご覧ください。 このページでは主に関数コンポーネントを利用します。しかし以下に述べるテスト手法は実装の詳細には依存しませんので、クラスコンポーネントでも全く同様に動作します。 セットアップ/後始末 act() レンダー データの取得 モジュールのモック化 イベント タイマー スナップショットテスト 複数のレンダラ 何かが足りない？ セットアップ/後始末 それぞれのテストにおいて、通常われわれは React ツリーを documen
TypeScript and React
Welcome to this little primer on TypeScript and React! A match made in heaven! Why? JSX is syntactic sugar. Every JSX element you open and pass properties through, is nothing but a function call in React (or Preact or Vue or Dojo… you name it). This gives us one big advantage in TypeScript: JavaScript can be parsed, understood and evaluated. Which means you get all the tooling and compilation bene
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - laststance/react-typescript-todomvc-2022: React TypeScript TodoMVC 2022
GitHub - typescript-cheatsheets/react: Cheatsheets for experienced React developers getting started with TypeScript
GitHub - azu/large-scale-javascript: 複雑なJavaScriptアプリケーションを作るために考えること
GitHub - oukayuka/Riakuto-StartingReact-ja3.1
craco/packages/craco/README.md at main · dilanx/craco
LogRocket | Logging and Session Replay for JavaScript Apps
How to write tests for React in 2020
GitHub - oukayuka/Riakuto-StartingReact-ja3.0: 『りあクト！ TypeScriptで始めるつらくないReact開発 第3版』のサポートページ
GitHub - marmelab/react-admin: A frontend Framework for building data-driven applications running on top of REST/GraphQL APIs, using TypeScript, React and Material Design
GitHub - Saimen-Luo/todomvc-react-hooks-typescript: react-hooks-typescript 练习demo
GitHub - adam-golab/react-developer-roadmap: Roadmap to becoming a React developer
TodoMVC with React Hooks and real API CRUD - CodeSandbox