今回は前回の【React】基礎編⓵に引き続き、
【React】基礎編⓶でReactにおいての、
Componentについて、propsについて、Reactの流れ・仕組みについての３つを主体として
詳細に紹介できればと思います。
【React】基礎編⓵のリンクは下記からお願いします。↓↓↓
https://qiita.com/Yu-8chan/items/28ebf04f899639b0f536
Componentとは
コンポーネントは「部品」や「パーツ」という意味です。
Reactでは、見た目を機能ごとにコンポーネント化して、コンポーネントを組み合わせることでWebサイトの見た目を作ります。
Componentの構成
Languageコンポーネントを作成するために、構成を学んでいきましょう。
① Reactをimportします。
② React.Componentを継承するLanguageクラスを作成します。このクラスがコンポーネントとなります。
③ 作成したクラスの中で、renderメソッドを定義し、return内にJSXを記述します。
④ コンポーネントをexportします。
import React from 'react'; ①
// クラス名がコンポーネントの名前になります
class Language extends React.Conponent { ②
render() { ③
return(
---JSX---
);
}
}
export default Language; ④
Componentの表示
Componentを表示する手順は３つです。
① Languageコンポーネントをexportします。
import React from 'react';
class Language extends React.Conponent {
render() {
return(
---JSX---
);
}
}
// Languageコンポーネントをexport
export default Language;
② LanguageコンポーネントをApp.js内でimportします。
③ JSX内に＜コンポーネント名 /＞と書きます。
Componentの特徴として、何度でも呼び出すことができます。
import React from 'react';
// Languageコンポーネントをimport
import Language from './Language';
class App extends React.Conponent {
render() {
return(
// JSX内に＜コンポーネント名 /＞と書く
<Language />
<Language />
<Language /> // 何度でも呼び出せる
);
}
}
export default App;
propsとは
App.jsから、部分的に変更したいデータをLanguageコンポーネントに渡すことによって、部分的に表示を変えることができます。App.jsから渡すこのデータをprops（プロップス）といいます。
propsの渡し方
propsは、「props名=値」という形で、コンポーネントを呼び出す箇所で渡します。
今回は、Languageコンポーネントにnameのpropsを渡しています。
import React from 'react';
import Language from './Language';
class App extends React.Conponent {
render() {
return(
<Language
// 「props名 = 値」
name = "HTML＆CSS"
/>
);
}
}
export default App;
渡されたpropsは、this.propsで取得できます。
propsの中身を見てみると、this.propsは{ props名: 値 }というオブジェクトになります。
return(
<Language
// 「props名 = 値」
name = "HTML＆CSS"
/>
);
return(
console.log(this.props);
// 出力内容： {name: "HTML＆CSS"}
);
propsの取得
this.propsと書くことで{props名: 値}というオブジェクトを取得できるので、
「this.props.props名」とすることでpropsの値を取得できます。
下図では、取得したpropsを用いて、言語の名前を表示しています。
import React from 'react';
class App extends React.Conponent {
render() {
return(
<p>この言語は{this.props.name}です</p>
// 出力内容： この言語はHTML＆CSSです
);
}
}
export default App;
もう一工夫
propsを使うことで、1つのコンポーネントで色んな言語の紹介を表示することができることがわかりました。
ですが、もし100言語あったら、下図のように書くのは大変ですよね。
render() {
return(
<Language name = "HTML＆CSS"/>
<Language name = "PHP"/>
<Language name = "Ruby"/>
<Language name = "React"/>
.
.
);
}
そこでです。mapメソッドを使えばコンポーネントを何度も繰り返し呼ぶことができます。
mapメソッド
では、mapメソッドを使って効率的に表示していきましょう。
下図のように、言語ごとの情報を持つlanguageList配列に対して、mapメソッドを用いると、簡単に各言語のLanguageコンポーネントを表示できます
① 各オブジェクトを配列で取得します。
② mapメソッドを使って各オブジェクトごとに表示します。
③ nameに各オブジェクトのprops(name)を代入します。
render() {
const languageList = [ ① // 言語ごとの情報を持つlanguageList配列
{name: "HTML＆CSS"},
{name: "PHP"},
{name: "Ruby"},
{name: "React"},
];
return(
<div>
{languageList.map((languageName) => { ② // languageNameに各オブジェクトが挿入
return(
<Language
name = {languageName.name} ③ // nameに各オブジェクトのprops(name)を代入
/>
);
})};
</div>
);
}
render() {
return(
<p>この言語は{this.props.name}です</p>
// 各言語の名前が表示されます
);
}
Reactの表示と仕組み
ここでは表示の流れを見ていきましょう。
Language.js（Languageクラスをexport）
↓
App.js（Languageクラスをimport）
↓
index.js（App.jsのJSXをHTMLに変換される）
↓
index.html（id名rootにindex.jsの内容が挿入され、index.htmlの内容がブラウザに表示される）
class Language extends React.Conponent {
render() {
return(
---JSX---
);
}
}
export default Language; // Languageコンポーネントをexport
import React from 'react';
import Language from './Language'; // Languageコンポーネントの内容をimport
class App extends React.Conponent {
render() {
return(
<Language />
);
}
}
export default App;
import React from './components/App';
ReactDom.render(<App />, document.getElementById('root'));
// <App />と書くことでApp.jsのJSXがHTMLに変換されます
// document.getElementById('root')で指定したid名の場所に挿入
<body>
<div id="root"></div>
<body>
以上でReactの基礎編終了です。