📗[reactの主な概念]1.コンポーネント、props

常に大文字で始まる.
props
ユーザによって定義された要素によって作成された要素が発見されると、

反応は、その要素の単一のオブジェクトに伝達される.(JSX言語ツリーおよびその子)

読み取り専用.(構成部品自体の支柱は変更できません.)
ex)Welcome構成部品.
propsオブジェクトにクエリー名が含まれ、渡されます.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);```

構成部品タイプ
クラス構成部品

はあまり使われていません.

作成

JavaScript関数

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

関数構成部品

ES6 class

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

構成部品
構成部品の構成部品
通常、最上位レベルには単一のアプリケーションコンポーネントがありますが、reactを既存のアプリケーションに統合する場合...

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

コンポーネントの分割

戦

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>
  );
}

後

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="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

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>
  );
}

クラスコンポーネントは、機能コンポーネントよりも多くの機能を提供します.
Functionalではこれらを提供できません。
=>Functional ComponentもReact Hookを提供します.