---
disqus: hackmdy
---
React 24H 秒懂 - part1
===
本文件為 react 入門實作 TODO APP 筆記
[【8/12分享錄影】](https://youtu.be/rWwHgJFNfpw)
[【原始教程源碼】](https://github.com/shiningjason1989/react-quick-tutorial)
[【原始教程技能樹】](https://workflowy.com/s/uJ211MUuLM)
[【練習記錄源碼】](https://github.com/leo424y/react-quick-tutorial-go)
[【一鍵簡報模式】](https://hackmd.io/p/rkoWHDBK#/)
[【part1】](https://hackmd.io/s/rkoWHDBK)
[【part2】](https://hackmd.io/s/BJ4mzo_Y)

---

React 為數據提供渲染為 HTML view 的開源 JavaScript 庫。
data flows down: 子組件不能直接影響外層組件
數據改變時，有效地更新 HTML

它由 Facebook, Instagram 和一個由個人開發者和企業組成的社群維護。
Libscore 統計用戶有 Netflix, Imgur, Feedly, Airbnb

Demo
JSX版 https://jsfiddle.net/reactjs/69z2wepo/
JS版 https://jsfiddle.net/reactjs/5vjqabv3/

---

React 的設計思維，就是「元件、元件、元件」。
元件，就如 UI 圖層。

---

一般人看網頁

---

開發者看網頁，依定義而切。

---

這個專案的目標，簡單但很有事的...待辦清單。

---

# 安裝 live-server

執行

$ npm install -g live-server

Mac 需要加 sudo

$ sudo npm install -g live-server

---

## 作用
- 所見即所得
- 避免 [AJAX](https://www.wikiwand.com/zh-tw/AJAX) 因安全性因素被擋 (用Firefox就沒這個問題)

## 套件管理員們
[npm](http://j.mp/y-npm) 之於 Node.js
RubyGems 之於 Ruby
CocoaPods 之於 iOS
Gradle/Maven 之於 Java

---

# 在 index.html 新增 JS library
- react.js
- react-dom.js
- babel-core > browser.js

---

# react 託 react-dom 操作 Web

react.js 是 React 的核心 API
react-dom.js 處理對 HTML DOM 的操作。

React 在 0.14 版 October 7, 2015 兩者一分為二
Web 和 Mobile (React Native) 可共用 react.js

---

# 翻譯蒟蒻 Babel
Babel 負責編譯，而 browser.js 讓你可以在瀏覽器中進行這項翻譯的工作。

## Babel
一個 JS 編譯器，能把 ES6/ES7/JSX 語法，轉譯成瀏覽器懂的 ES5 語法。

## browser.js
Babel 的程式庫

---

# React 開始發功
使用`ReactDOM.render()` 讓 `<h1>hello, world</h1>` 顯示在 `<div id="app">` 中

---

# 建元件三法
謹記「元件可以是 class，也可以是 function」！

// 第一種. 使用 ES6 的類別 (classes)
class TodoApp extends React.Component {
  render() {
    return <div>TodoApp</div>;
  }
}

// 第二種. 使用 React.createClass API，通常用於 ES5 中
const TodoApp = React.createClass({
  render() {
    return <div>TodoApp</div>;
  }
});

// 第三種. 使用 function，通常用在元件只需要定義 render 方法時
const TodoApp = function() {
  return <div>TodoApp</div>;
};

---

# 4. 完成第一個元件

## 4.1. 新增一個繼承 React.Component 的子類

class TodoApp extends React.Component {
}

---

## 4.2. 引入 TodoApp.js

<script type="text/babel" src="./TodoApp.js"></script>

---

## 4.3. 從 window.App 中，取得 TodoApp 元件

    const { TodoApp } = window.App;

---

## 4.4. 將 TodoApp 元件渲染在 container 中

ReactDOM.render(
      <TodoApp />, 
      document.getElementById('app')
    );

---

# 喔耶!

瞧瞧 [【part2】](https://hackmd.io/s/BJ4mzo_Y)

還有...
[【教程源碼】](https://github.com/shiningjason1989/react-quick-tutorial)
[【練習源碼】](https://github.com/leo424y/react-quick-tutorial-go)
[【簡報模式】](https://hackmd.io/p/rkoWHDBK#/)
[【技能樹】](https://workflowy.com/s/uJ211MUuLM)
[【part2】](https://hackmd.io/s/BJ4mzo_Y)

---

12341243

---

123

---

1234

---

12341234

---

123412343123412340

----