究極の React.js チートシート: React.js を簡単にマスター⚛️

導入

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 の仮想 DOM は実際の DOM の軽量コピーであり、効率的な更新とレンダリングが可能になり、アプリケーションのパフォーマンスが向上します。

2. 必須のツールとライブラリ

Babel: JSX を含む最新の JavaScript コードを作成し、それをブラウザー互換バージョンに変換できる JavaScript コンパイラー。

// 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 フックを使用すると、機能コンポーネント内で状態メソッドとライフサイクル メソッドを管理でき、機能コンポーネントがより強力になります。

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 は、親コンポーネントから子コンポーネントにデータを渡す方法であり、子コンポーネントの動作と外観を制御できるようになります。小道具を使用すると、コンポーネントが再利用可能で保守可能になります。

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Usage
<Greeting name="Sara" />

6. React でのスタイル設定

インライン スタイル: JavaScript オブジェクトを使用して、コンポーネント内でスタイルを直接定義します。インライン スタイルは、コンポーネントの状態またはプロパティに基づいて動的に調整できます。

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. 条件付きレンダリング

条件付きレンダリングを使用すると、コンポーネントは特定の条件に基づいてさまざまな出力をレンダリングできます。 if-else や JSX 内の三項演算子などの JavaScript の条件文を利用して、コンテンツを動的にレンダリングします。

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 中国語 Web サイトの他の関連記事を参照してください。