1. Reactで Webサイトを作ろう
コンポーネントのファイル
サイトは左の図のように、複数のコンポーネントからできています。
Appコンポーネントの中に、Header, Main, Footerという3つのコンポーネントがあり、さらにMainコンポーネントの中に4つのLessonコンポーネントがあります。
2. コンポーネントの作成
// Reactをインポートしてください
import React from ‘react’;
// Lessonクラスを定義してください
class Lesson extends React.Component {
render() {
return (
<div className=’lesson-card’>
<div className=’lesson-item’>
<p></p>
<img />
</div>
</div>
);
}
}
// Lessonクラスをexportしてください
export default Lesson;
3. コンポーネントの表示（1つ）
../components/Main.js
Main.jsで、Lesson コンポーネントを
Lesson
という名前でインポートしてください。
…/components/Main.js
JSX内で、Lessonコンポーネントを表示してください。
また、定数lessonItemを用いて、以下の2つのpropsを渡してください。
次にLesson.jsでpropsを受け取り、レッスンの名前や画像を表示できるようにします。
…/components/Lesson.js
<p>タグの中に、props名
name
の値を入れてください。
<img />タグの
src
属性に、props名
image
の値を指定してください。
Main.js
import React from ‘react’;
// Lessonコンポーネントをインポートしてください
import Lesson from ‘./Lesson’;
class Main extends React.Component {
render() {
const lessonItem = {
name: ‘HTML & CSS’,
image: ‘https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/html.svg’
}
return (
<div className=’main-wrapper’>
<div className=’main’>
<div className=’copy-container’>
<h1>Hello, World.</h1>
<h2>プログラミングの世界へようこそ！</h2>
</div>
<div className=’lesson-container’>
<h3 className=’section-title’>学べるレッスン</h3>
{/* Lessonコンポーネントを表示し、propsを渡してください */}
<Lesson
name={lessonItem.name}
image={lessonItem.image}
/>
</div>
</div>
</div>
);
}
}
export default Main;
Lesson.js
import React from ‘react’;
class Lesson extends React.Component {
render() {
return (
<div className=’lesson-card’>
<div className=’lesson-item’>
{/* props名nameの値を入れてください*/}
<p>{this.props.name}</p>
{/* src属性に、props名imageの値を指定してください */}
<img src={this.props.image} />
</div>
</div>
);
}
}
export default Lesson;
4. コンポーネントの表示（複数）
{/* lessonListに対して、mapメソッドを用いてください */}
{lessonList.map((lessonItem) => {
return (
<Lesson
name={lessonItem.name}
image={lessonItem.image}
/>
);
})}
5. モーダルのJSX
Main.js
// introductionをpropsで渡してください
introduction={lessonItem.introduction}
Lesson.js
{/* モーダルを用意してください */}
<div className=’modal’>
<div className=’modal-inner’>
<div className=’modal-header’></div>
<div className=’modal-introduction’>
{/* レッスンの名前を表示してください */}
<h2>{this.props.name}</h2>
{/* レッスンの紹介文を表示してください */}
<p>{this.props.introduction}</p>
</div>
6. モーダルを隠そう（1）
import React from ‘react’;
class Lesson extends React.Component {
// constructorを定義してください
constructor(props) {
super(props);
// stateの初期値を定義してください
this.state = {isModalOpen: false};
}
render() {
return (
<div className=’lesson-card’>
<div className=’lesson-item’>
<p>{this.props.name}</p>
<img src={this.props.image} />
</div>
<div className=’modal’>
<div className=’modal-inner’>
<div className=’modal-header’></div>
<div className=’modal-introduction’>
<h2>{this.props.name}</h2>
<p>{this.props.introduction}</p>
</div>
<button className=’modal-close-btn’>
とじる
</button>
</div>
</div>
</div>
);
}
}
export default Lesson;
7. モーダルを隠そう（2）
下記の手順でモーダルを表示する部分を書き換えましょう。
①変数modalを定義
②stateのisModalOpenがtrueのとき、変数modalにモーダルのJSXを代入
③return内で、モーダルのJSXを変数modalに書き換え
…/components/Lesson.js
renderメソッド内で、変数
modal
を定義してくださ
ヒント
値を代入しない 変数はlet 変数名;の形で定義します。
../components/Lesson.js
renderメソッド内でif文を使い、stateの
isModalOpen
がtrueのときという条件式を用意してください。
ヒント
if (真偽値) とすることで、()内がtrueのとき、処理を実行することができます。
…/components/Lesson.js
先ほど用意したif文の中で、変数
modal
に下記のJSXを代入してください。
次にreturn内のモーダルを表示しているJSXを変数modalに置き換えます。
…/components/Lesson.js
return内の<div className=’modal’>からその閉じタグまでのJSXを削除し、変数
modal
を表示するように変更してください。
import React from ‘react’;
class Lesson extends React.Component {
constructor(props) {
super(props);
this.state = {isModalOpen: false};
}
render() {
// 変数modalを定義してください
let modal;
// if文を用意してください
if (this.state.isModalOpen) {
modal = (
<div className=’modal’>
<div className=’modal-inner’>
<div className=’modal-header’></div>
<div className=’modal-introduction’>
<h2>{this.props.name}</h2>
<p>{this.props.introduction}</p>
</div>
<button className=’modal-close-btn’>
とじる
</button>
</div>
</div>
);
}
return (
<div className=’lesson-card’>
<div className=’lesson-item’>
<p>{this.props.name}</p>
<img src={this.props.image} />
</div>
{/* 下のコードを消してください */}
{/* ここまで */}
{/* 変数モーダルを表示してください */}
{modal}
</div>
);
}
}
export default Lesson;
8. モーダルを表示する
import React from ‘react’;
class Lesson extends React.Component {
constructor(props) {
super(props);
this.state = {isModalOpen: false};
}
// handleClickLessonメソッドを定義してください
handleClickLesson(){
this.setState({isModalOpen: true});
}
render() {
let modal;
if (this.state.isModalOpen) {
modal = (
<div className=’modal’>
<div className=’modal-inner’>
<div className=’modal-header’></div>
<div className=’modal-introduction’>
<h2>{this.props.name}</h2>
<p>{this.props.introduction}</p>
</div>
<button className=’modal-close-btn’>
とじる
</button>
</div>
</div>
);
}
return (
<div className=’lesson-card’>
{/* onClickイベントを追加してください */}
<div
className=’lesson-item’
onClick={() => {this.handleClickLesson()}}
>
<p>{this.props.name}</p>
<img src={this.props.image} />
</div>
{modal}
</div>
);
}
}
export default Lesson;
9. モーダルを非表示にする
import React from ‘react’;
class Lesson extends React.Component {
constructor(props) {
super(props);
this.state = {isModalOpen: false};
}
handleClickLesson() {
this.setState({isModalOpen: true});
}
// handleClickCloseメソッドを定義してください
handleClickClose() {
this.setState({isModalOpen: false});
}
render() {
let modal;
if (this.state.isModalOpen) {
modal = (
<div className=’modal’>
<div className=’modal-inner’>
<div className=’modal-header’></div>
<div className=’modal-introduction’>
<h2>{this.props.name}</h2>
<p>{this.props.introduction}</p>
</div>
{/* onClickイベントを追加してください */}
<button
className=’modal-close-btn’
onClick={() => {this.handleClickClose()}}
>
とじる
</button>
</div>
</div>
);
}
return (
<div className=’lesson-card’>
<div
className=’lesson-item’
onClick={() => {this.handleClickLesson()}}
>
<p>{this.props.name}</p>
<img src={this.props.image} />
</div>
{modal}
</div>
);
}
}
export default Lesson;