React II

1.Reactの表示の仕組み

React Ⅱ
・このレッスンでは、Reactで重要な知識である「コンポーネント」と「props」を学んでいく
・これらの知識に加えて、Reactの表示の仕組みを学ぶことでReactの全体像が見えてくる

Reactの表示の仕組み
・これまではApp.jsを触ってきたが、ここでは一度、Reactがどういう仕組みでブラウザに表示されているのかを説明しておく
・まずは、App.jsの内容がどうやってブラウザに表示されているかを確認

ブラウザに表示される流れ
・App.jsに書かれているJSXは最終的にHTMLに変換されて、ブラウザに表示されます。Reactのコードを実際にブラウザに表示するには、App.js以外にもindex.jsとindex.htmlというファイルが必要になる

App.jsとindex.jsの関係
・表示の流れはindex.js内で「ReactDOM.render(<App />, ...」と書くことで、App.jsのJSXが、HTMLに変換される
・この書き方は定型文のようなものなので、暗記しておく必要はない

index.jsとindex.htmlの関係
・さらに「..., document.getElementById('id名'));」と書くことで、変換されたHTMLがindex.htmlの指定したid名の要素の中に挿入される
・今回は、id名rootを指定している
・最終的に、index.htmlの内容がブラウザに表示される

2.CSSをつけよう

CSSをつけよう
・JSXは最終的にindex.htmlに挿入されて、ブラウザに表示される
・なのでindex.htmlでCSSを読み込めば、挿入されたJSXにCSSを適用することができる

CSSを読み込む
・JSXは最終的にindex.htmlに挿入され、ブラウザに表示される
・そのため、index.html内でstylesheet.cssを読み込むことで、CSSを適用することができる

CSSを適用する
・JSXにはHTMLと同じように、JSXのタグ名を指定してCSSを適用することができる

JSXとクラス名
・JSXにクラス名をつける場合、HTMLと書き方が違うため注意
・クラス名は、「className='クラス名'」とする
・CSSの指定方法は変わらない

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

目標物を確認しよう
・残る重要な知識は、 コンポーネントとprops
・このレッスンでは、この２つを使ってサイトを作っていく

コンポーネントを学ぼう
・コンポーネントは「部品」や「パーツ」という意味
・Reactでは、見た目を機能ごとにコンポーネント化して、コンポーネントを組み合わせることでWebサイトの見た目を作る

目標物のコンポーネント
・今回は、言語のレッスンを表示しているコンポーネントを作る
・分かりやすいようにLanguageという名前をつける

コンポーネントの構成（1）
・Languageコンポーネントを作成するために、構成を学んでいく
・まず、Reactをインポートする
・そして、React.Componentを継承するLanguageクラスを作成する
・このクラスがコンポーネントとなる

コンポーネントの構成（2）
・作成したクラスの中でrenderメソッドを定義し、return内にJSXを記述する
・最終的に、Languageコンポーネントを作成することができる

4.コンポーネントの表示

Languageコンポーネントが表示される流れ
・LanguageコンポーネントをApp.jsで呼び出して、表示させることで、最終的にLanguageコンポーネントがブラウザに表示される

コンポーネントの表示（1）
・App.js内でLanguageコンポーネントを呼び出すには、まず作成したコンポーネントをexportする必要がある

コンポーネントの表示（2）
・Languageコンポーネントを表示するには、App.jsで2つの手順を行う必要がある

5.コンポーネントの使い方

・これから3つの言語紹介のコンポーネントを表示させていくが、個別のコンポーネントを3つ作る必要はない
・コンポーネントには、一度作れば何度でも呼び出すことができるという特徴がある

コンポーネントの特徴
・コンポーネントは一度作れば、何度でも呼び出すことができる

6.props

propsを学ぼう
・3つの違う言語を表示するには、それぞれの「言語の名前」と「画像」の部分を変える必要がある
・ここでpropsというものを使うと、変えたい部分の表示を変更できる

propsとは
・App.jsから、各言語の名前と画像のデータをLanguageコンポーネントに渡すことによって、言語ごとに表示を変えることができる
・App.jsから渡すこのデータをprops（プロップス）と言う

propsの渡し方
・propsは、「props名=値」という形で、コンポーネントを呼び出す箇所で渡す
・今回は、Languageコンポーネントにnameとimageという2つのpropsを渡している
・タグの中身は、改行してあげることで見やすくなる

7.propsの使い方

propsの使い方
・「props名=値」という形でpropsを渡せるということを覚えておく
・これからは、Languageコンポーネントで受け取ったpropsを使っていく

propsの中身
・渡されたpropsは、this.propsで取得できる
・this.propsは{ props名: 値}というオブジェクトになる

propsの取得
・this.propsと書くことで{props名: 値}というオブジェクトを取得できるので、「this.props.props名」とすることでpropsの値を取得できる
・取得したpropsを用いて、各言語の名前と画像を表示している

8.mapメソッド

コンポーネントを何度も呼び出す
・propsを使うことで、1つのコンポーネントで色んな言語の紹介を表示することができる
・しかし、もし100言語あったら、書くのは大変
・実は「ES6 学習コース Ⅵ」で勉強したmapメソッドを使うと、簡単にコンポーネントを呼び出せる

map
・JSXをmapを用いて効率的に表示している例
・mapメソッドで配列fruitListの各要素に対して順に処理を行い、各要素を<p>タグで囲んで表示している
・mapメソッドの戻り値はJSXなので、引数であるfruitItemは中括弧{}で囲むことに注意

mapを使ってみよう
・言語ごとの情報を持つlanguageList配列に対して、mapメソッドを用いると、簡単に各言語のLanguageコンポーネントを表示できる