介紹
React.js 已成為現代 Web 開發中用於創建互動式和動態使用者介面的主要內容。其基於元件的架構透過提供聲明性 UI 並利用虛擬 DOM 的概念，簡化了單頁應用程式 (SPA) 的開發。本備忘單旨在引導您了解 React.js 的基本知識，從了解基礎知識到掌握進階技術。無論您是初學者還是希望提升自己的技能，本指南都是您掌握 React.js 的首選資源。
1. 了解 React.js 的基礎知識
元件： React 應用程式的建構塊，元件封裝了 UI 元素的結構和行為。它們可以簡單也可以複雜，並且可以促進可重複使用性。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
登入後複製
JSX (JavaScript XML)： JSX 讓您可以直接在 JavaScript 程式碼中編寫類似 HTML 的語法，使其更直觀、更易於使用。
const element = <h1>Hello, world!</h1>;
登入後複製
虛擬 DOM：React 的 Virtual DOM 是實際 DOM 的輕量級副本，它允許高效的更新和渲染，從而提高應用程式效能。
2. 必要的工具和函式庫
Babel： 一個 JavaScript 編譯器，讓您能夠編寫現代 JavaScript 程式碼（包括 JSX），並將其轉換為瀏覽器相容的版本。
// Babel transforms this JSX:
const element = <h1>Hello, world!</h1>;
// Into this:
const element = React.createElement('h1', null, 'Hello, world!');
登入後複製
Webpack： 一個模組捆綁器，可協助管理專案資產和依賴項，最佳化它們以實現高效載入。
Redux： 狀態管理函式庫，可確保一致且可預測的應用程式狀態，通常與 React.js 一起使用。
import { createStore } from 'redux';
function reducer(state = {}, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
default:
return state;
}
}
const store = createStore(reducer);
登入後複製
3. 功能組件和鉤子
函數式元件是簡單、可重複使用的函數，它們接受 props 並傳回 JSX。它們因其簡單性和易於測試而受到青睞。透過使用 React hooks，您可以管理功能元件內的狀態和生命週期方法，使它們更加強大。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
登入後複製
關鍵掛鉤：
-
useState： 管理功能元件內的狀態。
-
useEffect: 處理資料取得或訂閱等副作用。
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
登入後複製
-
useContext: 提供了一種透過元件樹傳遞資料的方法，無需手動向下傳遞 props。
4. 使用 JSX
JSX 允許您將類似 HTML 的語法與 JavaScript 表達式混合在一起。此功能可讓您的元件更加動態和互動。使用 JSX 有條件地渲染元素、映射數組以及將變數直接嵌入您的 UI 中。
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
登入後複製
5. 屬性（道具）
Props 是一種將資料從父元件傳遞給子元件的方法，可讓您控制子元件的行為和外觀。 Props 讓您的元件可重複使用且可維護。
function Greeting(props) {
return <h1>Hello, {props.name}</h1>;
}
// Usage
<Greeting name="Sara" />
登入後複製
6. React 中的樣式
內嵌樣式：使用 JavaScript 物件直接在元件中定義樣式。內聯樣式可以根據元件狀態或 props 動態調整。
const divStyle = {
color: 'blue',
backgroundColor: 'lightgray',
};
function StyledComponent() {
return <div style={divStyle}>Styled with Inline CSS</div>;
}
登入後複製
CSS-in-JS 程式庫： Styled Components 或 Emotion 等程式庫可讓您在 JavaScript 程式碼中編寫 CSS，將樣式和邏輯封裝在一起以實現更好的可維護性。
import styled from 'styled-components';
const Button = styled.button`
background: palevioletred;
color: white;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
登入後複製
7. 狀態管理
狀態是控制元件行為和渲染的資料。使用 useState 鉤子來管理本機元件狀態，並使用 setState 在狀態改變時觸發重新渲染。
function Example() {
const [state, setState] = useState({ count: 0 });
return (
<div>
<p>You clicked {state.count} times</p>
<button onClick={() => setState({ count: state.count + 1 })}>
Click me
</button>
</div>
);
}
登入後複製
8. 處理事件
React 提供了一種透過事件處理程序處理使用者互動的簡單方法。將事件處理程序綁定到您的元件方法，並使用事件物件來管理使用者操作，例如按一下、表單提交和輸入變更。
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
<a href="#" onClick={handleClick}>Click me</a>
登入後複製
9. 條件渲染
條件渲染允許元件根據特定條件渲染不同的輸出。利用 JavaScript 的條件語句（例如 JSX 中的 if-else 或三元運算子）來動態呈現內容。
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <h1>Welcome back!</h1>;
}
return <h1>Please sign up.</h1>;
}
登入後複製
10.反應路由器
React Router 讓您能夠建立具有多個視圖和無縫導航的 SPA。定義路線並將其連結到元件，以允許用戶輕鬆瀏覽您的應用程式。它還支援動態路由和嵌套路由，增強應用程式導航的靈活性。
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<div>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</div>
</Router>
);
}
登入後複製
Conclusion
Mastering React.js opens the door to creating powerful and efficient web applications. This cheat sheet covered the fundamentals, tools, and advanced concepts you need to know. Keep practicing, stay updated with the latest trends, and explore the vast React.js ecosystem to continue growing as a React developer.
以上是終極 React.js 備忘單：輕鬆掌握 React.js⚛️的詳細內容。更多資訊請關注PHP中文網其他相關文章！
