---
# System prepended metadata

title: 21 React 基礎

---

# 21 React 基礎
## 概述
取代以往 state 歸 state 畫面歸畫面，react 的邏輯為 state => 畫面，讓程式自己讀取並依照  state 生成畫面，減少 state 與畫面分離時因為複雜的依存關係導致錯誤。

例如： state 從 1 > 2，傳統的方式是依靠 JS 來讓畫面內容做變更。($(li).text(......， state更動，畫面也更動);react 則是當 state 更動時，重新讀取 state，並且將 state 更新後的畫面 re-render到瀏覽器上(state 控制畫面)。

## 建置環境
 1. 手動建置
    1. webpack (import module的功能)
    2. babel (轉換 ES6 語法，讓瀏覽器兼容)
    3. react (React, React-DOM)
    4. webpack-dev-server (即時更新畫面)
 2. npm create-react-app my-app

## 基礎指令
### component

