當你使用react組件時你可以給它輸入數據。這些數據被稱為props。它們是只讀的，聲明了組件最基礎的狀態。在JSX中，props就像HTML屬性。為了證明這一點，我們來修改我們的應用以至于Detail組件可以從別的地方接收數據。
修改index.js 包含以下代碼:
src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

import Detail from './pages/Detail';

ReactDOM.render(
    <Detail message="This is coming from props!" />,
    document.getElementById('app')
);

注意新的 message="This is coming from props!"給Detail傳入了參數。在Detail.js 我們需要接受這個參數 message取代原來手寫的值：

src/pages/Detail.js

import React from 'react';

class Detail extends React.Component {
    render() {
        return <p>{this.props.message}</p>;
    }
}

export default Detail;

注意我直接將this.props.message寫在大括號里，這樣表示JSX里面的是js代碼而不是字符串。當應用被編譯時這部分會當作代碼執行，以便我們不需要拼接字符串。回到瀏覽器，屏幕上的字符串應該會自動更新。

在我們繼續之前，我想進一步說明props不是嚴格只讀的，你非要賦值也可以。不過最好還是別這么做，你應該確保props對子組件（Detail.js）是只讀的，只在創建這些props的組件（index.js）里改變他們。也就是說，如果你創建了一個組件，它接收了props，你可以改變這些props，但是你不應該去改變這個props。