【前言】
　　昨天我們實作了第一個React Component了，有沒有覺得自己有沒有變強了一點呢？這篇要來介紹一下React的Props屬性囉！

【正文】
　　回想上次的 Hello,Hyora ，在單單只render一句話的時候是不是覺得還好，可是如果要render很多個呢？總不可能要把程式碼寫成這樣吧？

//上方import略

class App extends React.Component {
  render() {　
    return (　
      <div>
        <div>Hello, Hyora</div>
        <div>Hello, Leo</div>
        <div>Hello, Nelly</div>
      </div>
    );
  }
}

// 下方export略

　　上面這樣寫也太不漂亮了，又臭又長，而且重複的地方好多哦。難道不可以把名稱就當成什麼變數傳遞下去再叫React render嗎？答案是可以的！首先要記住Props（Property）有幾個特點：

1. Props是由父層傳遞下去
2. Props是不可以自己做更改
3. 只要父層的Props值有變動，Component即會重新render

　　回頭來看看剛剛的程式碼，我們可以將其切割成一個<Greeting>Component，並在App.js import時，將名字當成Props傳給<Greeting>，讓其render出來。讓我們來改寫一下吧，首先：

1. 調整專案資料夾目錄結構，並新增Greeting.js檔：
   

2. 撰寫Greeting.js檔案

import React from 'react';

class Greeting extends React.Component {
  render() {
    const { name } = this.props; // 運用ES6解構，對應出this.props的結構
    return(
      <div style={{ textAlign: 'center' }}>
        Hello, {name}　{/* 將props值用｛｝放進要放入的地方*/}
      </div>
    );
  }
}

export default Greeting; // 匯出Greeting Component

3. 　改變App.js

import React from 'react';
import Greeting from './component/Greeting'; // import Greeting 模組

class App extends React.Component {
  render() {　
    return (　
      <div>
        {/* 將name這個屬性裡面的值當成是props傳給Greeting */}
        <Greeting name="Hyora"/>
        <Greeting name="Yoyo" />
        <Greeting name="Leo" />
        <Greeting name="Nelly" />
      </div>
    );
  }
}

export default App;

　　再回到我們的網頁，是不是得到跟昨天一樣的結果呢？雖然因為我們的範例內容很少，看起來與原本的差沒有多少，反倒還要再多寫一隻js檔案，不過如果之後等專案很大、<Greeting>組件很常被用到時，利用Props傳入render也不失是一個好方法哦。

　　那今天就到這邊囉，明天會再繼續另外一種屬性state，我們下次見，bye~