首先props是React父元件與子元件間的溝通橋樑，可以看成是個靜態的物件，運作的方式是在父元件給props的值並傳給子元件，然後在子元件讀取，每當父元件傳送props給子元件都會造成子元件重繪

我們首先在index.js這個父元件呼叫Welcome這個子元件的地方給他一個name叫做Kevin

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Welcome from './welcome.js';

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

並在Welcome子元件新增一個接props的地方

//welcome.js
import React, { Component } from 'react';

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

export default Welcome;

這樣Hello World!就會變成Hello Kevin!了，你也可以試試修改props的值或是多傳幾個props看看

states是元件的內部狀態，可以被改變，主要用來記錄自身狀態，不過它跟一般的變數不同，如果你要修改它就必須用setState這個方法

在welcome.js新增一個state取名叫做name並給它一個值叫做David，並把接props的地方改為接state

//welcome.js
import React, { Component } from 'react';

class Welcome extends Component {  
  state = { name: "David" }
  render() {
    return (
      <div>
        <h1>Hello {this.state.name}!</h1>
      </div>
    );
  } 
}

export default Welcome;

你就會發現名字從Kevin變成David了，不過這不是一個正確使用state的方式，如果只是要傳遞參數或字串的話props就可以輕鬆做到，用states是殺雞用牛刀，接下來會講到states跟生命週期的關係