React.js 是什麼？
React.js (以下簡稱 React) 是 Facebook 所維護並開源的函式庫（或是有些人習慣用「前端框架」來統稱），用於建立應用程式的使用者介面。在瀏覽器環境傳統的前端撰寫方式中，我們會遇到各種像是資料與畫面同步、抽象畫拆分與重用等需求和問題，而 React提供了一個抽象層作為解決方案，讓我們能以高效、優雅、容易預測的方式撰寫並維護前端應用程式。
前端框架是什麼？了解 JavaScript 框架的功能與優點
點我免費領取全端開發學習地圖！
為什麼要使用 React? 有什麼優點
- 靈活高效，是全球最受歡迎的前端框架
- 就業市場機會多，需求旺盛
- 薪資水平較高，年薪百萬的機會非常多
為什麼現在是學 React 的好時機？因為 React Hooks 推出了以後 (Hook 是 React 16.8 中增加的新功能)，不需要有物件導向的背景，只要了解 JavaScript 的 function (函式) 怎麼運作，就可以入手。
為什麼要使用 React 及 React 的特性有哪些？主要是為了提升網頁渲染的效率 (網頁效能)、元件能夠重複利用、資料流管理、以及更好的工程師寫作體驗
React 正夯，業界需要怎樣的 React 工程師？薪水真的很高嗎？
React 的基礎知識
Virtual Dom 是什麼
Virtual DOM，中文翻譯叫做虛擬 DOM，顧名思義，他不是一個真正的 DOM。DOM 是由瀏覽器所產生，並存在在瀏覽器當中的資料結構，而 Virtual DOM 本身是一個 JavaScript 的物件，存在在 memory 當中。
為了避免每次互動引發整個 DOM 的改變，進而產生不必要的 reflow 或 repaint，前端框架在設計與實作上，會先將原本的 DOM 結構複製一份出來，但不會完整複製 DOM 當中的所有資訊，只會複製跟畫面渲染高度相關的資訊，譬如 tag (HTML tag)、props (tag 當中的資訊)與 children (子結點資訊) 等，利用 JavaScrip 物件的資料結構來儲存。
每當有事件產生，或是資料變動的時候，React 會先建立一個新的 virtual DOM，接著，計算出新舊 virtual DOM 之間的差別，最後才會操作真正的 DOM，並僅僅操作有變動的部分，藉此避免不必要的 reflow 或 repaint 以提升效能。
React Elements
React 採用了前述的 Virtual DOM 概念來實作抽象層，以產生並管理瀏覽器畫面中的真實 DOM。而在 React 中的每一個 Virtual DOM element 稱之為「 React element」，作為這個抽象層中的最小組成單位。
React element 是一種普通的 JavaScript 物件，用來描述對應於「真實 DOM」的節點資料與結構。你可以透過 React 提供的 createElement() 方法來建立一個 React element，例如：
createElement() 的第一個參數為元素類型，第二個參數為屬性，而第三個參數則為子元素。
產生出來的 React element 會是一個普通的 JavaScript 物件，長得大概像這樣：
將這個 React element 交由 React 進行處理之後，就會自動產生對應的實際的 DOM 畫面結果：
JSX 是什麼
雖然 React 的 createElement() 方法已經可以讓我們方便且清楚的指定想要的 DOM Tree 結構了，但是相較於以往我們習慣的以 HTML 標籤語法來表示 DOM 樹狀結構的體驗還是有段差距。因此 React 提供了一種稱之為「JSX」的語法糖。
JSX 是 JavaScript XML的簡寫，JSX能讓我們在定義 React elements 的結構時有著相當類似於撰寫 HTML 語法的體驗。當我們開發時可以撰寫 JSX 語法，然後利用工具自動化的幫我們轉換成 React.createElement() 的語法。
Babel & JSX Transformer
Babel 是 JavaScript 社群中最主流且熱門的 Source code transpiler，它可以幫助我們將 JavaScript 原始碼轉譯成另一種模樣的 JavaScript 原始碼，而其中的轉譯效果與邏輯可以完全自定義，藉由安裝各種社群提供的 Babel plugins 或自己撰寫 plugin 來達到。
什麼是 React Component 和 Props？
在 React 中，component（元件）使你可以將 UI 拆分成獨立且可重用的程式碼，並且專注於各別程式碼的抽象化設計，就像是可重用的模板一樣。概念上來說，React component 是一個 JavaScript 的 function，它接收任意的「props（properties、屬性的意思）」作為參數，並且回傳描述畫面的 React element。
我們可以透過定義一個普通的 JavaScript function 來描述一個 React component：
此 function 是一個符合規範的 React component，它接受一個「props」物件作為第一個參數，並回傳一個 React element。我們稱之為 function component（或 component function），因為它本身就是一個 JavaScript function。
其中整包 props 在傳入 component 時固定會是一個 JavaScript 物件，物件中的每一個自定義屬性就稱為 prop。每個 prop 的命名與資料型別可以由開發者自己根據需要來決定。
什麼是 React State
component 的 props 是一種「唯讀且不可變的資料」，一旦由 component 的外部傳入後，就絕對不可以直接在內部修改其內容。React 中還有另外一種「可以更新的動態資料」，稱之為「State（狀態資料）」。
State 可以在不違反上述規則的前提下，讓 React component 隨使用者操作、網路回應、或是其他方式改變輸出內容。State 類似於 prop，但它是 component 完全控制內部使用的。React元件中可以有自己的資料狀態，畫面跟著資料狀態改變而改變重新渲染。
state 通過 React Hooks (例如 useState 和其他方法)在 class component 和 function component使用。
useState 是一種 React 內建的 hook，你可以把它想像成是一種「在 component 內植入狀態資料的注入器」，我們可以透過呼叫它來在一個 component function 裡面定義一個 state
在Form.js 更改第一行，變成下面的
import React, { useState } from “react”;
例如做一個網頁計數器，慣例上我們通常會將 useState 回傳的「目前的 state value」重命名為自訂的資料意義名稱，例如 count，並且將 setState 方法重命名為對應的 update function，例如 count 對應的 setState 就會命名為 setCount：用 useState 建立一個要被監控的資料變數 count，透過 setCount 來改變 count 的數值，React會重新轉譯畫面。
const [count, setCount]=useState(256)
以上是從非常入門的 React 關鍵的學習主題和名詞介紹，真正要開始學習 React 還需要更進一步的了解內涵以及實際練習
