コンポーネントによって、UIを再利用可能な単一のブロックに分割し、各ブロックを個別に表示することができる。

概念的に、コンポーネントはJavaScript関数に似ています.「props」の任意の入力を受信すると、画面に表示されるコンテンツを記述するreact要素が返されます.

関数構成部品とクラス構成部品

JavaScript関数を記述することで、構成部品を定義できます.

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

この関数は、データを持つ「props」オブジェクトパラメータを受け入れ、reactセグメントを返すため、react要素と呼ぶことができます.これらの構成部品はJavaScript関数であるため、「関数構成部品」と呼ばれます.
props:属性を表すデータ
classを使用して構成部品を定義することもできます.

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

以上の2種類の素子はReactから見て同じである.

レンダー構成部品

「react」(React)要素は、DOMタグのみならず、ユーザ定義の要素としても表すことができる.

const element = <Welcome name="Sara"/>

Reactがカスタムコンポーネントを使用して作成したエイリアスが見つかった場合、JSXドキュメントツリーとそのサブアイテムが単一のオブジェクトとしてコンポーネントに渡されます.これらのオブジェクトをpropsと呼びます.
props転送使用例

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

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

// Hello, Sara

<Welcome name="Sara" />ElliterReactDOM.render()を呼び出します.

reactは{name: 'Sara'}をprops呼び出しWelcomeコンポーネントとする.

Welcome構成部品は、最終的に<h1>Hello, Sara</h1>Ellimentを返します.

REACT DOMは、別名

に一致するように<h1>Hello, Sara</h1>DOMを効率的に更新することができる.
構成部品名は常に大文字で始まる.

コンポーネントの合成

構成部品は、その出力で他の構成部品を参照できます.Reactアプリケーションのボタン、フォーム、ダイヤルアップキー、画面などはすべてコンポーネントで表示されます.
たとえば、Welcomeを複数回レンダリングするAppコンポーネントを作成できます.

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

// Hello, Sara
// Hello, Cahal
// Hello, Edite

構成部品の抽出

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

      // Commnet-text  -2
      <div className="Comment-text">
        {props.text}
      </div>

      //Comment-data  -3
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

この構成部品のすべての構成部品はオーバーラップ構造で構成されており、変更が困難な場合があります.また,個々のコンポーネントを単独で再利用することも困難である.次の例は、UserInfoタグ内でタグを個別に抽出するコードである.
Avatar

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl} 
      alt={props.user.name}
     />
  );
}

UserInfo

function UserInfo(props) {
  return (
   <div className="UserInfo">
     <Avatar user={props.user} />

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

propsは読み取り専用です。

関数構成部品またはクラス構成部品は、構成部品自体のpropsを変更できません.

function sum(a,b) {
  return a+b
}

上のsum関数は純関数であり,入力値を変更せず,常に同じ入力値に対して同じ結果を返す.
次の例は、自分の入力値を変更しようとする関数です.(非純関数)

function withdraw(account,amout) {
  account.total -= amout;
}

各react素子は、自分のpropsを処理する際に純粋な関数のように動作しなければならない.
リファレンス
このプッシュは実戦フィードバック公式サイトhttps://ko.reactjs.org/
「リトラクトガイド」https://ko.reactjs.org/docs/components-and-props.htmlを参照してください.