Course curriculum

    1. 本講座で作るもの・学べること

    2. 本講座の学び方

    1. VSCodeのインストール

    2. Node.jsのインストール

    3. React開発環境構築

    4. Reactプロジェクト内部の説明/整理

    5. コーディングに便利なプラグインをインストールしよう

    1. はじめに

    2. Array.map()

    3. Array.filter()

    4. Array.splice()

    5. 三項演算子の使い方

    6. スプレッド構文を使ってみよう

    1. はじめに

    2. React-beautiful-dndの概念図

    3. 【追加】※React18でreact-beautiful-dndが機能しない対処法

    4. ドラッグ＆ドロップを実装してみよう

    5. 要素のスタイルを整えよう

    6. ドロップ後の並び替えを実装しよう

    7. map関数を使ってスマートに要素を出力してみよう

    1. Trello完成品のデモ

    2. Trello完成品のソースコード

    1. はじめに

    2. 全体コンポーネント構成図を確認しよう

    3. Headerコンポーネントを作成しよう

    4. 背景画像を追加しよう

    5. TaskCardsコンポーネントを作成しよう

    6. TaskCardコンポーネントを作成しよう

    7. TaskCardTitleコンポーネントを作成しよう

    8. TaskCardTitleコンポーネントの微調整

    9. TaskAddInputコンポーネントを作成しよう

    10. 入力内容をstateで管理してみよう

    11. 実際にタスクを追加してみよう

    12. Taskコンポーネントを作成してみよう

    13. Taskコンポーネントをcssで整形しよう

    14. タスクの削除機能を追加しよう

    15. タスク同士のドラッグ＆ドロップを実装してみよう

    16. ドラッグ＆ドロップ後にカードを並び替えよう

    17. タスク削除後の並び替えのバグ修正

About this course

  • 17,980円
  • 49回のレッスン
  • 4時間の動画コンテンツ

コースレビュー

Discover your potential, starting today