開発者向けの包括的な React.js チートシート-jsチュートリアル-php.cn

Comprehensive React.js Cheatsheet for Developers

React.js は、動的で高性能な Web アプリケーションを構築するための現代の Web 開発の基礎となっています。この包括的なチートシートには、実践的な例、コードスニペット、すべての機能の詳細な説明など、React.js をマスターするために知っておくべきすべてが網羅されています。目標は、いつでも参照できる詳細なガイドを提供することです。

1. React の概要

React.js (単に React と呼ばれることも多い) は、ユーザーインターフェイス、特に高速でインタラクティブなユーザーエクスペリエンスが必要な単一ページアプリケーションの構築に使用されるオープンソース JavaScript ライブラリです。 Facebook によって開発された React を使用すると、開発者はデータの変更に応じて効率的に更新およびレンダリングできる大規模な Web アプリケーションを作成できます。

React の中核概念はコンポーネントであり、これは出力をレンダリングする自己完結型モジュールです。コンポーネントはネスト、管理、および個別に処理できるため、開発プロセスが効率的で保守可能になります。

2. React を始める

環境のセットアップ

React を始める前に、開発環境をセットアップする必要があります。その方法は次のとおりです:

Node.js と npm をインストールします: React は依存関係を管理するために Node.js と npm (ノードパッケージマネージャー) に依存します。

公式 Web サイトから Node.js をダウンロードしてインストールします。
以下を実行してインストールを確認します。
```
 node -v
 npm -v
```
ログイン後にコピー

Create React App をインストールします: Create React App は React を学習するための快適な環境であり、React で新しいシングルページアプリケーションを開始するための優れた方法です。
```
npm install -g create-react-app
```
ログイン後にコピー

新しい React アプリの作成

環境がセットアップされたら、新しい React アプリケーションを作成できます。

新しいプロジェクトを作成します:
```
npx create-react-app my-app
cd my-app
npm start
```
ログイン後にコピー

このコマンドは、指定された名前 (my-app) で新しいディレクトリを作成し、新しい React プロジェクトをセットアップして、開発サーバーを起動します。ブラウザを開いて http://localhost:3000 にアクセスすると、新しい React アプリケーションが表示されます。

3. 反応コンポーネント

コンポーネントは、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 フックを使用して副作用を処理します。
シンプルさ: 機能コンポーネントはよりシンプルで冗長ではないため、読みやすく、保守しやすくなっています。

4.JSX

JSX は、JavaScript 内で HTML を直接記述できるようにする構文拡張機能です。 React の「要素」を生成します。

JSX 構文

JSX は HTML のように見えますが、JavaScript に変換されます。

const element = <h1>Hello, world!</h1>;

ログイン後にコピー

式の埋め込み

中括弧で囲むことにより、JSX に任意の JavaScript 式を埋め込むことができます。

const name = 'John';
const element = <h1>Hello, {name}!</h1>;

ログイン後にコピー

JSX 属性

JSX を使用すると、HTML に似た構文で属性を使用できます。

const element = <img src={user.avatarUrl} alt={user.name} />;

ログイン後にコピー

5. 状態と小道具

状態を理解する

State は、コンポーネントに属するプロパティ値を保存する組み込みオブジェクトです。状態オブジェクトが変更されると、コンポーネントが再レンダリングされます。

useStateフックを使用した状態の管理

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;

ログイン後にコピー

6. Component Lifecycle

Lifecycle Methods in Class Components

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>;
  }
}

ログイン後にコピー

Using useEffect Hook

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;

ログイン後にコピー

7. Handling Events

Event Handling in React

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>;
};

ログイン後にコピー

Synthetic Events

React's event system is known as Synthetic Events. It is a cross-browser wrapper around the browser's native event system.

Handling Forms

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;

ログイン後にコピー

Event Handler Best Practices

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.

8. Conditional Rendering

if-else Statements

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

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>
  );
};

ログイン後にコピー

Logical && Operator

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

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>
  );
};

ログイン後にコピー

9. Lists and Keys

Rendering Lists

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>
  );
};

ログイン後にコピー

Using Keys

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 Must Only Be Unique Among Siblings

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>
  );
}

ログイン後にコピー

10. Forms and Controlled Components

Handling Form Data

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 vs Uncontrolled Components

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>
    );
  }
}

ログイン後にコピー

Using Refs for Uncontrolled Components

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

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;

ログイン後にコピー

11. React Router

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.

Setting Up React Router

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;

ログイン後にコピー

Route Parameters

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

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;

ログイン後にコピー

Redirects and Navigation

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;

ログイン後にコピー

12. Context API

The Context API provides a way to pass data through the component tree without having to pass props down manually at every level.

Creating Context

To create a context, use React.createContext.

const MyContext = React.createContext();

ログイン後にコピー

Consuming Context

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>;
};

ログイン後にコピー

Context with Functional Components

const MyComponent = () => {
  return (
    <MyContext.Provider value="Hello">
      <AnotherComponent />
    </MyContext.Provider>
  );
};

const AnotherComponent = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};

ログイン後にコピー

Updating Context

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>
  );
};

ログイン後にコピー

Context Best Practices

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.

13. Hooks

Hooks are functions that let you use state and other React features in functional components.

Basic Hooks (useState, useEffect)

useState: Adds state to functional components.
useEffect: Performs side effects in functional components.

Additional Hooks (useContext, useReducer)

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

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>;
};

ログイン後にコピー

Rules of Hooks

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.

14. Higher-Order Components (HOC)

Higher-Order Components (HOC) are functions that take a component and return a new component.

Understanding HOCs

HOCs are used to add additional functionality to components.

const withLogging = (WrappedComponent) => {
  return (props) => {
    console.log('Rendering', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
};

ログイン後にコピー

Creating HOCs

const EnhancedComponent = withLogging(MyComponent);

ログイン後にコピー

Using HOCs

const MyComponent = (props) => {
  return <div>My Component</div>;
};

const EnhancedComponent = withLogging(MyComponent);

ログイン後にコピー

HOC Best Practices

Do not mutate the original component: Return a new component.
Use display names for debugging: Set displayName on the HOC for better debugging.

15. Error Boundaries

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI.

Implementing Error Boundaries

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; 
  }
}

ログイン後にコピー

Catching Errors

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>
  );
};

ログイン後にコピー

Error Boundaries Best Practices

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.

16. React Performance Optimization

Memoization

Memoization helps to avoid re-rendering components unnecessarily.

import React, { memo } from 'react';

const MyComponent = memo(({ value }) => {
  return <div>{value}</div>;
});

ログイン後にコピー

Code Splitting

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

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 and useCallback

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>
  );
};

ログイン後にコピー

React Developer Tools

Use React Developer Tools to identify performance bottlenecks.

17. Testing in React

Jest and React Testing Library

Jest and React Testing Library are popular tools for testing React components.

Writing Tests

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();
});

ログイン後にコピー

18. React Best Practices

Component Structure

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.

State Management

Lift state up: Lift state to the nearest common ancestor.
グローバル状態にコンテキストを使用する: グローバル状態管理にコンテキスト API を使用します。

スタイリング

CSS モジュールを使用する: 範囲指定されたモジュール形式のスタイルには CSS モジュールを使用します。
スタイル付きコンポーネントを使用する: 動的なスタイル設定にスタイル付きコンポーネントを使用します。

パフォーマンス

不必要な再レンダリングを回避します: メモ化と React の組み込みパフォーマンス最適化ツールを使用します。
コード分割を使用する: コードを分割して、必要なコンポーネントのみをロードします。

テスト

包括的なテストを作成します: アプリケーションのすべての重要な部分のテストを作成します。
スナップショットテストを使用する: スナップショットテストを使用して、意図しない変更を検出します。

結論

React.js は、最新の Web アプリケーションを構築するための強力なライブラリです。その中心となる概念を理解して活用することで、効率的で保守可能でスケーラブルなアプリケーションを構築できます。このチートシートは、React.js をマスターするのに役立つ包括的なガイドとして機能し、基本概念から高度なトピックまですべてをカバーしています。

以上が開発者向けの包括的な React.js チートシートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。