終於進入正題，
首先到 React 的官網 侵門踏戶

官方的介紹只有短短一句話
A JavaScript library for building user interfaces.
中文的意思就是
用來建構使用者介面的 js 函式庫

等等，我們不是說好 React 是 js 框架嗎？

對不起我騙你的
是這樣的，React 本身並不像 angular 那樣是完整的 framework，但搭配其他工具如 React Router, Webpack …型態上才趨近於框架

簡單來說

React 有以下幾個特點

• 專注於 user-interface 的建構
• react 本身有豐富的生態系 eco-system 來處理 routing / sending request
• 以眾多 元件 component 為基底(component based architecture)，構成頁面內容，將整個頁面拆分成小塊的元件並渲染(render)出來
• 因為由眾多元件構成頁面，所以也意味著 React 具有很大的彈性(flexibility)
• 元件中可以包元件，較大的元件包含多個小型元件，藉由在元件間傳遞資料來決定渲染出來的畫面及元素

舉例來說，一個部落格頁面
可能就由 導覽列元件、導覽列項目元件、搜尋框元件、側邊欄元件、單一文章元件...等等構成

一個大型的專案，甚至可能由數百個 component 交織而成

component 元件又是什麼

• 構成使用者介面的片段及 js 互動邏輯
• 建構 React 的小單位
• 相當於一些本身帶有將自身渲染成 html 內容方法的 class(類別)跟 function
• 元件中可以包一個或多個元件(Components can be nested inside other components)
• 元件與元件間互相依賴且互動(rely & interact)
• 可被重複使用(reuseable)的片段(snippets)

component 元件有兩種..

不管是哪一種 component，都要以大寫為開頭來命名

class component

• 從 React component object 延伸而來(extending from React component object)
• class component 上可以傳遞/接收 props (properties 的簡稱)跟改變 state的狀態
• 會有 render method(用來回傳要渲染出的 html 內容) 以及 return 在其中
• 寫法較 functional component 來的繁複
  一個簡單的 class component 長這樣..

class Welcome extends React.Component{
    render(){
        return <h1>{this.props.greeting}</h1>; // 其中的 this.props 就是 Welcome class 本身帶的 property
    }
}

functional component

• 原本是 stateless，只能接收從上層傳下來的 props，但隨著 React Hook 的發展，也產生出類 stateful 的效果
• 沒有 render ，只有 return
• 寫法較簡短
• 多半用來顯示訊息(display information)，為 simple functional component 時的主要作用
• 不能用 原生的 state / lifecycle method
  一個簡單的 functional component 長這樣..

function Welcome(props){
    return <h1>{props.greeting}</h1>; // 其中的 props 參數 就是接收從上層傳入的 prop
}

還記得前面複習 js 時提到的 arrow function 嗎？
既然叫做 functional component，就表示也能用 arrow function 來寫
上面的範例可以改寫為..

const Welcome = (props)=>{
    return (
        <h1>{props.greeting}</h1>
    );
}

快速認識了 React，是不是對他有更進一步的認識呢？
明天要進行的是 建立 React 專案的環境