React Tutorial 2024
1.0.0
2024您的最新學習工具React是用於創建用戶界面的JavaScript庫。它使開發人員能夠構建可重複使用的UI組件，並通過使用虛擬DOM進行最佳性能來有效地更新DOM。
如果您想完全使用React創建一個新的應用程序或網站，我建議選擇一個在社區中流行的反應供電框架之一。
您可以在沒有框架的情況下使用React，但是我們發現大多數應用程序和站點最終都需要解決常見問題，例如代碼分配，路由，數據獲取和HTML生成。這些挑戰並不是反應的獨特之處，而是所有UI庫的共同點。
通過從框架開始，您可以快速與React啟動並運行，並避免以後開發自己的框架。
Next.js的頁面路由器是一個全棧React框架。它是通用的，可讓您創建任何大小的React應用程序 - 從大多數靜態博客到復雜的動態應用程序。要創建一個新的next.js項目，請在您的終端中運行：
npx create-next-app@latest
Next.js由Vercel維護。您可以將next.js應用程序部署到任何node.js或無服務器託管，也可以將其部署到您自己的服務器。 Next.js還支持不需要服務器的靜態導出。
o應用程序路由器do next.js是NEXT.JS API的重新設計。它使您可以在服務器上甚至在構建過程中運行的異步組件中獲取數據。
Next.js由Vercel維護。您可以將next.js應用程序部署到任何node.js或無服務器託管，也可以將其部署到您自己的服務器。 Next.js還支持不需要服務器的靜態導出。
概述VITE（“快速”，發音為 /VIT /（例如“ Veet”）的法語單詞是一種構建工具，旨在為現代網絡項目提供更快，更精美的開發體驗。它由兩個主要部分組成：
提供與本機ES模塊相比，提供豐富功能增強功能的開發服務器，例如極快的熱模塊更換（HMR）。
將您的代碼與匯總捆綁在一起的構建命令，並預先配置，以輸出高度優化的靜態資產進行生產。
Vite是自以為是的，並帶有明智的默認設置。閱讀功能指南中的可能性。通過插件可以支持框架或與其他工具集成。 “配置”部分說明瞭如何在需要的情況下將Vite適應您的項目。
在開始之前，請確保系統上安裝了node.js。如果您還沒有它，則可以從官方Node.js網站下載它，這真的很簡單。
npx create-vite your-project-name --template react
用項目的名稱替換您的項目名稱。 Vite支持許多框架，但是在這種情況下，我們使用-template React選項指定了React模板。
cd your-project-name
不要忘記用您為項目選擇的實際名稱替換您的項目名稱（當然，除非要保留項目的名稱）。
npm
npm run dev
運行這些命令後，您應該在終端中看到一條消息，表明您的React網站在特定端口上運行，通常是http：// localhost：5173的“隨機”端口號。現在，打開瀏覽器並訪問提供的URL，以查看您的React網站正在行動。
使用React開發人員工具來檢查React組件，編輯道具和狀態，並確定性能問題。
瀏覽器擴展程序是通過React構建的調試網站的最簡單方法是安裝React開發人員工具瀏覽器擴展程序。它可用於幾個流行的瀏覽器：
對於其他瀏覽器（例如Safari），請安裝React-Devtools NPM軟件包：
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtools
接下來，從終端打開開發人員工具：
react-devtools
然後通過將以下<script>標籤添加到網站的開頭來連接您的網站：
<html>
<head>
<script src="http://localhost:8097"></script>
JSX是JavaScript的語法擴展，看起來與XML或HTML相似。它允許開發人員在JavaScript文件中以更簡潔和可讀的方式編寫HTML元素和組件。
import React from 'react';
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
export default App;
功能組件是簡單的功能，可以接受Prop作為參數並返回JSX元素。使用React鉤子，功能組件也可以具有狀態和副作用。
import React from 'react';
const FunctionalComponent = () => {
return <p>This is a functional component.</p>;
}
export default FunctionalComponent;
類組件是擴展React組件的ES6類。他們可以維護和管理局部狀態，並可以訪問生命週期方法，從而使其比功能組件更豐富。
import React, { Component } from 'react';
class ClassComponent extends Component {
render() {
return <p>This is a class component.</p>;
}
}
export default ClassComponent;
道具是將數據從父組件傳遞到React中子組件的一種方式。它們是不變的，並提供了使組件動態和重複使用的方法。
import React from 'react';
const PropsExample = (props) => {
return <p>{props.message}</p>;
}
export default PropsExample;
狀態反應代表組件的變化狀態。這允許組件可以管理和更新自己的數據，從而產生動態和交互式用戶界面。
import React, { Component } from 'react';
class StateExample extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Increment
</button>
</div>
);
}
}
export default StateExample;
生命週期方法sãoMétodosespeciais em em部分de classe quesãoinvocados em diferentes of dio ciclo de vida de um componente。 ComponentDidmountéumMétododeciclo de vida comummente Utilizado，executado depois de um componente ser renderizado no dom。
import React, { Component } from 'react';
class LifecycleExample extends Component {
componentDidMount() {
console.log('Component is mounted!');
}
render() {
return <p>Lifecycle Example</p>;
}
}
export default LifecycleExample;
React使用駱駝處理事件。可以定義功能來處理諸如點擊，更改等事件，從而為組件提供交互性。
import React from 'react';
const EventHandlingExample = () => {
const handleClick = () => {
alert('Button clicked!');
}
return (
<button onClick={handleClick}>
Click me
</button>
);
}
export default EventHandlingExample;
React鉤子是允許功能組件管理狀態和副作用的功能。它們是在React 16.8中引入的，並提供了一種更簡潔的方式，可以在功能組件中使用狀態和生命週期方法。
import React, { useState } from 'react';
const UseStateExample = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}
export default UseStateExample;
React中的受控組件具有輸入，其狀態由React控制。他們收到當前價值，而Onchange處理程序作為道具，使它們由React而不是DOM控制。
import React, { useState } from 'react';
const ControlledComponent = () => {
const [inputValue, setInputValue] = useState('');
const handleChange = (e) => {
setInputValue(e.target.value);
}
return (
<input
type="text"
value={inputValue}
onChange={handleChange}
placeholder="Type here"
/>
);
}
export default ControlledComponent;
錯誤邊界是React組件，可檢測兒童組件樹中任何地方的JavaScript錯誤並記錄這些錯誤，呈現後備UI或採取其他操作。
import React, { Component } from 'react';
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToMyService(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <p>Something went wrong.</p>;
}
return this.props.children;
}
}
export default ErrorBoundary;
高階組件（HOC）是採用組件並返回具有其他功能的新組件的功能。它們是重複使用組件邏輯的一種方式。
import React from 'react';
const WithLogger = (WrappedComponent) => {
return class extends React.Component {
componentDidMount() {
console.log('Component is mounted!');
}
render() {
return <WrappedComponent {...this.props} />;
}
};
}
export default WithLogger;
// Usage
import React from 'react';
import WithLogger from './WithLogger';
const MyComponent = () => {
return <p>My Component</p>;
}
const EnhancedComponent = WithLogger(MyComponent);
React提供了map功能，以動態渲染項目列表。數組中的每個項目都映射到React元素，從而更容易呈現動態內容。
import React from 'react';
const RenderingList = () => {
const items = ['Item 1', 'Item 2', 'Item 3'];
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
export default RenderingList;
React中的上下文API提供了一種通過組件樹傳輸數據的方法，而無需在每個級別手動通過道具。這對於共享諸如主題或身份驗證狀態之類的值很有用。
import React from 'react';
const ThemeContext = React.createContext('light');
export default ThemeContext;
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';
const ThemedComponent = () => {
const theme = useContext(ThemeContext);
return <p style={{ color: theme === 'light' ? 'black' : 'white' }}>Themed Component</p>;
}
export default ThemedComponent;
React中的密鑰有助於確定已更改，添加或刪除的項目。它們應該在列表中是唯一的，並有助於對有效的更新做出反應。
import React from 'react';
const KeysExample = () => {
const data = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
];
return (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
export default KeysExample;
React中的處理表格涉及使用狀態和通過事件處理程序處理表單提交的表單數據進行管理。受控組件用於將形式元素與React的狀態同步。
import React, { useState } from 'react';
const FormExample = () => {
const [formData, setFormData] = useState({ username: '', password: '' });
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
});
}
const handleSubmit = (e) => {
e.preventDefault();
console.log('Form submitted:', formData);
}
return (
<form onSubmit={handleSubmit}>
<label>
Username:
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
/>
</label>
<label>
Password:
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
/>
</label>
<button type="submit">Submit</button>
</form>
);
}
export default FormExample;
內聯樣式：React允許您使用內聯樣式樣式的組件進行樣式，其中樣式被定義為對象並直接應用於元素。
import React from 'react';
const InlineStyleExample = () => {
const styles = {
color: 'blue',
fontSize: '18px',
};
return <p style={styles}>Styled with inline styles</p>;
}
export default InlineStyleExample;
渲染道具是一種使用一個值為函數的Prop之間在React組件之間共享代碼的技術。這允許組件的動態組成。
import React, { useState } from 'react';
const MouseTracker = ({ render }) => {
const [position, setPosition] = useState({ x: 0, y: 0 });
const handleMouseMove = (event) => {
setPosition({ x: event.clientX, y: event.clientY });
}
return (
<div style={{ height: '100vh' }} onMouseMove={handleMouseMove}>
{render(position)}
</div>
);
}
export default MouseTracker;
// Usage
import React from 'react';
import MouseTracker from './MouseTracker';
const App = () => {
return (
<MouseTracker
render={(position) => (
<p>
Mouse position: {position.x}, {position.y}
</p>
)}
/>
);
}
export default App;
CSS模塊有助於定義特定組件的樣式範圍，避免全球樣式衝突。每個組件可以具有自己的CSS模塊，並具有本地範圍的樣式。
.myComponent {
color: green;
}
import React from 'react';
import styles from './CSSModulesExample.module.css';
const CSSModulesExample = () => {
return <p className={styles.myComponent}>Styled with CSS Modules</p>;
}
export default CSSModulesExample;
特徵：
import React, { useState } from 'react';
const TodoApp = () => {
const [tasks, setTasks] = useState([]);
const [newTask, setNewTask] = useState('');
const addTask = () => {
setTasks([...tasks, { text: newTask, completed: false }]);
setNewTask('');
};
const toggleTask = (index) => {
const updatedTasks = [...tasks];
updatedTasks[index].completed = !updatedTasks[index].completed;
setTasks(updatedTasks);
};
const removeTask = (index) => {
const updatedTasks = [...tasks];
updatedTasks.splice(index, 1);
setTasks(updatedTasks);
};
return (
<div>
<input
type="text"
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
/>
<button onClick={addTask}>Add Task</button>
<ul>
{tasks.map((task, index) => (
<li key={index}>
<input
type="checkbox"
checked={task.completed}
onChange={() => toggleTask(index)}
/>
<span style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>
{task.text}
</span>
<button onClick={() => removeTask(index)}>Remove</button>
</li>
))}
</ul>
</div>
);
};
export default TodoApp;
此天氣應用示例說明了React概念的實際應用，包括國家管理，副作用，事件處理，API相互作用和有條件渲染的使用效果。用戶可以學習如何創建功能性的天氣應用程序，並了解React Hooks在現實世界中的集成。
童戀：
功能組件和狀態鉤：
weather和city useState鉤子控制的。使用使用效應獲得數據：
useEffect掛鉤用於執行副作用，例如從OpenWeatherMap API獲取天氣數據。
fetchWeatherData功能是異步的，使用fetch API根據所選城市獲取天氣數據。
條件渲染：
天氣數據只有在存在的情況下才會渲染（ weather && ... ）。
事件處理：
onChange事件中調用setCity函數。API相互作用：
動態更新內容：
造型：
溫度轉換：
// src/RealWorldExamples/WeatherApp.js
import React, { useState, useEffect } from 'react';
const WeatherApp = () => {
const [weather, setWeather] = useState(null);
const [city, setCity] = useState('New York');
const apiKey = 'YOUR_OPENWEATHERMAP_API_KEY';
useEffect(() => {
// Fetch weather data from OpenWeatherMap API
const fetchWeatherData = async () => {
try {
const response = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`
);
if (!response.ok) {
throw new Error('Failed to fetch weather data');
}
const data = await response.json();
setWeather(data);
} catch (error) {
console.error(error.message);
}
};
fetchWeatherData();
}, [city, apiKey]);
return (
<div>
<h1>Weather App</h1>
<label>
Enter City:
<input
type="text"
value={city}
onChange={(e) => setCity(e.target.value)}
/>
</label>
{weather && (
<div>
<h2>{weather.name}, {weather.sys.country}</h2>
<p>Temperature: {Math.round(weather.main.temp - 273.15)}°C</p>
<p>Weather: {weather.weather[0].description}</p>
</div>
)}
</div>
);
};
export default WeatherApp;
最佳實踐：
/src
/components
/Button
Button.js
Button.test.js
Button.css
/features
/Todo
TodoList.js
TodoItem.js
TodoForm.js
/styles
global.css
/tests
/unit
Button.test.js
/integration
TodoIntegration.test.js
最佳實踐：
// Using React.memo
const MemoizedComponent = React.memo(({ data }) => {
// Component logic
});
// Using Code Splitting and Lazy Loading
const MyComponent = React.lazy(() => import('./MyComponent'));
// In your component
const App = () => (
<React.Suspense fallback={<LoadingSpinner />}>
<MyComponent />
</React.Suspense>
);
最佳實踐：
例子：
// Jest Unit Test
test('renders correctly', () => {
const { getByText } = render(<Button label="Click me" />);
expect(getByText('Click me')).toBeInTheDocument();
});
// Jest Integration Test
test('increments count on button click', () => {
const { getByText } = render(<Counter />);
fireEvent.click(getByText('Increment'));
expect(getByText('Count: 1')).toBeInTheDocument();
});
// React Testing Library
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
test('clicking button increments count', () => {
render(<MyComponent />);
userEvent.click(screen.getByRole('button'));
expect(screen.getByText('Count: 1')).toBeInTheDocument();
});
最佳實踐：
在單頁應用程序中使用React路由器作為客戶端路由。
定義到您應用程序的不同視圖或部分的路由。
實現導航組件，例如<Link> ，以便在路線之間輕鬆導航。
例子：
// React Router
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const App = () => (
<Router>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Router>
);
最佳實踐：
// Using Local Component State
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
// Using Context API
const ThemeContext = React.createContext('light');
const ThemedComponent = () => {
const theme = useContext(ThemeContext);
return <p style={{ color: theme === 'light' ? 'black' : 'white' }}>Themed Component</p>;
};
// Using Redux
// (Assuming you have a Redux store configured)
import { useSelector, useDispatch } from 'react-redux';
const CounterRedux = () => {
const count = useSelector(state => state.count);
const dispatch = useDispatch();
return (
<div>
<p>Count: {count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
</div>
);
};
最佳實踐：
例子：
最佳實踐：
例子：
// Error Boundary
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToService(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <p>Something went wrong. Please try again.</p>;
}
return this.props.children;
}
}
最佳實踐：
例子：
// Semantic HTML Elements
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
// ARIA Roles and Attributes
<button aria-label="Close" onClick={handleClose}>
✕
</button>
// Keyboard Navigation
<input type="text" onKeyDown={handleKeyDown} />
最佳實踐：
例子：
// Using React.memo
const MemoizedComponent = React.memo(({ data }) => {
// Component logic
});
// Using Code Splitting and Lazy Loading
const MyComponent = React.lazy(() => import('./MyComponent'));
// In your component
const App = () => (
<React.Suspense fallback={<LoadingSpinner />}>
<MyComponent />
</React.Suspense>
);
// Using PureComponent
class PureCounter extends React.PureComponent {
render() {
return <p>Count: {this.props.count}</p>;
}
定期更新依賴項，以從新功能，錯誤修復和安全補丁中受益。
關注項目中使用的庫和軟件包的語義版本控制。
對重大更新保持謹慎，並在更新之前進行徹底測試。
例子：
# Regularly update dependencies
npm update
# Follow semantic versioning
# Example: Major.Minor.Patch
# ^1.2.3 means any version that is compatible with 1.2.3
配置WebPack以進行優化的生產構建：
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
// Other webpack configurations...
};
感謝您對為這項驚人的React教程做出貢獻的興趣！您的貢獻有助於使該資源對各個級別的學生更有價值。無論您是修復錯誤，改進現有功能還是添加全新的功能，您的努力都會有所作為。
**叉子存儲庫：單擊此存儲庫右上角的“叉”按鈕以創建您的副本。
**克隆存儲庫：使用git clone https://github.com/DaveSimoes/React-Tutorial-2024.git將存儲庫克隆到本地計算機上
**創建一個分支：使用描述性名稱為您的貢獻創建一個新的分支： git checkout -b your-feature 。
**進行更改：在適當的文件中進行更改。隨意改善現有示例，添加新示例，正確錯別字或改進文檔。
**提交更改：通過清晰簡潔的消息提交更改： git commit -m "Your message here" 。
**推送更改：將更改發送到分叉存儲庫： git push origin your-feature 。
創建拉動請求：在原始存儲庫中打開拉動請求。 ForneçaumTítuloClaro，Descreva SuasAlteraçõesE Engie o lut請求。
遵循一致的編碼樣式。確保您的代碼已充分記錄，尤其是在添加新示例或功能的情況下。
感謝您考慮為該React教程做出貢獻。非常感謝您致力於改善此資源。讓我們一起學習和成長！
如果您發現此React教程很有用，請考慮給它一個明星！您的支持令人難以置信，並幫助他人發現這一資源。感謝您成為我們社區和HAP的一員！
反應官方圖書館
