## React是什麼? What is React?
React為Facebook構建與維護開源的函式庫，可以以元件(components)的方式組合構建UI，為前端產生與管理UI的函式庫。
React is an open-source front-end JavaScript library developed by Facebook.
Build UI with components

## React的特色? What are the features of React?
1. Declarative 宣告式語法
>在React，當State發生變化時，我們不必自行操作DOM，React透過Virtual DOM有效地更新和呈現正確的元件。因此宣告式語法使你的代碼更可預測且更易於調試。

>In React, we dont need to manipulate DOM when updating state.
>React will efficiently render components through virtual DOM.
2. Component-Based 組件化
>React以元件為基礎開發，因此你可以自行定義不同的元件(components)並設定每個元件不同的狀態（state），以及透過props來進行父子元件的資料傳遞。在以元件為基礎的開發模式之下，我們就可以將網站中將會重複利用的東西定義成一個元件，並針對不同用途或功能去做設定資料。

>React is Component-based development, you can define any components and set their own state, and parent component passes data to child componenet through props.
>In this way, we can define any that will be reused in the web as a component, and configure data settings for different purposes

3. 單向資料流 one-way data flow
>React資料的流動是單向的，也就是資料只會從父元件傳到子元件(props)。

>React is one-way data flow, data is always passed from the parent component to the child component.

4. React hooks
>React 16.8新增，可以以functional component的方式使用React的功能(useState、useEffect)

>New addition in React 16.8. Allow function components to have access to React features(useState、useEffect).

## 什麼是JSX? What is JSX?
JSX(JavaScript XML)，它是JavaScript的語法擴充。幫助我們以更好理解的方式開發。
JSX is a syntax extension to JavaScript. Better way to understand when develop.

const element = (
  <h1 className="hello">
    Hello, world!
  </h1>
);
// JSX

const element = React.createElement(
  'h1',
  {className: 'hello'},
  'Hello, world!'
);
// JavaScript

## 什麼是Virtual DOM? What is virtual DOM?
Virtual DOM是為了可以局部渲染節省效能。
將當前DOM以object的方式進行紀錄，此行為即是Virtual DOM，當State有更新，會將最新的virtual DOM與之前的virtual DOM進行比對(diff 演算法)，把有變更的部分重新渲染

Record the real DOM as an object. this is virtual DOM. When updating state, compare the latest and previous virtual DOM then re-render the different parts.

## props與state的差別? What is different between props and state?
Props 父元件將資料傳到子元件。
State 儲存你的各種資料狀態，只能在該元件使用，當State改變畫面會進行渲染。

Props are used to parent component pass data to children component
State stores your data. Can only be used within that component, the UI will re-render when the state updates.