Reactの学習と理解 - 実践チュートリアル

ここで、さらに取り扱われるトピックが紹介され、このコースの背後にある動機が説明されます。

JavaScriptのUIフレームワークは数え切れないほどありますが、なぜReactを選ぶべきなのでしょうか？このライブラリが非常に人気があることに加えて、Reactを選ぶべき理由がいくつかあります。

このレッスンでは開発環境をセットアップし、npm create vite で手軽に最初のReactアプリを作成します。

前回のレッスンで私たちは「新しい」Reactアプリを作成しましたが、このレッスンでは、このアプリの構造を理解し、Reactをウェブサイトに組み込む方法について説明します。

変数 vs. let/const に関する小さなリフレッシャー。

デストラクチャリングは、オブジェクトや配列から要素を狙い撃ちで取り出すことを可能にします。注意深く見ると、多くの応用が見つかり、JSコードをよりエレガントでコンパクトにすることができます。

関数はJavaScriptで重要であり、これまで単にキーワード function を使用して宣言および定義されていました。ES6は、コードをより読みやすくし、this の厄介な問題に対する解決策を提供するエレガントで短い記法を導入します。

NodeJsでは最初からモジュールが使用されていましたが、最初はCommonJsモジュール形式にのみrequireを使用していました。ES6以降、標準のモジュール定義と新しいキーワードimport/exportが導入されました。現在、この形式はほとんどの（新しい）JSライブラリでサポートされており、最新バージョンのNodeJsでも対応しています。

JSXでコンポーネントのUIを記述し、その中にJS式を組み込みます。ビデオのプロジェクトファイルには、このチュートリアルセクションの完成したコードが含まれています。

独自のReactコンポーネントは、JSXを返す関数を使用して非常に簡単に記述できます。

このレッスンでは、データやJavaScriptの式をJSXに統合する方法について説明します。

変更可能な状態がないと、意味のあるアプリを実装するのはほとんど不可能です。Reactでは通常、useStateが使用されます。このレッスンでは、このフックを紹介し、その使用方法を説明します。

Propsはデータを子コンポーネントに渡すために使用されます。ここでは、これがどのように行われ、何に注意する必要があるかについて説明します。

Props が動的に変化すると、コンポーネントの対応するレンダリング関数が再度呼び出されます。

ここでは、To-doアプリがどのように構築されるかが説明されています。ビデオには、このチュートリアルセクションの完成したコードが含まれたプロジェクトファイルが添付されています。

親コンポーネントに子コンポーネントが何かを伝えたい場合、それはコールバックプロップを介して行われます。

To-dosはいつかは完了するべきです。ここでは、コード内でそれがどのように機能するかについて説明します。

UIの外観は間違いなく重要です。そのため、Emotionライブラリを使用して外観を設定する方法や、Prop classNameの使用方法について説明します。また、各要素を詳細にスタイリングできるstyle-属性についても説明します。

Todo配列のフィルタリングを行うと、Todoを2つのグループに分けることができます。

当然、To-dosも削除する必要があります。 ここでは、これが配列フィルタリングによって機能する方法が説明されています。

これまで私たちは常にコンポーネントをDIVで「囲んでいました」。しかし、特定の場合にはこれを省略することもできます。

今、興味深いことが起こります：To-dosはブラウザのストレージに比較的簡単に永続的に保存でき、もちろん再度ロードすることも可能です。 そのため、ページをリロードしてもTo-dosが「生き残る」のです。

useEffectを使用すると、副作用を組み込むことができます。この機能を使用して、コンポーネントのマウントを処理することもできます。

私たちのToDoアプリに関する簡単な要約と最終的な改善点。

ビデオプレイヤーアプリはcreate viteで作成され、アプリの構築方法が説明されています。ビデオに添付されたプロジェクトファイルには、ビデオプレイヤーの完成コードが含まれています。

属性refを使用してDOM要素を参照し、useRefでアクセスできます。 ここではビデオ要素を使用しています。

私たちは既に再生、一時停止、停止のボタンを持つ実際のビデオプレイヤーを作成します。

再生と一時停止は同時に必要ないため、これらを1つのボタンに組み合わせます。

ビデオ要素の独自のコントロールがビデオを制御しますが、Play/Pauseボタンの状態が適切に更新されないことがあります。これをビデオ要素のイベントハンドラを使用して解決します。

音量は専用のつまみで調整できます。

ビデオ内の任意の位置にジャンプ（シーク）することは、currentTime プロパティを設定することで驚くほど簡単に行うことができます。

ビデオの長さは、ビデオメタデータの読み込み後に初めて確定されるため、正しいイベントを待たなければなりません。

プレイリストは、select要素を使用して実装されたリストによって実現されます。

ここでは、useEffectを使用して、src-プロパティの変更に反応し、ビデオプレーヤーの状態をリセットしています。

プレイリストは固定エントリから配列に変換されます。

さて、動画リストの編集が登場します：ビデオエントリの追加を追加します。

追加したものは削除できる必要があります。これは、To-do-アプリと同様にフィルタリングによって行います。

プレイリストは、「ブックマークリスト」としてだけでなく、ビデオを自動的に連続再生するためにも使用されます。このレッスンで実装されます。

我々目次へのボタン。

最初と最後のビデオに特別な処理が行われます：NextボタンとPreviousボタンがそれぞれ無効になります。

今保存して、プレイリストをロードします。これはブラウザのローカルストレージにあるTo-doアプリに対応します。

ビデオプレーヤーアプリで使用される例として、以下のウェブサイトで元のビデオを確認できます（すべてのCC-表示ライセンス、該当するウェブサイトを参照してください）:

Elephants dream: https://orange.blender.org/
Big Buck Bunny: https://peach.blender.org/
Sintel: https://durian.blender.org/

自作のフック関数を作成する方法を、useJsonFetch-フックを例に説明します。

useStateのセッターを使用した状態変更はトリッキーですが、useImmerを使用すると問題ありません。

UIが適切に構築され、ユーザーの入力に対して迅速に応答するように、レンダー関数が不必要に呼び出されないように注意してください。 memoを使用すると、Propsが変更されない場合にコンポーネントがレンダリングされるのを防ぐことができます。

useCallbackを使用すると、Callback-Propsが使用される場合に子コンポーネントの不要な再レンダリングを防ぐことができます。

レンダリング関数内での複雑な計算は、必要な場合にのみ実行すべきです。 useMemo を使用すると、これらの計算の結果を依存関係を考慮してキャッシュできます。

私はここで、コースの結果を要約し、参加者がコースの後に何を見るべきかについての​​手引きを行います。