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

React初心者覚書01の続きです

Reactのページを見て書いています。
全部まとまったやつ
ここからいくつかのコンポーネントを抽出

コンポーネントという概念

• 名前は大文字で始める
• コンポーネントは JavaScript の関数と似ている。
  （“props” と呼ばれる）任意の入力を受け取り、画面上に表示すべきものを記述する React 要素を返す。
• 関数コンポーネントとクラスコンポーネントがある。参考
  • 関数コンポーネント：状態（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>
);}

でも、元の枠が必要だった、、
ここまでは理解できそうだが、
の
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()を呼び出している。