【React】コンポーネントとprops

コンポーネントのファイル配置は

App.js, footer.js, header.js, main.js, lesson.jsが
components.jsファイルにまとめられている。


######lessonコンポーネントの作成

```lesson.js
// 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;
```

######lessonコンポーネントの表示
Main.jsで、LessonコンポーネントをLessonという名前でインポートする。

JSX内で、Lessonコンポーネントを表示する。
また、定数lessonItemを用いて、2つのpropsを渡す。

```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でpropsを受け取り、レッスンの名前や画像を表示できるようにする。

```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;
```


######各lessonの情報を表示

react-lesson/src/components/Main.js に、レッスン情報の配列 lessonList が用意されています。
配列とmapメソッドを用いて、すべてのレッスンを表示します。

そして、そのあとLessonコンポーネントを表示する。


```Main.js
import React from 'react';
import Lesson from './Lesson';

class Main extends React.Component {
  render() {
    const lessonList = [
      {
        name: 'HTML & CSS',
        image: 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/html.svg',
      },
      {
        name: 'Sass',
        image: 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/sass.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',
      },
    ];
    
    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>
            {/* lessonListに対して、mapメソッドを用いてください */}
            {lessonList.map((lessonItem) => {
              return(
                <Lesson
                  name={lessonItem.name}
                  image={lessonItem.image}
                />
              );
            })};
            
          </div>
        </div>
      </div>
    );
  }
}

export default Main;
```

この記事は、備忘録です。