Masa engineer blog

複数のComponents間に渡るような状態管理をする場合、Component間でpropsを渡していけば、状態管理はできるものの、props chainが長くなるほどコードをメンテするのが大変になります。本記事では、なぜContextが必要になるかを図を用いて解説した後、Contextを使った方法を見ていきます。

useReducer Hookの使い方について紹介していきます。状態管理は、useStateを用いて行うことができますが、より複雑な状態管理を行う場合の選択肢としてuseReducerを利用することができます。

React カスタムフック(Custom Hook)の使い方について解説します。Reactでは独自のhook(関数)を作ることができます。カスタムフックを作ることで、複数の箇所で再利用することができます。カスタムフックの作り方と、それを利用する方法を紹介し、利用前と後の違いを見ていきます。

useEffectについて紹介していきます。副作用(side Effect)について触れた後、例を用いてどのように働くかを紹介していきます。useEffectを使用する前と後での挙動の違いを解説していきます。また依存関係がある場合とない場合についても触れていきます。

React アプリでデバッグする方法を紹介致します。コンソール上での確認方法やブレークポイントの設定、React Developer Toolを使ったデバッグ方法を簡単に解説しています。

Reactにて条件分岐による表示内容(component)の切り替え方法を紹介致します。条件分岐による切り替え方法には、三項演算子や関数定義を使う方法などがあります。本記事ではボタンによる画面表示内容の切り替えを例に紹介していきます。

Event HandlerとuseStateについて紹介していきます。ユーザーがボタンを押下する、何か画面に入力するなどの操作をトリガーとして、定義したイベントを実行する仕組みになります。useStateと組み合わせて使うことがあるため、一緒に紹介します。

Reactにてpropsの基本的な使い方を紹介致します。propsはcomponent間でデータを渡す上で必要な概念になります。propsを使うことで、文字列、数字、オブジェクトを渡すことができます。また関数(function)をポインターとして指し示すこともできます。

React プロジェクトを開始するにあたって、最初に知っておきたいことを簡潔にまとめました。ReactはJavaScriptライブラリであり、ユーザーインターフェースを構成することができます。ReactではComponentの概念が欠かせません。またJSXコードを理解しておく必要があります。