ProgText – プログラミング学習のWeb教材

このサイトは、プログラミングの基本的なことから、Webアプリ開発の学習や制作の手助けになるような情報を紹介しています。

React (Hooks)

React (Hooks)

Reactは、UIを構築するためのライブラリの1つです。表示するパーツをコンポーネントごとに細かく分割し、UIを簡単に動的に制御できます。

Typescriptとの相性が良く、大規模なWebアプリにもしばしば利用されます。

React サムネ
Reactの環境構築と基本構造の確認
Reactの環境構築と基本構造の確認
Reactは、ユーザインタフェースを構築するためのライブラリです。 環境構築 スターターキット導入 早速環境を構築しましょう。このコマンドを打つ…
【React】 変数を更新したり、ifやforで表示するには
【React】 変数を更新したり、ifやforで表示するには
Reactを扱うのに、変数をDOMに埋め込むのは必須です。配列なども合わせてどのように埋め込むのか見ていきましょう。 変数の宣言場所と表示 Re…
【React】 useEffectで描画後に処理を実行
【React】 useEffectで描画後に処理を実行
`useEffect`を用いると、そのコンポーネントがレンダリングされた後に実行したいコードを書くことができます。副作用フックと呼ばれます。 u…
【React】 memoとuseCallbackで無駄な再レンダを防ぐ
【React】 memoとuseCallbackで無駄な再レンダを防ぐ
`useCallback`は、レンダリング時にコンポーネントの関数が呼び出されるときに無駄な再レンダリングを防ぐものです。 レンダリングの挙動の…
【React】 コンポーネントの作り方の基礎
【React】 コンポーネントの作り方の基礎
Reactはコンポーネントベースです。1つ1つのパーツをコンポーネントとして切り分け、それらを組み合わせて複雑なUIやアプリケーションを作成して…
【React】 イベントの処理方法
【React】 イベントの処理方法
Reactでは、クリックイベントやフォーム送信時のイベントなどを、普通のJavascriptより簡単に設定することができます。 イベントの例 例…
【React】 リストをレンダリングする際のkeyの必要性
【React】 リストをレンダリングする際のkeyの必要性
Reactでfor文等を利用し、リストで要素を出力すると、`key`の設定をするべきという警告が表示されます。では`key`を使用することで何が…
【React】 フォームの作成をして、typeに応じた値の管理をする
【React】 フォームの作成をして、typeに応じた値の管理をする
Reactでは、フォームを表示する際にデフォルトで選択しておいたり、値を簡単に変数に入れるといったことが可能です。チェックボックスやmultip…
【React】 Propsの連鎖をContextでふせごう
【React】 Propsの連鎖をContextでふせごう
コンポーネントの構造が深い場合、親から子に何度もpropで値を渡して深くのコンポーネントに値を持っていくことをしました。contextを使用する…
【React】 コンポーネントを受け取ってコンポーネントを作る関数
【React】 コンポーネントを受け取ってコンポーネントを作る関数
高階関数は、関数を受け取る関数や、関数を返す関数でした。高階コンポーネントでは、コンポーネントを受け取ってコンポーネントを返すものになります。 …
【React】 refを使って要素と紐づける
【React】 refを使って要素と紐づける
Reactでは、refを利用してDOMの要素を簡単に変数に格納することができます。 Refを試す まずは`useRef`を使用して`Ref`を作…
【React】 コンポーネントに子要素を入れる
【React】 コンポーネントに子要素を入れる
多くのコンポーネントでは、基本的な``のようにコンポーネントを利用してきました。ここでは、普通のDOMの要素のように、コンポーネントに子要素を持…
【React】 ポータルを使って外のDOMに要素を飛ばす
【React】 ポータルを使って外のDOMに要素を飛ばす
ポータルを用いることで、そのコンポーネント外にあるDOMのノードに子コンポーネントをレンダリングできます。例えばメッセージの表示やツールチップな…
【React】 Reduxことはじめ
【React】 Reduxことはじめ
React Reduxは、Reactにおけるステートを管理するためのものです。これを用いることで、コンポーネント間のデータのやり取りをスムーズに…
【React】 Reduxで非同期に値を更新
【React】 Reduxで非同期に値を更新
Reduxの特徴の一つは、素のReactでは困難な非同期処理でのステート更新が可能なことです。 特に、`@reduxjs/toolkit`を用い…
https://github.com/reactjs/reactjs.org/blob/main/LICENSE-DOCS.md https://ja.reactjs.org