1. Reactの表示の仕組み
ブラウザに表示される流れ
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内でstylesheet.cssを読み込むことで、CSSを適用することができます。
CSSを適用する
JSXにはHTMLと同じように、JSXのタグ名を指定してCSSを適用することができます。
JSXとクラス名
JSXにクラス名をつける場合、HTMLと書き方が違うため注意しましょう。
クラス名は、左の図のように「className=’クラス名’」とします。
CSSの指定方法は変わりません。
App.js
import React from ‘react’;
class App extends React.Component {
render() {
return (
<div>
{/* h1タグにクラス名を追加してください */}
<h1 className=’title’>Hello World</h1>
<p>一緒にReactを学びましょう！</p>
</div>
);
}
}
export default App;
3. コンポーネントの作成
コンポーネントは「部品」や「パーツ」という意味です。
Reactでは、見た目を機能ごとにコンポーネント化して、コンポーネントを組み合わせることでWebサイトの見た目を作ります。
// Reactをインポートしてください
import React from ‘react’;
// Languageクラスを定義してください
class Language extends React.Component {
render() {
return (
<div className=’language-item’>
<div className=’language-name’>HTML & CSS</div>
<img className=’language-image’ src=’https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/html.svg’ />
</div>
);
}
}
4. コンポーネントの表示
Languageコンポーネントが表示される流れ
左の図の流れで、Languageコンポーネントはブラウザに表示されます。
LanguageコンポーネントをApp.jsで呼び出して、表示させることで、最終的にLanguageコンポーネントがブラウザに表示されます。
ヒント
import コンポーネント名 from ‘./ファイル名’とすることで、指定したコンポーネントをimportすることができます。
ファイル名に「.js」は不要です。
ヒント
親コンポーネントのJSX内で、<コンポーネント名 />と書くことで、子コンポーネントをブラウザに表示できます。
Language.js
// Languageコンポーネントをエクスポートしてください
export default Language;
App.js
import React from ‘react’;
class Language extends React.Component {
render() {
return (
<div className=’language-item’>
<div className=’language-name’>HTML & CSS</div>
<img className=’language-image’ src=’https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/html.svg’ />
</div>
);
}
}
5. コンポーネントの使い方
コンポーネントの特徴
コンポーネントは一度作れば、左の図のように、何度でも呼び出すことができます。
6. props
propsとは
App.jsから、各言語の名前と画像のデータをLanguageコンポーネントに渡すことによって、言語ごとに表示を変えることができます。App.jsから渡すこのデータをprops（プロップス）といいます。
propsの渡し方
propsは、「props名=値」という形で、コンポーネントを呼び出す箇所で渡します。今回は、Languageコンポーネントにnameとimageという2つのpropsを渡しています。
タグの中身は、改行してあげることで見やすくなります。
7. propsの使い方
ropsの中身
渡されたpropsは、this.propsで取得できます。
this.propsは{ props名: 値}というオブジェクトになります。
ヒント
親コンポーネントから渡されたpropsは、this.props.props名とすることで、子コンポーネントで受け取れます。
また、JSX内でJavaScriptを書く場合は、{}で囲むことに注意してください。
{/* props名nameの値を表示するように書き換えてください */}
<div className=’language-name’>{this.props.name}</div>
{/* src属性の値を、props名imageの値に書き換えてください */}
<img
className=’language-image’
src={this.props.image}
/>
8. mapメソッド
map
下図は、JSXをmapを用いて効率的に表示している例です。
mapメソッドで配列fruitListの各要素に対して順に処理を行い、各要素を<p>タグで囲んで表示しています。mapメソッドの戻り値はJSXなので、引数であるfruitItemは中括弧{}で囲むことに注意しましょう。
import React from ‘react’;
import Language from ‘./Language’;
class App extends React.Component {
render() {
// 指定されたコードを貼り付けてください
const languageList = [
{
name: ‘HTML & CSS’,
image: ‘https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/html.svg’
},
{
name: ‘JavaScript’,
image: ‘https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/es6.svg’
},
{
name: ‘React’,
image: ‘https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/react.svg’
},
{
name: ‘Ruby’,
image: ‘https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/ruby.svg’
},
{
name: ‘Ruby on Rails’,
image: ‘https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/rails.svg’
},
{
name: ‘Python’,
image: ‘https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/python.svg’
}
];
return (
<div>
<h1>言語一覧</h1>
<div className=’language’>
{/* 以下のコードを削除してください */}
{/* ここまで */}
{/* mapメソッドを用いて、Languageコンポーネントを表示してください */}
{languageList.map((languageItem) => {
return (
// Languageコンポーネントを呼び出し、その中でpropsを渡してください
<Language
name={languageItem.name}
image={languageItem.image}
/>
)
})}
</div>
</div>
);
}
}
export default App;