【React】学習記録（２）

##コンポーネントについて
・Reactの特徴はコンポーネント

■表示の流れ
Dog.js→App.js→index.js→index.html
■ファイル構造
src
└index.js
└components
　　└App.js
　　└Dog.js

##App.jsへのコンポーネントの受け渡し方法とpropsについて

Dog.js

import React from 'react';
//class以下のDogがコンポーネント名
class Dog extends React.Component {
  render() {
    return (
      <div className='dog-item'>
{/*「this.props.props名」とすることでpropsの値を取得できる */}
        <div className='dog-name'>{this.props.name}</div>
        <div className='dog-age'>{this.props.age}</div>
      </div>
    );
  }
}

export default Dog;

App.js

import React from 'react';
class App extends React.Component {
 render() {
   return (
      <div>
{/*dogコンポーネントを利用*/}
{/*propsを表示*/}
      <dog 
      name = 'pagg'
      age = 4

/>
     </div>
   );
 }
}

export default App;

##propsが多い場合はmapメソッドを使える
propsが多い場合は、App.jsの中でdogListの配列を定義して、mapメソッドでdogItemとして代入することができる。

App.js

import React from 'react';
import Language from './Dog';

class App extends React.Component {
  render() {
    const dogList = [
      {
        name: 'pagg',
        age: 5
      },
      {
        name: 'poodle',
        image: 4
      },
     ];

    return (
      <div>
        <div className='dog'>
          {dogList.map((dogItem) => {
            return (
           <Language
{/*各propsのプロパティをいれる*/}
              name = {dogItem.name}
              age = {dogItem.age}
              />
            )
          })}
           </div>
      </div>
    );
  }
}

export default App;