# React.js - Basic
###### tags: `FrameWork-React.js`
## 一 . Function Component
### (一) . JSX
- JSX的功用 ： 用於**描述UI的長相的**。
1. 所以，我們可以知道，JSX應該是主要負責和使用者互動的(view層)。
2. 包含MVC中的V，使程式可以動態產生樣板。(依照data渲染)
3. 包含MVC中的C處理使用者請求部分，使程式可以和使用者溝通。(event handler)。

It is called JSX, and it is a syntax extension to JavaScript. 
We recommend using it with React to describe what the UI should 
look like. JSX may remind you of a template language, but it 
comes with the full power of JavaScript.

- JSX的語法 ： 需要babel設定，React自動將其轉換成對應語法。
1. 設定 ： 使用React create app 或 cdn。
2. 語法 ： 可以視為在HTML中鑲入js，但其實性質比較像是js的延伸。
- 使用任何js表達式時，都必須用{}包起來。
- 原本設定html屬性都必須變成駝峰形式表達。
3. 限制 ： 只可以有一個root元素的存在。

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

- JSX的性質 ： immutable。不可以改變得。
1. 不像Vue的功能，在Vue中的鑲入資料可以因為資料的改變就改變DOM。
2. JSX在宣告成立的時候，就成為一份snapshot，不會因為外部的改變而變。
3. 所以，要改變JSX的內容，也只可以重新渲染，及重建元素，並重新掛載。

let name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

name='Chnage name '; \\ 不會對element改變。

### (二) . Virtual DOM 和 React DOM方法
- Virtual DOM : 用JS去模擬html DOM tree的分布情形。
1. 避免直接操作DOM tree。改變於Virtual DOM tree
2. 每次data的變化，都先改變Virtual DOM，再和實際DOM比較，終進行改變。
- React DOM方法 ： react就是使用了這樣的發法取渲染網頁。
1. render方法 ： 將指定的virtual DOM掛載於實際指定的DOM中。
2. 參數 ： 第一個為react(JSX) object，第二個為DOM的root。

### (三) . function Component 和 props
- Component : UI中的某些元件需要重複利用，這些元件就可以是Component。
1. Component是一個可以重複建構的樣板。
2. 在OOP中，就是一個個object的存在。
- function Component : 用js function建構的元件。
1. 語法 ： 和ES5之前可以用到的function ctor是一樣的。
2. render function : 必須有這一個函式，去做渲染的工作。
3. 使用 ： 注意，用JSX宣告function component，並非使用new方法。

function Title(){
    render(){
        return (
            <div> Hello </div>
        )
    }
}

const heading= <Title></Title>;
ReactDOM.render(
    heading , 
    document.getElementById('root')
);

- props屬性 ： 傳入component的資料，客製化元件，但不能被元件修改。
1. 語法 ： 在function中加入props參數，在宣告時加入key-value的屬性。
2. 使用 ： 在JSX宣告時加入key-value，在元件用props.{key}使用。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

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

## 二 . Class Component

### (一) . Class Component

### (二) . State
- state和props : React將元件樹的資料分成兩部分，state和props。
1. props : 父層(或外層)提供的data，不能改變。
2. state : 自己的data，可以提供自己改變，可以動態變化資料的呈現。
- state和setState方法 ： state只可以在所屬的component被改變。
1. ctor設定 ： 在ctor區域可以直接設定資料。
2. function設定 ：在其他地方必須使用setState({key:value})方法重設資料。
- 分成state和props的資料控制 ： Single Source of truth。
1. 每個component都有專屬於state : 每個資料都有一個專屬的元件管理。
2. 由function去trigger state : OOP概念，由元件的method改變data。

- React動態渲染和state與props ：元件state和props會自動被偵測，並重新渲染。

### (三) . 淺談LifeCycle

## 三 . Basic Application
### (一) . 事件處理：Event Handle
- 概念 ： extension native element，加強延伸原本原生的處理機制。
1. 原本native : ```on```的event listener。
2. react方法 : 將原生的方法連上react的方法。

<button id='button' onclick='push()'>Say Hello </button> 

<script>
    function push(){
        console.log('hello !!');
    }
</script>

class SayHelloButton extends React.Component{
    constrcutor(){
        this.hanleButton = this.hanleButton.bind(this); 
    }
    hanleButton(){
        console.log('hello !!');
    }
    render(){
        return (
             <button onClick={this.handleButton}>
               push
             </button>
        )
    }
}

- Binding this pointer :
1. 重點 ： react class中宣告的原型方法中的this並沒有綁定在元件上。
2. 方法 ： 在constrcutor的地方blind。

class Test extends React.Component{
    constrcutor(){
        this.function_01 = this.function_01.bind(this);
        this.function_02 = this.function_02.bind(this);
        this.function_03 = this.function_03.bind(this);
    }
    function_01(){
    
    }
    function_02(){
    
    }
    function_03(){
    
    }
}

- Pass Event Para :
1. 用arrow 傳遞 ：

### (二) . 條件渲染 ： Conditional render
- 概念 ： 用變數改變呈現。
1. 原本用HTML的render改為JSX ：用```{expression}```儲存。
2. 用function去trigger變數(state)變化。

class Test extends React.Component{
    constrcutor(){
        this.state={
            window : <p>Push Button</p>
        }
    }
    handleButton(){
        this.setState({
            window : <p>You already push the Button</p>
        });
    }
    render(){
        return (
            <div>
                {this.state.window}
                <button onClcik={this.handleButton}>Push<button>
            </div>
        )
    }
}

- Null diaplay :
1. 變數為false的時候 ：
2. render為null的時候 ：

### (三) . 迴圈渲染 ： Loop render
- 概念 ： 用變數存放要渲染出來的內容。

### (四) . 雙向資料流 ： Data-Blinding
- 概念 ： 由三個步驟去了解。
1. 使用者觸發事件 ： 用react event handler處理。
2. function改變data : 觸發的function必須改變state。
3. 重新渲染 ： 改變的state必須存在render函式內，觸發自動改變。

- Controlled Component :
1. 定義 ： 使用上面的bind方法組成的form元件。
2. 註 ： 可以看看Vue的v-modal directive，其實也是用react的方法。

## 四 . Data Flow