【プロゲート】React ReactIIIの学習内容まとめ

React III

1.ReactでWebサイトを作ろう

Webサイトを作ろう
・ここから「学習コース Ⅲ」と「学習コース Ⅳ」の2レッスンを使って、
Reactを使った本格的なWebサイトを作っていく
・より実践的なReactの使い方を身につける

目標物を確認しよう
・「学習コース Ⅲ」では、左の図のような、Webサイトを作成する
・またレッスンのカードをクリックすると、ポップアップが表示される
（ポップアップのことをモーダルと呼ぶ）

コンポーネントのファイル
・サイトは複数のコンポーネントからできている
・Appコンポーネントの中に、Header, Main, Footerという3つのコンポーネントがあり、さらにMainコンポーネントの中に4つのLessonコンポーネントがある

2.コンポーネントの作成

「学べるレッスン」部分を作ろう
・まずは「学べるレッスン」のカード部分となる コンポーネントを作っていく

Lessonコンポーネントの作成
・Lesson部分の作成手順
・まずはStep1の「Lessonコンポーネントの作成」をしよう

コンポーネントの作り方
・コンポーネントの作り方を忘れた場合は、「学習コースⅡ」を復習

3.コンポーネントの表示（1つ）

Lessonコンポーネントを表示しよう
・次にStep2の「Lessonコンポーネントの表示」に進む
・とりあえずここでは、1つだけレッスンのカードを表示してみる

コンポーネントの表示
・表示させるために、まずはMain.jsでLessonコンポーネントをimport
Lessonコンポーネントは、<Lesson /> で表示

propsを渡す
・<Lesson /> の部分で、props名=propsの値 とするとpropsを渡せる
・定数lessonItemにレッスン情報のオブジェクトが代入されている
・これを用いてpropsを渡す

propsを受け取る
・Lessonコンポーネントに渡されたpropsは「this.props.props名」で取得できる

4.コンポーネントの表示（複数）

各レッスンの情報を表示しよう
・最後に、Step3の「各レッスンの情報を表示」に移る
・学習コースⅡで学んだmapメソッドを使って、 すべてのレッスンのカードを表示する

レッスンの情報（配列）
・各レッスンの情報を配列にし、Main.jsに定義しておく

配列とmap
・配列lessonListに対してmapメソッドを使い、Lessonコンポーネントを表示する
・lessonItemという引数には、配列lessonListの要素である各レッスンのオブジェクトが順に代入される
・lessonItemを用いて、nameとimageのpropsを渡す

5.モーダルのJSX

レッスンの説明モーダルを作ろう
・次は、モーダルを作っていく
・レッスンのカードをクリックするとモーダルが表示され、「とじる」ボタンをクリックするとモーダルが閉じるようにする

モーダルの作成
・モーダル機能の作成手順
・まずは、Step1の「モーダルのJSXを追加」をしていく

モーダルのJSX
・Lessonコンポーネントの中にモーダルのJSXを追加する
・モーダルには「レッスンの名前」と「レッスンの紹介文」を表示する

レッスン情報の修正
・モーダルで表示する「レッスンの紹介文」の情報を配列に追加する
・配列lessonListのそれぞれの要素に、introductionというプロパティを追加し、Lessonコンポーネントにpropsとして渡す

6.モーダルを隠そう（1）

モーダルを隠そう
・Step2の「初期状態でモーダルを隠す」で解決していく
・久しぶりにstateを使っていく

モーダルの表示・非表示
・モーダルは、クリックによって表示/非表示が切り替わる
・そこでモーダルが表示されているかそうでないかという情報をstateにする
・isModalOpenという真偽値型のstateを用意し、trueなら表示、falseなら非表示になるようにする

stateの定義
・stateは、constructorで定義する
・今回、初期状態でモーダルは非表示にしたいので、「isModalOpen」の初期値をfalseにする
（stateを忘れてしまった人は、「学習コースⅠ」を復習）

stateを準備しよう
・stateを定義するだけでは、非表示にはならない
・「初期状態でモーダルを隠す」には、もう少し新しい知識が必要
・この演習ではひとまずstateの定義だけをやっておく

7.モーダルを隠そう（2）

モーダルを隠そう
・それでは実際にモーダルを隠せるようにする
・ここでは、変数と条件分岐も使う必要がある

非表示の考え方
・「isModalOpen」がtrueのときはモーダルのJSXが存在し、falseのときは存在しないようにすれば、表示・非表示を切り替えることができる

JSXと変数
・「モーダルのJSX」には変数を利用していく
・そのために、JSXを変数に代入して表示する例を見てみる
・JSXは、変数に代入し{変数名}で表示することができる

JSXとif文（1）
・isModalOpenがtrueのときだけモーダルが表示されるようにする
・変数modalを用意し、条件分岐を行えば、isModalOpenがtrueのときだけJSXが代入される

JSXとif文（2）
・条件分岐のコードを詳しく見ておく
・変数に代入するJSXが複数行の場合、JSXを()で囲む

8.モーダルを表示する

モーダルの表示・非表示
・次はいよいよStep3「モーダルの表示・非表示」に移っていく
・まずは、レッスンのカードをクリックしたときにモーダルを表示するようにする

モーダルを表示する
・レッスンのカードをクリックしたときにモーダルを表示できるようにする

9.モーダルを非表示にする

「とじる」ボタンを完成させよう
・「とじる」ボタンをクリックすると、モーダルが閉じるようにする

モーダルをとじるメソッド
・「とじる」ボタンをクリックしたときに、モーダルが閉じるようにする