React
JS
第一堂放課 簡介& 基礎語法
講師介紹
姓名：張雲淞
綽號：章魚
社團：建中資訊社 INFOR
職位：外交長兼學術
學術力：JavaScript、網頁前後端、Python、C++
教學課程：上學期放課 Discord.js、下學期社課 JavaScript、下學期放課 React
社帳 Instagram
React?
What's
React 是什麼？
React 是什麼？
從網頁的基本概念開始說起
前端三件套
| 語言 | 用途 |
|---|---|
| HTML | 網頁的架構 |
| CSS | 網頁的格式 |
| JavaScript | 網頁的功能 |
React 是什麼？
建中資訊社
INFOR 38th
在無盡的淬煉中，打造無瑕的程式碼。
活動
課程
HTML
（基本內容）
React 是什麼？
HTML+CSS
建中資訊社
INFOR 38th
在無盡的淬煉中，打造無瑕的程式碼。
活動
課程
（排版與格式）
React 是什麼？
HTML+CSS+JS
建中資訊社
INFOR 38th
在無盡的淬煉中，打造無瑕的程式碼。
活動
課程
（點按「建中資訊社」的動畫）
React 是什麼？
需要通過 JavaScript 處理互動內容
將結構、樣式寫到 JS 程式中，程式碼維護困難
隨著專案規模逐漸擴大，程式複雜度提高
HTML、CSS、JS 無法維持原本的各司其職
網頁框架隨之誕生
React 是什麼？
最常見的網頁前端框架包括 React, Angular, Vue
（React 其實不是框架，而是函式庫）
React 是什麼？
React
Features
of
React 的功能
React 的功能
1. 原子
最小的 UI 元件，如 button, h1, img
function Button({ children }) {
return <button className="btn">{children}</button>;
}React 的功能
2. 分子
多個原子組成的小功能元件，如搜尋框
function SearchBox() {
return (
<div>
<input placeholder="搜尋內容" />
<button>Search</button>
</div>
);
}React 的功能
3. 有機體
多個元件組成的完整區塊，如網站的 Header
function Header() {
return (
<header>
<Logo />
<SearchBox />
<UserMenu />
</header>
);
}React 的功能
4. 模板
頁面的版型
function MainTemplate({ children }) {
return (
<>
<Header />
<Sidebar />
<main>{children}</main>
<Footer />
</>
);
}React 的功能
5. 頁面
完整的頁面與資料
function HomePage() {
return (
<MainTemplate>
<ProductList />
</MainTemplate>
);
}React 的功能
組件化開發
將 UI 分解為獨立的組件，提升可維護性和開發效率。
虛擬 DOM
優化畫面更新，每次僅更新有更動部分，提升渲染效率。
JSX 語法
JSX 是結合 JS 和 HTML 的語法，開發時得以更加直觀的撰寫組件。
跨平台開發
除 Web 開發外亦可搭配 React Native 開發行動應用程式。
React 的功能
例如「按讚」的功能
需要從 JavaSript 接收按鈕的事件後，操作 HTML 編輯
<button id="likeBtn">❤️ 0</button>
<script>
let count = 0;
document.getElementById("likeBtn").addEventListener("click", function () {
count++;
this.innerHTML = "❤️ " + count;
});
</script>React 的功能
若使用 React，則可以「元件化」的製作按鈕
當資料改變時 React 會自動更新頁面
import { useState } from "react";
function LikeButton() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
❤️ {count}
</button>
);
}JSX 語法
React 的功能
「元件化」的利用，在重複的內容時也可以發揮效果
<div class="user">
<h3>Jason</h3>
<p>INFOR President</p>
</div>
<div class="user">
<h3>Ariel</h3>
<p>ZSISC Lecturer</p>
</div>
<div class="user">
<h3>Black</h3>
<p>CKCSC Designer</p>
</div>重複的使用者元件
React 的功能
「元件化」的利用，在重複的內容時也可以發揮效果
function UserCard({ name, job }) {
return (
<div className="user">
<h3>{name}</h3>
<p>{job}</p>
</div>
);
}先以元件寫出架構
<UserCard name="Jason" job="INFOR President" />
<UserCard name="Ariel" job="ZSISC Lecturer" />
<UserCard name="Black" job="CKCSC Designer" />在網頁直接使用元件
Planning
Lesson
課程規劃
課程規劃
本學期 React 共八堂放課
- 第一、二堂（3/10-4/7）：
基礎語法與觀念複習 - 第三至六堂（4/14-6/2）：React
- 第七、八堂：專案實作
課程規劃
課程的公告和簡報、資源都會在 116×117 大群發布！
領 2️⃣ 身份組可以收到放課通知！
Review
基礎語法複習
基礎語法複習
上學期網頁前端放課 @at
基礎語法複習
上學期網頁前端放課
楓資 教學長 戴瑢溱 & 教學 廖姸惁
後續的課程會需要基礎的網頁前端能力，
前兩堂會先複習網頁前端的基礎語法，
如自己有時間也可以看上學期的網頁前端簡報學習，
後續上課的理解會更加順利！
Thanks
歡迎下次再來！
React (1) 簡介＆基礎語法
By 章魚
