React Tutorial 2024
1.0.0
2024あなたの最新の学習ツールReactは、ユーザーインターフェイスを作成するためのJavaScriptライブラリです。開発者は、再利用可能なUIコンポーネントを構築し、仮想DOMを使用して最適なパフォーマンスを発揮してDOMを効率的に更新できます。
Reactで完全に新しいアプリまたはWebサイトを作成したい場合は、コミュニティで人気のあるReact駆動のフレームワークの1つを選択することをお勧めします。
フレームワークなしではReactを使用できますが、ほとんどのアプリやサイトは、最終的にコード分割、ルーティング、データフェッチ、HTML生成などの一般的な問題に対処する必要があることがわかりました。これらの課題は反応に固有のものではありませんが、すべてのUIライブラリに共通しています。
フレームワークから始めることにより、すぐに反応して立ち上がって実行し、後で独自のフレームワークを開発する必要性を回避できます。
next.jsのページルーターは、フルスタックのReactフレームワークです。多用途であり、ほとんどが静的なブログから複雑な動的アプリケーションまで、あらゆるサイズのReactアプリを作成できます。新しいnext.jsプロジェクトを作成するには、ターミナルで実行します。
npx create-next-app@latest
Next.jsはVercelによって維持されます。 next.jsアプリを任意のnode.jsまたはサーバーレスホスティング、または独自のサーバーに展開できます。 Next.jsは、サーバーを必要としない静的エクスポートもサポートしています。
oアプリルーターdo next.jsは、Reactチームのフルスタックアーキテクチャビジョンを満たすことを目指しているNext.js APIの再設計です。サーバー上またはビルド中に実行される非同期コンポーネントでデータを取得できます。
Next.jsはVercelによって維持されます。 next.jsアプリを任意のnode.jsまたはサーバーレスホスティング、または独自のサーバーに展開できます。 Next.jsは、サーバーを必要としない静的エクスポートもサポートしています。
概要Vite（「Quick」、発音 /vit /、「Veet」のようなフランス語の単語）は、現代のWebプロジェクトにより速く、よりスリムな開発エクスペリエンスを提供することを目的とするビルドツールです。 2つの主要な部分で構成されています。
たとえば、非常に高速なホットモジュール交換（HMR）など、ネイティブESモジュールよりもリッチな機能拡張機能を提供する開発サーバー。
ロールアップでコードをバンドルするビルドコマンド。
Viteは意見があり、箱から出して賢明なデフォルトが付属しています。機能ガイドで何が可能かについて読んでください。フレームワークのサポートまたは他のツールとの統合は、プラグインを介して可能です。構成セクションでは、必要に応じてViteをプロジェクトに適応させる方法について説明します。
開始する前に、システムにnode.jsがインストールされていることを確認してください。まだお持ちでない場合は、公式node.jsのWebサイトからダウンロードできます。本当に簡単です。
npx create-vite your-project-name --template react
プロジェクトの名前をプロジェクトに必要な名前に置き換えます。 Viteは多くのフレームワークをサポートしていますが、この場合、-Template Reactオプションを使用してReactテンプレートを指定します。
cd your-project-name
プロジェクト名をプロジェクトに選択した実際の名前に置き換えることを忘れないでください（もちろん、プロジェクトのこの名前を保持したい場合を除きます）。
npm
npm run dev
これらのコマンドを実行した後、端末に特定のポートでReact Webサイトが実行されていることを示すメッセージが表示されます。これは通常、http：// localhost：5173のような「ランダム」ポート番号です。次に、ブラウザを開いて、提供されたURLにアクセスして、React Webサイトが実行中に表示されます。
React開発者ツールを使用して、Reactコンポーネントを検査し、小道具と状態を編集し、パフォーマンスの問題を特定します。
ブラウザ拡張Reactで構築されたWebサイトをデバッグする最も簡単な方法は、React Developer Toolsブラウザー拡張機能をインストールすることです。いくつかの人気のあるブラウザで利用できます：
他のブラウザ（たとえば、Safariなど）については、React-Devtools NPMパッケージをインストールします。
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtools
次に、ターミナルから開発者ツールを開きます。
react-devtools
次に、次の<スクリプト>タグをウェブサイトの先頭に追加して、ウェブサイトを接続します。
<html>
<head>
<script src="http://localhost:8097"></script>
JSXは、XMLまたはHTMLに似たJavaScriptの構文拡張機能です。これにより、開発者はJavaScriptファイル内でより簡潔で読みやすい方法でHTML要素とコンポーネントを作成できます。
import React from 'react';
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
export default App;
関数コンポーネントは、プロップを引数として受け入れ、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;
ライフサイクル方法サンメトドス特別な成分デクレースクエサンインフカドスem異なるファーズは、ciclo de vida de um componenteを行います。 componentdidmount e ummétododeciclo de vida comummente utilizado、executadodo de um 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によって制御されています。彼らは現在の価値とオンチェンジハンドラーを小道具として受け取り、DOMではなくReactによって制御されます。
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;
エラー境界は、子コンポーネントツリーのどこでも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;
高次コンポーネント（HOCS）は、コンポーネントを取得し、追加の機能を備えた新しいコンポーネントを返す関数です。それらは、コンポーネントのロジックを再利用する方法です。
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;
Render Propsは、値が関数であるプロップを使用して、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;
この気象アプリケーションの例は、国家管理、副作用の使用効率、イベント処理、API相互作用、条件付きレンダリングなど、反応概念の実用的なアプリケーションを示しています。ユーザーは、機能的な気象アプリケーションを作成する方法を学び、Reactフックの実際のシナリオへの統合を理解することができます。
フェトゥール：
機能成分と状態フック：
weatherとcityためのuseStateフックを使用して制御されています。Useefectを使用してデータを取得します。
useEffectフックは、OpenWeatherMap APIから気象データを取得するなど、副作用を実行するために使用されます。
fetchWeatherData関数は非同期であり、 fetch APIを使用して選択した都市に基づいて気象データをフェッチします。
条件付きレンダリング：
気象データは、存在する場合にのみ条件付きでレンダリングされます（ weather && ... ）。
イベント処理：
setCity関数はonChangeイベントで呼び出されます。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 。
プルリクエストの作成：元のリポジトリでプルリクエストを開きます。 fornçaumtítuloclaro、descreva suasalteraçāesee envie o cupl request。
一貫したコーディングスタイルに従ってください。特に新しい例や機能を追加する場合は、コードが十分に文書化されていることを確認してください。
このReactチュートリアルに貢献することを検討していただきありがとうございます。このリソースを改善することへのあなたの献身は大歓迎です。一緒に学び、成長しましょう！
このReactチュートリアルが便利だと思ったら、スターを与えることを検討してください！あなたのサポートは非常に動機付けられており、他の人がこのリソースを発見するのに役立ちます。私たちのコミュニティとHAPの一員であることをありがとう！
反応公式図書館
