此用React的最大目的就是将UI分区模组化成独立的、可复用的元件。
该如何运用这些元件？
就是将资料模组套入元件中，让元件随着的资料模型的更新，去重新渲染在画面上呈现的UI元件。

影响React元件的资料型态分为两种：

1. 从外部传进元件的 Props
2. 元件内部自己的 State

就让我们先来了解props的特性吧！

Props，传递资料的桥梁

props是从外部传入元件内部的单向资料。用於父元件向子元件传递的方法。

• 子元件不能变动接收到的props，只能由传入资料的父元件去变动
• 只有通过父元件重新渲染可以把新的props传入子元件

来实际使用看看props
(以下使用Functional Component写法)

我在在专案中建立Father.js作为父元件、Child.js作为子元件接收Father传递的资料

父元件，传送资料

src / Father.js

import React from 'react'
import './All.css';
import Child from './Child';

function Father() {
  return (
  <div className="container">
      <h1 className="title">
       Hello!
      </h1>

     <Child name='Amy'/> //<- 要传入资料的子元件Child

  </div>
)};

export default Father;

我们透给在子元件的标签中加入属性名称，给予属性要绑定的资料作为值，将资料透过props参数传入。

name：子元件要从props接收资料的key

'Amy'：子元件会接收到props资料的value，也可以用{}塞入js形式的资料

 <Child name='Amy'/>

子元件，接收资料

src / Child.js

import React from 'react'
import './All.css';

function Child(props) { //props作为参数传入子元件中
  return (
    <p>{props.name}</p>
)}

export default Child;

Functional Component中的props会作为函式参数传入

props：父元件传入的props，以物件型态呈现的资料参数。

（参数名称可以自定义，把props改成其他名称例如data也可以，但为避免混淆，我们一律用props代表）

name：透过在父元件设定的属性name来取得资料的value

function Child(props) { 
  return (
    <p>{props.name}</p>
)}

最後呈现出来的画面，成功！