今天要介紹如何即時得到使用者輸入的色碼，並即時 render 到氣球上。
DEMO

建立 Component

首先，建立一個 Balloon component

class Balloon extends React.Component{
    render(){
        return(
        
        )
    }
}

每一個 component 的大架構都是如此，在 render 這個渲染方法中，撰寫 return 要回傳並渲染回 DOM 的內容。

上面是 ES2015 的寫法，還有另一種 functional 的寫法：

var Balloon = React.createClass(){
    render:function(){
        return(
        
        )
    }
}

建立變數，透過 createClass 來建立類別

建立完 component 之後，現在最後寫上

 ReactDOM.render();
 

這個最後渲染回 DOM 的語法需要放兩個參數

1. 我所建立的 Component

2. 綁定要渲染的 HTML 區塊

    ReactDOM.render(<Balloon />, document.getElementById('app'));
   

加入 Properties

向前面幾篇文章有提到的，我們可以透過 {this.props.<props-name>} 去取得某個 parent component 裡的 property

return(
     <section id="balloon">
        <h3>What color of balloon do you like?</h3>
     </section>
  );
  

在 JSX 語法裡面，它並不允許你有回傳多個 tags，因此只要有兩個以上 tags ，我們都必須再用一個 tag 把所有標籤包起來，我這邊用 <section></section> 包裝這些標籤。

我放了一個 ask props 在 <Balloon /> component 裡，而在 Balloon component 便可透過 {this.props.ask} 來取得內容。

ReactDOM.render(<Balloon ask="What color of balloon do you like?" />, document.getElementById('app'));

此外，我們也可以在 JSX 語法中撰寫 HTML 的 CSS 樣式，不過不能像一般在 HTML tag 裡面寫。

<section style="background:red"></section>

我們要用物件的方是呈現

<section style={{background: "red"}}></section>

這邊有兩個大括弧，最外面的是 物件，裡面就像是在撰寫 CSS

section{
    background: red;
}

我們在 CSS 定義背景顏色會用到的
background-color 在 JSX 語法中要寫 backgroundColor。

要定義字體大小用 fontSize，在 CSS 我們會在數字後面加上 px，不過 JSX 語法中只需要定義數字即可。

<section style={
    {
        background: "red",
        fontSize: 16
    }
}></section>

style variable

把所有的語法都寫在 tag 裡實在是難以閱讀，現在我只寫兩行樣式，若是需要更多樣式甚至可能會要用到許多互動或動畫效果，那麼程式碼會很難維護。因此，我在這邊創建一個 styleObj 的變數，把所有樣式都存放在這個變數裡，再用呼叫變數的方式放回 tag 中。

const styleObj = {
    backgroundColor: this.state.color,
    fontSize: 32 / 2
};

<section style={styleObj}></section>

State

state 是 React 的核心特色之一，每一次狀態(state)變更，就會觸發一次 Virtual DOM 去對照實際 DOM 的差別，用非常敏捷的方式渲染實際 DOM。

我先建立一個 state 物件，在每一個 JavaScript 的 class 底下都有一個 constructor，我們要把 props 參數傳進 constructor 裡，我們為了讓子類別使用 this.props，必須先調用 super 才能引用 this

constructor(props){
  super(props);
  
  this.state = {
     color: "#F07C65"
  }
}

在這邊我設定了預設的 state 是 #F07C65 這個色碼的顏色

呈現氣球顏色

在 render 裡先加上讓使用者輸入色碼的 input，並在 input 裡面綁 onChange 去觸發換色的 function

 <section style={styleObj} id="balloon">
    <h3>{this.props.ask}</h3>
    <input value={this.state.color} onChange={this.changeColor.bind(this)}/>
 </section>

換色 function 使用 changeColor()

changeColor(event){
  this.setState({
     color: event.target.value
  });
}

event.target.value 會去抓 input 裡面的 value，然後在 changeColor() 裡更新 state。

好的，完成了今日任務～
可以去連結裡玩玩看 DEMO