| theme | seriph | |
|---|---|---|
| background | https://source.unsplash.com/collection/94734566/1920x1080 | |
| class | text-center | |
| highlighter | shiki | |
| lineNumbers | false | |
| info | ## Slidev Starter Template Presentation slides for developers. Learn more at [Sli.dev](https://sli.dev) | |
| drawings |
|
React for the junior
React 是用來實作 UI 的 JavaScript 函式庫
- 📝 Declarative - 你只要在你的應用程式中為每個情境設計一個簡單的 view，React 就會在資料變更時有效率的自動更新並 render 有異動的元件
- 🎨 Component-Based - 建置經過封裝過而獨立的元件，管理 state 組合成複雜的使用者介面
- 🧑💻 JSX - 使用 JSX 語法結合 HTML 和 JS
- 🤹 Props - Parent 單向傳遞給 Children 的資料
- 🎥 State - 由各 Component 管理且 private
- 🛠 Hooks - ver 16.8 後引入，提供 function component 使用 state 及其他功能
| right / space | 下一個動畫或是頁面 |
| left / shiftspace | 上一個動畫或是頁面 |
| up | 上一頁 |
| down | 下一頁 |
控制選單 !
React 會有一個最根本的入口，用來宣染整個 React web app，習慣性會將一些 middleware 放在這
如果是 CRA，入口會是 index.js，而使用 Vite 會是 main.jsx，內容大致如下
// index/main
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
)除了入口點以外，還會有一個最底層的 Component，通常我們會用來放置 global components 或是 configuration 等等 通常檔案名是 App.{js,jsx,tsx}
以下是 App.jsx 示意
function App() {
useInit();
return (
<>
<GlobalStyles />
<Header />
<Main />
<Modal />
</>
);
}
export default App;自從 Hooks 被引入後，Function component 成為了 React 的主流 簡單乾淨的特性，讓工程師能夠更容易地設計 Component
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}使用 JSX 語法並透過 return 來 render component
在上一頁我們建立了一個 Welcome component
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}接下來我們就可以將在 Component 在任意元件上使用
function App() {
return (
<Header />
<Welcome name="Sara" />
<Footer />
);
}Props 是 Parent 和 Children 溝通的資料，從 Parent 單方向傳遞給 Children。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<Header />
<Welcome name="Sara" />
<Footer />
);
}
App 透過 name 將 Sara 傳遞給 Welcome，Welcome 則能夠透過 props.name 來取得 Sara
要注意的是， 永遠不要去修改 props 的值 。
<style> mark { background-color: coral; } </style>Component 可以在輸出中引用其他 component。
舉例來說，我們可以建立一個 render 多次 Welcome 的 App component：
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Tony" />
<Welcome name="Eddie" />
</div>
);
}State 類似於 props，但是它是各 Component 所獨自擁有，並且是 private
早期的 Function component 是 stateless 的，但是隨著 Hooks 的引用，現在 Function component 也能擁有 State
import React, { useState } from 'react';
function Example() {
// 宣告一個新的 state 變數，我們叫他「count」
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}function Example() {
// 宣告一個新的 state 變數，我們叫他「count」
const [count, setCount] = useState(0);
const handleClick = () => setCount(count + 1);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={handleClick}>
Click me
</button>
</div>
);
}useState 是一個 hook，我們可以使用它來建立 local state， 即使在 re-render 之後仍會保留這些 state 。
useState 回傳一組數值：[目前 state 值, 更新 state 用 function]。
useState 唯一的 argument 是初始狀態。在上面的例子中，他是 0 因為我們希望計數器從零開始。
如果沒有給予初始狀態，將會是 undefined。
可以在一個 component 中使用 State Hook 不只一次
function ExampleWithManyStates() {
// 宣告多個 state 變數!
const [age, setAge] = useState(18);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
// ...
return ...
}Re-render 是 React 一個很重要的機制，透過 Re-render 將能夠重新繪製我們所期望的畫面。
- State 更新
- Props 更新
- Parent re-render