React 基礎アウトプット2


#はじめに
ポートフォリオ 作成のためにReactについて学ぶ

今回は2回目のアウトプット
前回の記事はこちら
https://qiita.com/kiyomasa05/items/97f58a8c8d0c08d9f8fd


##Reactがブラウザに表示される流れ

1. App.jsに書かれているJSXは最終的にHTMLに変換されて、ブラウザに表示される
2. index.js内で「ReactDOM.render(<App />, ...」と書くことで、App.jsのJSXが、HTMLに変換される
3. 「..., document.getElementById('id名'));」と書くことで、変換されたHTMLがindex.htmlの指定したid名の要素の中に挿入される

```app.js
import React from 'react';

class App extends React.Component {
  render() {  //ここからJSXこの中身がブラウザに表示される
    return (
      <div>
        <h1>Hello World</h1>
        <p>一緒にReactを学びましょう！</p>
      </div>
    );
  }
}
export default App;
```

```index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
// 2,3こう書くことでid rootにJSXが表示される
ReactDOM.render(<App />, document.getElementById('root'));

```

ブラウザ側

```index.html
<!DOCTYPE html>
<html>
  <head>
    <title>React App</title>
  </head>
  <body>
    <!-- ここにJSXが入る -->
    <div id="root"></div>
    
    <script src="bundle.js"></script>
  </body>
</html>
```

##CSSについて

JSX内で指定したdivタグなどに通常通りCSSを当てることができる
ただし、クラスの指定は
`class="text"`などはNGで、
`className='クラス名'`と書く。


#コンポーネント
コンポーネントは「部品」や「パーツ」という意味。
Reactでは、見た目を機能ごとにコンポーネント化して、コンポーネントを組み合わせることでWebサイトの見た目を作る。

例）langageコンポーネントの作成

```Language.js
import React from 'react';

// React.Componentを継承した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>)
  }
  
// Languageコンポーネントをエクスポート
export default Language;
```

呼び出し側<コンポーネント名/>で呼び出す

```App.js
import React from 'react';
// Languageコンポーネントをインポート　fromからはファイル名を呼び込む、.jsは不要
import Language from './Language'

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>言語一覧</h1>
        <div className="language">
          {/* Languageコンポーネントを呼び出す <コンポーネント名/>で呼び出す*/}
          <Language/>
          
        </div>
      </div>
    );
  }
}

export default App;
```


###コンポーネントの特徴
コンポーネントは一度作れば、何度でも呼び出せる

```

 <div className="language">
          <Language/>
          <Language/>
		  <Language/>
</div>
```

###他の言語を表示させるには？
propsを使う

##props
App.jsから各言語の名前と画像のデータをLanguageコンポーネントに渡すことによって、言語ごとに表示を変えることが可能。
App.jsから渡すこのデータをprops（プロップス）という。

propsは、「props名=値」という形で、コンポーネントを呼び出す箇所で渡す。

```App.js
<Language 
	name='HTML&CSS'
	image='https://...'
	//props名＝値
/>
```

渡されたpropsは、`this.props`で取得
this.propsと書くことで`{props名: 値}`というオブジェクトを取得できる
`this.props.props名`とすることでpropsの値を取得

```Language.js
省略

class Language extends React.Component {
  render() {
    return (
      <div className='language-item'>
        {/* props名nameの値を表示する */}
        <div className='language-name'>
          {this.props.name}
        </div>
        
        {/* props名imageの値を表示する */}
        <img 
          className='language-image'
          src={this.props.image}
        />
   
      </div>
    );
  }
}
```

##mapメソッド

繰り返し処理を行うことで、効率的に記入できる

```App.js
import React from 'react';
import Language from './Language'; //Langageコンポーネントを呼び出し

class App extends React.Component {//Appコンポーネントを定義
  render() {
    // language配列を定義
    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;
```

ブラウザに表示される流れ
コンポーネント
props
について学んだ

以上