マイプロファイル

コース

ログインサインアップ

React コース

シラバス:

React コース

20 レッスン 125 オンラインコーディングの質問

コースでどのトピックがカバーされますか？

Reactの基礎入門

Reactコースへの導入:
- オープニングワード。
- Reactとは何か、ライブラリの歴史について少し。
- コードベースシステムでの作業に重点を置く。

基本的なReactコンポーネント:
- ReactでのJSXとは何かを学ぶ。
- 基本的な最初のコンポーネントの書き方。
- 静的データを用いたコンポーネントの構築と基本の理解。

動的データでリストを構築する:
- 要素を動的に構築する。
- 動的構築のためのArray.prototype.mapの機能を使用する。
- ファイルからコンポーネントをインポートおよびエクスポートする。

動的データを使ったテーブルの構築:
- HTMLでのテーブルとそのコンポーネントの構造。
- テーブルを構築するためにネストされたループを使用する。
- ネストされた方法でmap関数を使用する。
- インポートされたファイルからの動的データを使用する。

Styleオブジェクトを使ったスタイリング:
- HTMLとJSXの違いを理解する。
- ページ上の要素をスタイリングする方法を学ぶ。
- 学んだスタイルで、挑戦的な方法で動的な要素構築を練習する。

ステートとイベントを持つコンポーネント

ReactでのCSSファイルの統合:
- コンポーネント構築の不可欠な部分としてのスタイルの世界を取り入れる。
- classNameが何であるか、そしてHTMLとJSXの違いを理解する。
- コースのこの時点までに学んだすべての教材の包括的な演習を取り入れる。
- CSSルールを強調し、それらが私たちの構築したシステムにどのように統合されるか。

コンポーネントにPropsを統合する:
- Reactでのpropsとその使用時期。
- Propsを使ってコンポーネントを構築し、一般的な記述方法。
- 動的な構築で書いたコンポーネントを使用する。

Propsを使ってテーブルを作成する:
- Propsを使用してテーブルを作成する。
- テーブル構築においてスマートコンポーネントを作成する。
- PropsとCSSを使ったスタイリングを用いて、複数のコンポーネントを組み合わせた動的な構築を行う。

イベントとuseStateの使用:
- 要素にonClickタイプのイベントをリンクする方法。
- スマートコンポーネントとは何か、なぜそれが必要か。
- useStateというタイプのreactフックとその使用方法。
- コンポーネントのJSX内でブーリアン条件を作成する。
- スマートReactコンポーネントを構築するためのイベント作成と状態保存の接続。

onChange イベントの使用:
- ページに入力を追加し、useState を使用して入力値を保存する方法。
- ユーザー入力データを使って動的なリストを構築する。
- 配列の詳細な説明と、値と参照の違いについて。
- コンポーネントの状態に保存された配列を操作する方法の理解。

高度なトピックとAPIの使用

イベントを使った動的なテーブルの構築:
- これまでに学んだことを統合して動的にテーブルを構築する方法の理解。
- 複数の入力を保存するためにuseStateを使用する。
- オブジェクトの配列を使った複雑なステートの使用例。

useEffectフックの使用:
- useEffectタイプのreactフックとは何か、それをいつ、どのように使用するか。
- fetchを使用したサーバー通信の実行。
- 不必要なエラーを避けるためにコードを安全にする方法の提示。
- useStateとuseEffectフックを組み合わせたスマートコンポーネントの構築。

サーバーサイド検索でuseEffectを使用する例:
- useEffectの追加的な使用法を探求する。
- コンポーネントのライフサイクルがコード実装にどのように影響するかを理解する。
- useEffectを使用した複雑な例を提示する。

追加の入力を使用する:
- チェックボックス入力とは何か、そしてその使用方法。
- ラジオ入力とは何か、そしてその使用方法。
- datetimeおよびdatetime-local入力とは何か、そしてそれらをいつ使用するか。

APIからテーブルを構築し、結果のフィルタリング:
- テーブルに関するデータをフェッチするためのAPIリクエストを作成する。
- テーブルを動的に構築する。
- スマートな結果フィルタリングを通じて検索を行う方法を学ぶ。
- コードアーキテクチャについて議論する。

上級トピックとコードアーキテクチャ

高度なフィルターの使用:
- フライト情報を表示するためのテーブルを構築する。
- スマート行コンポーネントを使用してテーブルの使用を拡張する。
- チェックボックス、datetime、テキスト入力を使用してテーブルのためのフィルターを構築する。

高度なスタイリングのためのBulmaライブラリ:
- 既製のスタイルを埋め込む学習。
- Reactプロジェクトに色とスタイルを追加するためのbulmaパッケージの使用。
- 既存のコンポーネントにスタイルを埋め込み、使用するライブラリのドキュメントを確認する。

JavaScriptでのソート:
- 既存のテーブルコンポーネントを改良し、それにソート機能を追加する。
- 数値、文字列、オブジェクトを含む配列でのソートの仕組みを深く理解する。
- フィールドが直接比較ではない場合の特別なソート処理の方法を学ぶ。

コンポーネント間の通信チャネル:
- 子コンポーネントが親コンポーネントと通信する方法を学ぶ。
- いくつかのコンポーネントにbulmaスタイリングを実装する。
- アプリケーションにタブを埋め込むことができる汎用コンポーネントを構築する。
- 関数型のpropsを使用する例を見る。

結論