React.js は、動的で高性能な Web アプリケーションを構築するための現代の Web 開発の基礎となっています。この包括的なチートシートには、実践的な例、コード スニペット、すべての機能の詳細な説明など、React.js をマスターするために知っておくべきすべてが網羅されています。目標は、いつでも参照できる詳細なガイドを提供することです。
React.js (単に React と呼ばれることも多い) は、ユーザー インターフェイス、特に高速でインタラクティブなユーザー エクスペリエンスが必要な単一ページ アプリケーションの構築に使用されるオープンソース JavaScript ライブラリです。 Facebook によって開発された React を使用すると、開発者はデータの変更に応じて効率的に更新およびレンダリングできる大規模な Web アプリケーションを作成できます。
React の中核概念はコンポーネントであり、これは出力をレンダリングする自己完結型モジュールです。コンポーネントはネスト、管理、および個別に処理できるため、開発プロセスが効率的で保守可能になります。
React を始める前に、開発環境をセットアップする必要があります。その方法は次のとおりです:
公式 Web サイトから Node.js をダウンロードしてインストールします。
以下を実行してインストールを確認します。
node -v npm -v
Create React App をインストールします: Create React App は React を学習するための快適な環境であり、React で新しいシングルページ アプリケーションを開始するための優れた方法です。
npm install -g create-react-app
環境がセットアップされたら、新しい React アプリケーションを作成できます。
新しいプロジェクトを作成します:
npx create-react-app my-app cd my-app npm start
このコマンドは、指定された名前 (my-app) で新しいディレクトリを作成し、新しい React プロジェクトをセットアップして、開発サーバーを起動します。ブラウザを開いて http://localhost:3000 にアクセスすると、新しい React アプリケーションが表示されます。
コンポーネントは、React アプリケーションの構成要素です。これにより、UI を独立した再利用可能な部分に分割できます。
機能コンポーネントは、引数として props を受け取り、React 要素を返す JavaScript 関数です。これらはクラス コンポーネントよりもシンプルで記述が簡単です。
import React from 'react';
const Welcome = ({ name }) => {
return <h1>Welcome, {name}!</h1>;
};
export default Welcome;
クラス コンポーネントは、React.Component を拡張し、React 要素を返す render メソッドを持つ ES6 クラスです。
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return <h1>Welcome, {this.props.name}!</h1>;
}
}
export default Welcome;
状態管理: 機能コンポーネントは状態管理にフック (useState、useEffect など) を使用しますが、クラス コンポーネントは this.state メソッドとライフサイクル メソッドを使用します。
ライフサイクル メソッド: クラス コンポーネントには、componentDidMount、componentDidUpdate、componentWillUnmount などのライフサイクル メソッドがあります。機能コンポーネントは useEffect フックを使用して副作用を処理します。
シンプルさ: 機能コンポーネントはよりシンプルで冗長ではないため、読みやすく、保守しやすくなっています。
JSX は、JavaScript 内で HTML を直接記述できるようにする構文拡張機能です。 React の「要素」を生成します。
JSX は HTML のように見えますが、JavaScript に変換されます。
const element = <h1>Hello, world!</h1>;
中括弧で囲むことにより、JSX に任意の JavaScript 式を埋め込むことができます。
const name = 'John';
const element = <h1>Hello, {name}!</h1>;
JSX を使用すると、HTML に似た構文で属性を使用できます。
const element = <img src={user.avatarUrl} alt={user.name} />;
State は、コンポーネントに属するプロパティ値を保存する組み込みオブジェクトです。状態オブジェクトが変更されると、コンポーネントが再レンダリングされます。
useState フックは、機能コンポーネントに状態を追加するために使用されます。
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
};
export default Counter;
Props は React コンポーネントに渡される引数です。 Props は、HTML 属性を介してコンポーネントに渡されます。
Prop は読み取り専用で不変です。
const Greeting = (props) => {
return <h1>Hello, {props.name}!</h1>;
};
const App = () => {
return <Greeting name="Alice" />;
};
PropTypes を使用すると、コンポーネントが受け取る必要がある props のタイプを定義できます。デフォルトの小道具を定義して、小道具が指定されなかった場合に値を確実に持つようにすることができます。
import React from 'react';
import PropTypes from 'prop-types';
const Greeting = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};
Greeting.propTypes = {
name: PropTypes.string.isRequired,
};
Greeting.defaultProps = {
name: 'Guest',
};
export default Greeting;
Lifecycle methods are special methods in class components that run at specific points in a component's life.
componentDidMount: Executed after the component is rendered.
componentDidUpdate: Executed after the component's updates are flushed to the DOM.
componentWillUnmount: Executed before the component is removed from the DOM.
class MyComponent extends React.Component {
componentDidMount() {
// Runs after component is mounted
}
componentDidUpdate(prevProps, prevState) {
// Runs after component updates
}
componentWillUnmount() {
// Runs before component is unmounted
}
render() {
return <div>My Component</div>;
}
}
The useEffect hook combines the functionalities of componentDidMount, componentDidUpdate, and componentWillUnmount.
import React, { useState, useEffect } from 'react';
const MyComponent = () => {
const [count, setCount] = useState(0);
useEffect(() => {
// Runs on mount and update
document.title = `You clicked ${count} times`;
// Cleanup function (runs on unmount)
return () => {
console.log('Cleanup');
};
}, [count]); // Dependency array
return (
<div>
<p>You
clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
};
export default MyComponent;
React events are named using camelCase, rather than lowercase. With JSX, you pass a function as the event handler, rather than a string.
const handleClick = () => {
console.log('Button clicked');
};
const MyComponent = () => {
return <button onClick={handleClick}>Click me</button>;
};
React's event system is known as Synthetic Events. It is a cross-browser wrapper around the browser's native event system.
Handling forms in React involves controlling the input elements and managing the state.
import React, { useState } from 'react';
const MyForm = () => {
const [value, setValue] = useState('');
const handleChange = (event) => {
setValue(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
alert('A name was submitted: ' + value);
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" value={value} onChange={handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
};
export default MyForm;
Avoid inline event handlers: Define event handlers outside of the JSX for better readability and performance.
Use Arrow Functions: Use arrow functions to avoid issues with this binding.
Debounce Expensive Operations: Debounce expensive operations like API calls to avoid performance issues.
You can use JavaScript if-else statements inside the render method.
const MyComponent = ({ isLoggedIn }) => {
if (isLoggedIn) {
return <h1>Welcome back!</h1>;
} else {
return <h1>Please sign in.</h1>;
}
};
Ternary operators are a concise way to perform conditional rendering.
const MyComponent = ({ isLoggedIn }) => {
return (
<div>
{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
</div>
);
};
You can use the logical && operator to include elements conditionally.
const MyComponent = ({ isLoggedIn }) => {
return (
<div>
{isLoggedIn && <h1>Welcome back!</h1>}
</div>
);
};
Inline if with logical && operator allows you to conditionally include an element in the output.
const Mailbox = ({ unreadMessages }) => {
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
};
You can build collections of elements and include them in JSX using curly braces {}.
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
const NumberList = () => {
return (
<ul>{listItems}</ul>
);
};
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.
const NumberList = (props) => {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
};
Keys used within arrays should be unique among their siblings.
function Blog(props) {
const sidebar = (
<ul>
{props.posts.map((post) =>
<li key={post.id}>
{post.title}
</li>
)}
</ul>
);
const content = props.posts.map((post) =>
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
return (
<div>
{sidebar}
<hr />
{content}
</div>
);
}
Handling form data in React involves managing the state of the form fields.
import React, { useState } from 'react';
const MyForm = () => {
const [value, setValue] = useState('');
const handleChange = (event) => {
setValue(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
alert('A name was submitted: ' + value);
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" value={value} onChange={handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
};
export default MyForm;
Controlled components are those that are controlled by React state. Uncontrolled components are those that maintain their own internal state.
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
Refs provide a way to access DOM nodes or React elements created in the render method.
class NameForm extends React.Component {
constructor(props) {
super(props);
this.input = React.createRef();
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
Form validation ensures that user inputs are valid.
const MyForm = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [error, setError] = useState('');
const handleSubmit = (event) => {
event.preventDefault();
if (!name || !email) {
setError('Name and Email are required');
} else {
setError('');
// Submit form
}
};
return (
<form onSubmit={handleSubmit}>
{error && <p>{error}</p>}
<label>
Name:
<input type="text" value={name} onChange={(e) => setName(e.target.value)} />
</label>
<label>
Email:
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
</label>
<input type="submit" value="Submit" />
</form>
);
};
export default MyForm;
React Router is a library for routing in React applications. It allows you to handle navigation and rendering of different components based on the URL.
Install React Router:
npm install react-router-dom
Set Up Routes:
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>
);
};
export default App;
You can use route parameters to capture values from the URL.
import React from 'react';
import { BrowserRouter as Router, Route,
Switch, useParams } from 'react-router-dom';
const User = () => {
const { id } = useParams();
return <h2>User ID: {id}</h2>;
};
const App = () => {
return (
<Router>
<Switch>
<Route path="/user/:id" component={User} />
</Switch>
</Router>
);
};
export default App;
Nested routes allow you to render sub-components within a parent component.
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link, useRouteMatch } from 'react-router-dom';
const Topic = ({ match }) => <h3>Requested Topic ID: {match.params.topicId}</h3>;
const Topics = ({ match }) => {
let { path, url } = useRouteMatch();
return (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${url}/components`}>Components</Link>
</li>
<li>
<Link to={`${url}/props-v-state`}>Props v. State</Link>
</li>
</ul>
<Switch>
<Route exact path={path}>
<h3>Please select a topic.</h3>
</Route>
<Route path={`${path}/:topicId`} component={Topic} />
</Switch>
</div>
);
};
const App = () => {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
<hr />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/topics" component={Topics} />
</Switch>
</div>
</Router>
);
};
export default App;
You can use the Redirect component to redirect to a different route programmatically.
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Redirect from="/old-path" to="/new-path" />
</Switch>
</Router>
);
};
export default App;
The Context API provides a way to pass data through the component tree without having to pass props down manually at every level.
To create a context, use React.createContext.
const MyContext = React.createContext();
To consume a context value, use the useContext hook in functional components or Context.Consumer in class components.
const MyComponent = () => {
const value = useContext(MyContext);
return <div>{value}</div>;
};
const MyComponent = () => {
return (
<MyContext.Provider value="Hello">
<AnotherComponent />
</MyContext.Provider>
);
};
const AnotherComponent = () => {
const value = useContext(MyContext);
return <div>{value}</div>;
};
To update context, create a provider component with state.
const MyProvider = ({ children }) => {
const [value, setValue] = useState('Hello');
return (
<MyContext.Provider value={{ value, setValue }}>
{children}
</MyContext.Provider>
);
};
const MyComponent = () => {
const { value, setValue } = useContext(MyContext);
return (
<div>
{value}
<button onClick={() => setValue('Updated Value')}>Update</button>
</div>
);
};
Avoid overusing context: Use context sparingly and only for global data.
Use multiple contexts: Separate concerns by using multiple contexts.
Memoize context values: Use useMemo to avoid unnecessary re-renders.
Hooks are functions that let you use state and other React features in functional components.
useState: Adds state to functional components.
useEffect: Performs side effects in functional components.
useContext: Accesses context values.
useReducer: Manages complex state logic.
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
Count: {state.count}
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</div>
);
}
Custom hooks are functions that encapsulate logic and can be reused across components.
const useFetch = (url) => {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then((response) => response.json())
.then((data) => setData(data));
}, [url]);
return data;
};
const MyComponent = () => {
const data = useFetch('https://api.example.com/data');
return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};
Call hooks at the top level: Do not call hooks inside loops, conditions, or nested functions.
Only call hooks from React functions: Call hooks from functional components or custom hooks.
Higher-Order Components (HOC) are functions that take a component and return a new component.
HOCs are used to add additional functionality to components.
const withLogging = (WrappedComponent) => {
return (props) => {
console.log('Rendering', WrappedComponent.name);
return <WrappedComponent {...props} />;
};
};
const EnhancedComponent = withLogging(MyComponent);
const MyComponent = (props) => {
return <div>My Component</div>;
};
const EnhancedComponent = withLogging(MyComponent);
Do not mutate the original component: Return a new component.
Use display names for debugging: Set displayName on the HOC for better debugging.
Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI.
Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// You can also log the error to an error reporting service
console.log(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
Error boundaries catch errors in the render method and in lifecycle methods.
const MyComponent = () => {
throw new Error('An error occurred');
return <div>My Component</div>;
};
const App = () => {
return (
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>
);
};
Use error boundaries to catch errors in components: Use error boundaries to catch and display errors in UI components.
Log errors for debugging: Log errors to external services for debugging.
Memoization helps to avoid re-rendering components unnecessarily.
import React, { memo } from 'react';
const MyComponent = memo(({ value }) => {
return <div>{value}</div>;
});
Code splitting helps to load only the necessary code and improve performance.
import React, { Suspense, lazy } from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));
const MyComponent = () => {
return (
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
);
};
Lazy loading helps to load components only when they are needed.
import React, { Suspense, lazy } from 'react';
const Other
Component = lazy(() => import('./OtherComponent'));
const MyComponent = () => {
return (
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
);
};
useMemo: Memoizes expensive calculations.
useCallback: Memoizes functions.
const MyComponent = ({ value }) => {
const memoizedValue = useMemo(() => {
return computeExpensiveValue(value);
}, [value]);
const memoizedCallback = useCallback(() => {
doSomething(value);
}, [value]);
return (
<div>
{memoizedValue}
<button onClick={memoizedCallback}>Click me</button>
</div>
);
};
Use React Developer Tools to identify performance bottlenecks.
Jest and React Testing Library are popular tools for testing React components.
Snapshot Testing: Capture the rendered component and compare it with a saved snapshot.
Unit Testing: Test individual components and functions.
Integration Testing: Test the integration between components and services.
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';
test('renders MyComponent', () => {
render(<MyComponent />);
const element = screen.getByText(/My Component/i);
expect(element).toBeInTheDocument();
});
Organize components by feature: Group related components together.
Use descriptive names: Use clear and descriptive names for components and props.
Keep components small: Break down large components into smaller, reusable components.
Lift state up: Lift state to the nearest common ancestor.
グローバル状態にコンテキストを使用する: グローバル状態管理にコンテキスト API を使用します。
CSS モジュールを使用する: 範囲指定されたモジュール形式のスタイルには CSS モジュールを使用します。
スタイル付きコンポーネントを使用する: 動的なスタイル設定にスタイル付きコンポーネントを使用します。
不必要な再レンダリングを回避します: メモ化と React の組み込みパフォーマンス最適化ツールを使用します。
コード分割を使用する: コードを分割して、必要なコンポーネントのみをロードします。
包括的なテストを作成します: アプリケーションのすべての重要な部分のテストを作成します。
スナップショット テストを使用する: スナップショット テストを使用して、意図しない変更を検出します。
React.js は、最新の Web アプリケーションを構築するための強力なライブラリです。その中心となる概念を理解して活用することで、効率的で保守可能でスケーラブルなアプリケーションを構築できます。このチートシートは、React.js をマスターするのに役立つ包括的なガイドとして機能し、基本概念から高度なトピックまですべてをカバーしています。
以上が開発者向けの包括的な React.js チートシートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
