フロントエンド初心者でもReactは簡単？Reactの文法を学んでみた～２章～

自社開発企業でWebアプリケーションエンジニア（※名前はいろいろあるので都合よく解釈してください）、Webアプリのうち各サブシステムを開発しているエンジニアです。

今回もReactについてメモ書きのような感じで書いていきます。
（ほんとは実際にブラウザで動かしてる方がいいのかもだが）
今回もProgateを使って学んでいきます。

※なお著作権等に引っかからないよう、文法的な書き方部分だけ抜粋していく感じ(Re-Write)で行こうと思います。

参考

https://prog-8.com/courses/react

前回については[フロントエンド初心者でもReactは簡単？Reactの文法を学んでみた～序章～](https://qiita.com/soepy/items/aa9c269a7d4c02b2baad)を見てください。


#表示の仕組み

Reactを利用するにはApp.jsのほかにindex.js,index.htmlが必要
※JavaScriptはHTMLがないとそもそも動かないのは基本中の基本である

App.js

```React
import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello World</h1>
        <p>こんにちわ！</p>
      </div>
    );
  }
}

export default App;
```

index.js

```React
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('root'));
```

**<App />**の部分にApp.jsのrender()に記述した内容が渡される


index.html

```html
<!DOCTYPE html>
<html>
  <head>
    <title>React App</title>
  </head>
  <body>
    <div id="root">
      <!--App.jsのrender()に記述した内容がここにバインドされる-->
    </div>
    <script src="bundle.js"></script>
  </body>
</html>
```
id指定した部分に**document.getElementById('root')**つまりApp.jsのrender()に記述した内容が渡され表示される



#CSSの読み込み


index.html

```html
<!DOCTYPE html>
<html>
  <head>
    <title>React App</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <div id="root">
      <!--App.jsのrender()に記述した内容がここにバインドされる-->
    </div>
    <script src="bundle.js"></script>
  </body>
</html>
```

stylesheet.css

```css
h1{
  color:red;
}
p{
  color:blue;
}
```

App.jsの<h1>,<p>それぞれのタグに対し、cssが適用される。※通常のルール通り。


#CSSの読み込み（クラスを利用する場合）

ReactのJSX部分でクラス名をつける場合は、**className**としなければならない。

App.js

```React
import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1 className="title">Hello World</h1>
        <p className="text">こんにちわ！</p>
      </div>
    );
  }
}

export default App;
```

index.js

※省略

index.html

```html
<!DOCTYPE html>
<html>
  <head>
    <title>React App</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <div id="root">
      <!--App.jsのrender()に記述した内容がここにバインドされる-->
    </div>
    <script src="bundle.js"></script>
  </body>
</html>
```

stylesheet.css

```css
.title{
  color:red;
}
.text{
  color:blue;
}
```


#コンポーネント

Reactではクラス名がコンポーネントの名前になる。


```React
import React from 'react';

class Greeting extends React.Component{
  
  render(){
    return (<div className='greeting-item'>
        <div className='greeting-name'>Hello</div>
        <img className='greeting-image' src='https://xxxx/hello.png' />
      </div>);  
  }
}
export default Greeting;
```

######App.jsからGreetingコンポーネントを呼び出す

App.js

```React
import React from 'react';
import Language from './Greeting'

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>言語一覧</h1>
        <div className="greeting">
          <Greeting />
        </div>
      </div>
    );
  }
}
export default App;
```

#props（プロップス）


App.js

```React
import React from 'react';
import Language from './Greeting'

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>言語一覧</h1>
        <div className="greeting">
          <Greeting 
            name="Hello"
            image="https://xxxx/hello.png"
          />
        </div>
      </div>
    );
  }
}
export default App;
```
- Greetingタグにname、textのようにprops名を定義することができる。
- そしてこれはGreeting.jsで取得可能


```React
import React from 'react';

class Greeting extends React.Component{
  
  render(){
    return (<div className='greeting-item'>
        <div className='greeting-name'>
          {this.props.name}
        </div>
        <img 
          className='greeting-image' 
          src={this.props.image} 
        />
      </div>);  
  }
}
export default Greeting;
```

#mapメソッド

propsを利用してGreeting.jsをメソッドのごとく複数回利用できることが分かったが、では100回くらい使いたいとなった場合はどうだろうか。。。

App.js

```React
import React from 'react';
import Language from './Greeting'

class App extends React.Component {
  render() {
    const greetingList = [
      {name:'Hello',image:'https://xxxx/hello.png'},
      {name:'こんにちは',image:'https://xxxx/hello_jp.png'},
    ];
    return (
      <div>
        <h1>言語一覧</h1>
        <div className="greeting">
        {greetingList.map((greetingItem) => {
          <Greeting 
            name={greetingItem.name}
            image={greetingItem.image}
          />
        })}
        </div>
      </div>
    );
  }
}
export default App;
```

```React
import React from 'react';

class Greeting extends React.Component{
  
  render(){
      {
    return (<div className='greeting-item'>
        <div className='greeting-name'>
          {this.props.name}
        </div>
        <img 
          className='greeting-image' 
          src={this.props.image} 
        />
      </div>);  
  }
}
export default Greeting;
```


#ここまでの感想

Vue.jsを少しかじったことあるが、Reactのほうがわかりやすいし簡単かもしれない。