React色々な操作の復習メモ

## reactの復習メモ
- 現在のvscodeの設定でemmetを使ってると`const foo = () => {}` みたいなfunctionalコンポーネントにならないだけなのでarrow関数でやることは理解してます

### 条件付きレンダリング
```javascript

import React, { Component } from "react";
import Greet from "./greet";
export default class ClassComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      text: "TEXT",
      isLoading: true
    };

    setTimeout(() => {
      this.setState({ isLoading: false });
    }, 3000);
  }
  render() {
    return (
      <div>
       //三項演算子で?の次がtrueだった場合
        {this.state.isLoading ? (
          <p>is loading......</p>
        ) : 
       //コロンの次がfalseだった場合
       (
          <Greet title={this.state.text} />
        )}
      </div>
    );
  }
}

```

### 配列を表示する
```javascript
import React, { Component } from "react";
import Greet from "./greet";
export default class ClassComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      text: "TEXT",
      isLoading: true,
      //付け加えたのはstateに空の配列を用意
      greetings: []
    };

    setTimeout(() => {
      this.setState({ isLoading: false });
    }, 3000);
  }
  render() {
    return (
      <div>
        {this.state.isLoading ? (
          <p>is loading......</p>
        ) : (
          //Greetコンポーネントにpropsとしてstateを渡す
          <Greet title={this.state.text} greetings={this.state.greetings} />
        )}
      </div>
    );
  }
}

```
```javascript
//Greet.js
import React from "react";

function greet(props) {
  //propsをconsole.logでみると空の配列があるのがわかる
  console.log(props);
  return (
    <div>
      <h2>{props.title}</h2>
    </div>
  );
}

export default greet;


```

```javascript
    this.state = {
      text: "TEXT",
      isLoading: true,
      //配列に適当に突っ込む
      greetings: ["hello", "good", "thanks"]
    };
greetコンポーネントのconsole.log()を表示すると、propsにgreetingsの文字が入ってきてることがわかる
```
## mapを使って配列を表示させる
```javascript

function greet(props) {
  console.log(props);
  return (
    <div>
      <h2>{props.title}</h2>
      <ul>
        //propsで渡ってきたgreetingsにmapメソッドを使って表示させる
        {props.greetings.map(item => {
         //return　忘れて書いちゃったので忘れないように（個人的）メモ　keyはないと怒られるので鉄板で使う
          return <li key={item}>{item}</li>;
        })}
      </ul>
    </div>
  );
}
```
```javascript

//で本来の配列のイメージはjsonが渡ってくるというか取得しているケースなので
//だいたいこういうオブジェクトになっている
      greetings: [
        {
          id: 1,
          value: "hello"
        },
        {
          id: 2,
          value: "good"
        },
        {
          id: 3,
          value: "thanks"
        }
      ]
    };

//これを用いて先ほどのgreetコンポーネントでmapメソッドを使って書き直すとこうなる
  return (
    <div>
      <h2>{props.title}</h2>
      <ul>
        {props.greetings.map(item => {
          return <li key={item.id}>{item.value}</li>;
        })}
      </ul>
    </div>
  );

```
## jsxでjavascriptを実行する
```javascript

import React from "react";

const Button = props => {
  return (
    <div>
      <button className="btn success">{props.title}</button>
    </div>
  );
};

Button.defaultProps = {
  title: "click me!"
};

export default Button;


```

```javascript

//Appコンポーネントと紐付け
import React, { Component } from "react";
import Button from "./button";

class App extends Component {
  render() {
    return (
      <div>
        <Button />
        //Buttonコンポーネントにtype="success"のタイプ属性を渡すと以下のようなことができる
        <Button type="success"/>
      </div>
    );
  }
}

export default App;

//ここまでが下準備
```

```css
.btn {
  padding: 15px;
  margin: 10px;
  background: #fff;
  border: 2px solid tomato;
  cursor: pointer;
}

.btn.success {
  background: green;
  color: #fff;
}
.btn.info {
  background: blue;
  color: #fff;
}
.btn.danger {
  background: red;
  color: #fff;
}
//こういうのも用意しておく
```
```javascript
import React from "react";

const Button = props => {
  //ここでAppコンポーネントでButtonコンポーネントにtype属性を渡しているのでまずコンソールでみてみる
  //そうするとオブジェクトの形でdefaultPropsで設定した[click me!]とtypeで設定した[success]が渡ってくる
  console.log(props);
　　　//props.typeで渡ってくるので、typeを受け取ってswitch分でケースに応じて条件変化
  const displayClass = type => {
    switch (type) {
      case "success":
        return "btn success";
      case "danger":
        return "btn danger";
      case "info":
        return "btn info";
    }
  };
  return (
    <div>
　　　　　　　　　　　　//そしてその関数を実行して,propsで渡ってくる,prop.typeを渡してあげると振り分けられる
      <button className={displayClass(props.type)}>{props.title}</button>
    </div>
  );
};

Button.defaultProps = {
  title: "click me!"
};

export default Button;

```
### 違ったコンポーネントのやり方
```javascript

import React from "react";

const complexComponent = {
  Pagegraph: props => {
    return <p>im a paragraph</p>;
  },
  Heading: props => {
    return <p>im a heading</p>;
  }
};

export default complexComponent;


//App.js
import React, { Component } from "react";
import Button from "./button";
import complexComponent from "./complexComponent";
class App extends Component {
  render() {
    return (
      <div>
        //Pagegraph, Heading でアクセスできる
        <complexComponent.Pagegraph />
        <complexComponent.Heading />
      </div>
    );
  }
}

export default App;

```

### オブジェクトを複数渡して参照したいとき
```javascript
//親
import React, { Component } from "react";
import Paragraph from './paragraph'
class App extends Component {
  render() {
　　   //オブジェクトを用意しする
    let obj ={
      name: 'MIke',
      age: 25
    }
    return (
      <div>
　　　　　　　　　　　　　　//子供のコンポーネントに２つ以上（複数）プロパティーを渡したいときはspread演算子を用いる
       <Paragraph {...obj}/>
      </div>
    );
  }
}

export default App;


//子コンポーネント
import React from 'react'

const Paragraph = (props) => {
  //consoleでみるとわかるがオブエジェクトで渡ってくる
  console.log(props)
  return (
    <div>
      //なのでprops.nameでアクセスできる
      <p>{props.name}</p>
      //もちろんageもアクセスできる
      <p>{props.name}{props.age}</p>
    </div>
  )
}

export default Paragraph

```

## Propsの受け取り方の違い

- Classコンポーネントの場合
- 
```javascript

import React, { Component } from "react";
import Search from './Search'

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      counter: 0,
    }
  }
  handleButtonClick = () =>{
    this.setState((previousState) => {
      return {
        counter: previousState.counter + 1,
      }
    })
  }

  render() {

    return (
      <div>
       <Search name="名前だよ" handleButtonClick={this.handleButtonClick}/>
      </div>
    );
  }
}

export default App;


```
- Classコンポーネントで受け取る

```javascript
import React, { Component } from 'react'
//classコンポーネントからclassコンポーネントの場合は[this.props.xxx]で受け取れる
export default class Search extends Component {
  constructor(props){
    super(props)
  }
  render() {
    // console.log(this.props)
    return (
      <div className="container">
      <form>
        <input type="text"/>
        <button type="submit">送信</button>
      </form>
      <button onClick={this.props.handleButtonClick}>Click me</button>
      <p>{this.props.name}propsのテスト</p>
    </div>
    )
  }
}


```

- classコンポーネントからファンクショナルコンポーネントで受け取る

```javascript
import React, { Component } from "react";
//コンポーネントは適当に名前つけてます
import A from './A'
class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      value: 0,
    }
  }
//アロー関数で書くとbind(this)しなくてもいける
  handleClick = () => {
    this.setState({value: this.state.value +1})
  }
  render() {

    return (
      <div>
　　　　　　　　　　　　　　//stateで定義したvalueをこちらでpropsとして渡して表示させるようにする
      //handleClickも親から作って、子供コンポーネントで発火させるためにpropsで渡す
       <A value={this.state.value} handleClick={this.handleClick}/>
      </div>
    );
  }
}

export default App;


```
- ファンクショナルコンポーネントで受け取る
- 
```javascript
import React from 'react'

const A = (props) => {
  //コンソールで見ると何が渡ってきているかわかるのでチェックしておくとベスト
  console.log(props);
  return (
    //ファンクショナルの場合は[props.xxx] ※this.propsと間違えたのでメモとして残す
    <div onClick={props.handleClick}>
      関数コンポーネントのテスト{props.value}
    </div>
  )
}

export default A

//ちなみに
const A = (props) => {}
//の部分を
const A = ({value, handleClick}) => {}
//とすると見通しがよくなるので良い
//が慣れるまではpropsでもいいと思う
//こうするとこうやって受け取れる
const A = ({value, handleClick}) => {
  
  return (
    <div onClick={handleClick}>
      関数コンポーネントのテスト{value}
    </div>
  )
}

```

## まとめ
- Reactに関する自分用メモ（古い書き方や関数ロジックにしてないところもあるが）