React
エンジニアのためのWebチートシート

Reactは、Facebookとそのコミュニティによって開発されているユーザインタフェースを構築するためのJavaScriptライブラリです。React.jsまたはReactJSの名称としても知られています

インストール

React導入（npm）

```
npm install react react-dom
```

React導入（yarn）

```
yarn add react react-dom
```

React導入（CDN）

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

Viteでプロジェクト作成

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Next.jsでプロジェクト作成

npx create-next-app@latest my-app
cd my-app
npm run dev

コンポーネント

関数コンポーネント

function（関数）としてコンポーネントを定義します。
```
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>
}
```

アロー関数コンポーネント

アロー関数を使用してコンポーネントを定義することもできます。
```
const Welcome = ({ name }) => {
  return <h1>Hello, {name}!</h1>
}
```

入れ子（ネスト）構造

定義したReactコンポーネントを入れ子にすることができます。

function ChildComponent() {
  return <div>ChildComponent!</div>
}

function ParentComponent() {
  return (
    <div>
      <div>ParentComponent!</div>
      <ChildComponent />
    </div>
  )
}

レンダリング（React 18）

createRoot()を使用してコンポーネントをDOMにレンダリングします。

import { createRoot } from 'react-dom/client'

const root = createRoot(document.getElementById('root'))
root.render(<App />)

JSX

条件付きレンダリング

&&演算子や三項演算子を使って条件付きでレンダリングできます。

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {/* && */}
      {isLoggedIn && <p>Welcome back!</p>}

      {/* ternary operator */}
      {isLoggedIn ? <LogoutButton /> : <LoginButton />}
    </div>
  )
}

リストのレンダリング

map()を使用してリストをレンダリングします。各要素には一意のkeyが必要です。

function TodoList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  )
}

フラグメント

余分なDOMノードを追加せずに複数の要素をグループ化できます。

function App() {
  return (
    <>
      <Header />
      <Main />
      <Footer />
    </>
  )
}

Props

Propsの基本

親コンポーネントから子コンポーネントにデータを渡すことができます。

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

function App() {
  return <Greeting name="React" />
}

分割代入パターン

引数で直接propsを分割代入することで、よりシンプルに記述できます。

function UserCard({ name, age, email }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Email: {email}</p>
    </div>
  )
}

children

childrenを使用するとコンポーネントの子要素を受け取ることができます。

function Layout({ children }) {
  return (
    <div>
      <header>Header</header>
      <main>{children}</main>
      <footer>Footer</footer>
    </div>
  )
}

function App() {
  return (
    <Layout>
      <p>Main content here!</p>
    </Layout>
  )
}

イベント

onClick（クリックイベント）

クリックイベントを処理します。

function Button() {
  const handleClick = () => {
    alert('Button clicked!')
  }

  return (
    <button onClick={handleClick}>
      Click me!
    </button>
  )
}

onChange（フォーム入力）

フォーム入力の値をstateで管理します。

import { useState } from 'react'

function TextInput() {
  const [value, setValue] = useState('')

  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  )
}

onSubmit（フォーム送信）

フォームの送信を処理します。

import { useState } from 'react'

function Form() {
  const [name, setName] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log('Submitted:', name)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  )
}

状態管理 - useState

useStateの基本

useState Hookを使用してコンポーネントの状態を管理します。

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  )
}

オブジェクトの状態更新

オブジェクトをstateで管理する場合は、スプレッド構文で新しいオブジェクトを作成します。

import { useState } from 'react'

function UserForm() {
  const [user, setUser] = useState({ name: '', email: '' })

  const updateName = (name) => {
    setUser({ ...user, name })
  }

  return (
    <input
      value={user.name}
      onChange={(e) => updateName(e.target.value)}
    />
  )
}

複数のstate

複数のuseStateを使用して複数の状態を管理できます。

import { useState } from 'react'

function Form() {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [age, setAge] = useState(0)

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <input type="number" value={age} onChange={(e) => setAge(Number(e.target.value))} />
    </div>
  )
}

副作用 - useEffect

マウント時の処理

空の依存配列を渡すと、コンポーネントのマウント時に一度だけ実行されます。

import { useState, useEffect } from 'react'

function App() {
  const [data, setData] = useState(null)

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData)
  }, [])

  return <div>{data ? data.message : 'Loading...'}</div>
}

依存配列

依存配列に値を指定すると、その値が変更されるたびに実行されます。

import { useState, useEffect } from 'react'

function UserProfile({ userId }) {
  const [user, setUser] = useState(null)

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(setUser)
  }, [userId])

  return user ? <div>{user.name}</div> : <div>Loading...</div>
}

クリーンアップ関数

関数を返すとアンマウント時や再実行前にクリーンアップ処理を行えます。

import { useState, useEffect } from 'react'

function Timer() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1)
    }, 1000)

    return () => clearInterval(id)
  }, [])

  return <div>Count: {count}</div>
}

Hooks一覧

Reactで使用できる主なHooksの一覧です。

Hook	用途
`useState`	状態管理
`useEffect`	副作用（データ取得、購読など）
`useContext`	Contextの値を取得
`useReducer`	複雑な状態ロジック
`useCallback`	コールバック関数のメモ化
`useMemo`	計算結果のメモ化
`useRef`	可変参照（DOMアクセスなど）
`useId`	一意のID生成（React 18+）
`useTransition`	UI遷移の優先度管理（React 18+）

Context API

Context APIの使用

Context APIを使用してコンポーネントツリー全体にデータを共有できます。

import { createContext, useContext, useState } from 'react'

// Create Context
const ThemeContext = createContext('light')

// Provider component
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light')

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  )
}

// Consumer component
function ThemedButton() {
  const { theme, setTheme } = useContext(ThemeContext)

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Current theme: {theme}
    </button>
  )
}

// Usage
function App() {
  return (
    <ThemeProvider>
      <ThemedButton />
    </ThemeProvider>
  )
}

パフォーマンス最適化

React.memo

コンポーネントをメモ化して、propsが変わらない場合の再レンダリングを防ぎます。

import { memo } from 'react'

const ExpensiveComponent = memo(function ExpensiveComponent({ data }) {
  return <div>{data}</div>
})

// Only re-renders when props change

useMemo

計算コストの高い値をメモ化します。

import { useMemo } from 'react'

function FilteredList({ items, filter }) {
  const filteredItems = useMemo(() => {
    return items.filter(item => item.includes(filter))
  }, [items, filter])

  return (
    <ul>
      {filteredItems.map(item => <li key={item}>{item}</li>)}
    </ul>
  )
}

useCallback

コールバック関数をメモ化して、子コンポーネントへの不要な再レンダリングを防ぎます。

import { useCallback, memo } from 'react'

const Button = memo(function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>
})

function Parent() {
  const handleClick = useCallback(() => {
    console.log('clicked')
  }, [])

  return <Button onClick={handleClick}>Click me</Button>
}

Suspense

Code Splitting（lazy）

lazy()とSuspenseを使用してコンポーネントを遅延ロードできます。

import { lazy, Suspense } from 'react'

const HeavyComponent = lazy(() => import('./HeavyComponent'))

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  )
}

useTransition

useTransitionを使用して、UIの応答性を維持しながら状態を更新できます。

import { useState, useTransition } from 'react'

function SearchResults() {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState([])
  const [isPending, startTransition] = useTransition()

  const handleChange = (e) => {
    setQuery(e.target.value)

    startTransition(() => {
      // Heavy search operation
      setResults(searchItems(e.target.value))
    })
  }

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending ? <div>Searching...</div> : <ResultList results={results} />}
    </div>
  )
}

引用・参考リンク

Related Cheatsheets

jQuery -> Vanilla JSの変換-Vanilla JSとは純粋なJavaScriptのことです。Pure JSと呼ばれたりもします。jQueryなどのライブラリありきでJavaScriptを考える風潮に皮肉を込めてVanilla JSと呼ばれています。 React.jsやVue.jsが台頭してくる中でjQueryに依存しない純粋なJavaScriptの書き方を覚えるために、jQuery -> Vanilla JSの対応関係をチートシートにまとめてみました。

Related Goods

Next.jsをゼロから学べます！今やNext.jsはWeb開発のデファクトスタンダードとなりました。
詳細をみる
「今の時代に一つだけ言語を学ぶなら？」私は自信を持ってTypeScriptと答えます。TypeScriptを体系的に学ぶのにおすすめの一冊です。
詳細をみる
Reactにまだ自信のない方はまずはここから！最終章ではNext.jsについても簡単に触れられており、橋渡しのされた一冊です。
詳細をみる

WebTerm - Recommended tools

WebTermは、ブラウザでLinuxコマンド・Gitコマンドを安全に実行でき、チュートリアル式で学べるターミナルサンドボックスです。
AIコーディングツールの普及に伴い、CLIの基礎知識を身につける重要性は増しています。実際のターミナルを操作するのに抵抗がある方でも、WebTermはローカル環境を壊す心配がありません。「会員登録不要・無料」で利用でき、学習環境として最適です。

WebTerm

Browser Terminal Sandbox for Learning CLI

開く

All Cheatsheets

エンジニア・プログラマー向けの便利なチートシートを多数まとめています(SP/Tablet/PC対応)

すべてのチートシートを見る

ReactエンジニアのためのWebチートシート