React初心者覚書02 - component,prop -

[React初心者覚書01の続きです](https://qiita.com/okashi/items/c615fd3de40bb6595fdc)

[Reactのページ](https://ja.reactjs.org/docs/components-and-props.html)を見て書いています。
全部まとまったやつ
ここからいくつかのコンポーネントを抽出

#### コンポーネントという概念
- 名前は大文字で始める
- コンポーネントは JavaScript の関数と似ている。
（“props” と呼ばれる）任意の入力を受け取り、画面上に表示すべきものを記述する React 要素を返す。
- 関数コンポーネントとクラスコンポーネントがある。[参考](https://sbfl.net/blog/2019/11/12/react-hooks-introduction/)
    - 関数コンポーネント：状態（state）を持たず、一切の制御ができない
    - クラスコンポーネント：状態（state）を持つことができ、描画内容を柔軟に変化させることができる
- ES6クラスも使える

### 

#### コンポーネントの分割でわからなかったことを先に

- コンポーネントの分割は何を基準に分割するのか？＞まだわからない
- コンポーネントと関数って何が違うの？　単に関数の中にReactが組み込んでるとコンポーネント？
- props.userとか props.dateの定義の仕方>>あとの解答に書いてあったので意味はわかった。
- まだ色々理解できていない、、

```comp.js

function Comment(props){
  return(
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
          />
          <div className="UserInfo-name">
            {props.author.name}
          </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}
```

自力で分割

```comp1つめ.js

<div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
          />
          <div className="UserInfo-name">
            {props.author.name}
          </div>
      </div>

```

```2つめ.js
<div className="Comment-text">
        {props.text}
      </div>
```

```3つめ.js
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
```

さらに１つ目を分割

```1つめの1.js
<img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
          />
```

```1つめの2.js
 <div className="UserInfo-name">
            {props.author.name}
          </div>
```

サイトを見ると、関数にしないといけないらしい、、

```1つめの1.js
function Avatar(props){
return(
<img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
          />
);
}
```
ここが自分でやると下記のようにしそう、、

```1つめの2.js
function UserInfo-name(props){
return(
 <div className="UserInfo-name">
            {props.author.name}
          </div>
);}
```
でも、元の枠が必要だった、、
ここまでは理解できそうだが、
<Avatar user={props.user} />の
props.userはどうやって考えたらいいかわからない。


```userInfo.js
function UserInfo(props){
return(
<div className="UserInfo">
        <Avatar user={props.user} />
          <div className="UserInfo-name">
            {props.author.name}
          </div>
      </div>
);
}

```
でもまとめたものは、どうやるのか？

```Comment.js
function Comment(props){
  return(
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className ="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );}
```

#### 全ての React コンポーネントは、自己の props に対して純関数のように振る舞わねばなりません。
- 自身への入力を変更してはいけない


``` 教材の最終のjs.js
function formatDate(date){
return date.toLocalDateString();
}
function Avatar(props){
return(
<img
className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name
/>
);
}
function UserInfo(props){
return(
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfoname">{props.user.name}</div>
);
}

function Comment(props){
rerutn(
<div className="Comment">
<UserInfo user={props.author} />
<div className="Comment-text">{props.text}</div>
<div className="Comment-date">{formatDate(props.date)}
</div>
</div>
);
}

const comment = {
date:new Date(),
text:'I hope you enjoy learning React!',
author:{
name:'Hello Kitty',
avatarUrl:'https://placekitten.com/g/64/64',},
};

ReactDOM.render(
<Comment
date={comment.date}
text={comment.text}
author={comment.author}
/>,
document.getElementById('root')
);
```

もしかして、理解できないのはJSの理解が足りないから？
わからないのは、
const commentの中身を
ReactDOM.render(
<Comment
の中に何故持ってこれるのかがわからない。

ReactDOM.render(要素, 書き出す場所);

コンポーネント（関数）と

propとして、
date:new Date(),
text:'I hope you enjoy learning React!',
author:{
name:'Hello Kitty',
avatarUrl:'https://placekitten.com/g/64/64',},
};
を渡している
言い換えると、引数として ReactDOM.render()を呼び出している。