【図解解説】これ1本12分でReactのコンセプト全20種を理解できる教科書 #React – Qiita

let total = 0;

function addToTotal(value) {
  total += value;
  return total;
}

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  React.StrictMode>
    App />
  React.StrictMode>,
  document.getElementById('root')
);

import React, { useState, useEffect } from 'react';

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

  // データ取得の副作用
  useEffect(() => {
    setLoading(true);
    
    fetch(`https://api.example.com/users/${userId}`)
      .then(response => response.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      })
      .catch(error => {
        console.error('Error fetching user:', error);
        setLoading(false);
      });
  }, [userId]); // userIdが変わったときだけ実行

  if (loading) return div>Loading...div>;
  if (!user) return div>User not founddiv>;

  return (
    div>
      h1>{user.name}h1>
      p>Email: {user.email}p>
    div>
  );
}

import { createPortal } from 'react-dom';

function Modal({ children }) {
  const modalRoot = document.getElementById('modal-root');
  
  // createPortal(レンダリングする内容, 実際にレンダリングされるDOM要素)
  return createPortal(
    div className="modal">
      {children}
    div>,
    modalRoot
  );
}

 id="root">
 id="modal-root"> 

import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
import { Suspense } from 'react';

const queryClient = new QueryClient();

function UserData({ userId }) {
  const { data } = useQuery(
    ['user', userId], 
    () => fetchUser(userId),
    { suspense: true }
  );

  return div>ユーザー名: {data.name}div>;
}

function App() {
  return (
    QueryClientProvider client={queryClient}>
      h1>ユーザープロフィールh1>
      
      Suspense fallback={div>ユーザーデータを読み込み中...div>}>
        UserData userId={1} />
      Suspense>
    QueryClientProvider>
  );
}

const ProfileTab = lazy(() => {
  return new Promise(resolve => {
    setTimeout(() => resolve(import('./ProfileTab')), 1500);
  });
});

const SettingsTab = lazy(() => {
  return new Promise(resolve => {
    setTimeout(() => resolve(import('./SettingsTab')), 1500);
  });
});

function App() {
  const [activeTab, setActiveTab] = useState('home');
  const [isPending, startTransition] = useTransition();

  function handleTabChange(tab) {
    startTransition(() => {
      setActiveTab(tab);
    });
  }

  return (
    div className="app">
      div className="tabs">
        button 
          onClick={() => handleTabChange('home')}
          className={activeTab === 'home' ? 'active' : ''}
        >
          ホーム
        button>
        button 
          onClick={() => handleTabChange('profile')}
          className={activeTab === 'profile' ? 'active' : ''}
        >
          プロフィール
        button>
        button 
          onClick={() => handleTabChange('settings')}
          className={activeTab === 'settings' ? 'active' : ''}
        >
          設定
        button>
      div>

      {isPending && div className="loading-indicator">切り替え中...div>}
      
      div className="tab-content">
        Suspense fallback={div className="loading">コンテンツ読み込み中...div>}>
          {activeTab === 'home' && div>ホームコンテンツdiv>}
          {activeTab === 'profile' && ProfileTab />}
          {activeTab === 'settings' && SettingsTab />}
        Suspense>
      div>
    div>
  );
}

export default App;

  function handleTabChange(tab) {
    startTransition(() => {
      setActiveTab(tab);
    });
  }

  const [isPending, startTransition] = useTransition();

  (省略)

      {isPending && div className="loading-indicator">切り替え中...div>}

const ProfileTab = lazy(() => {
  return new Promise(resolve => {
    setTimeout(() => resolve(import('./ProfileTab')), 1500);
  });
});

(省略)

        Suspense fallback={div className="loading">コンテンツ読み込み中.../div>}>

import { ErrorBoundary } from 'react-error-boundary';

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    div role="alert">
      p>エラーが発生しました:p>
      pre>{error.message}pre>
      button onClick={resetErrorBoundary}>再試行button>
    div>
  );
}

function MyComponent() {
  return (
    ErrorBoundary
      FallbackComponent={ErrorFallback}
      onReset={() => {
        // リセット時に追加で行いたい処理
      }}
      resetKeys={[/* 変更時にエラー状態をリセットする依存配列 */]}
    >
      ComponentThatMightError />
    ErrorBoundary>
  );
}

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    div role="alert">
      p>エラーが発生しました:p>
      pre>{error.message}pre>
      button onClick={resetErrorBoundary}>再試行button>
    div>
  );
}

div onClick={handleDivClick}> {/* 3. 最後にここへ */}
  button onClick={handleButtonClick}> {/* 2. 次にここへ */
    span onClick={handleSpanClick}>クリックspan> {/* 1. ここで最初にクリックが発生 */}
  /button>
div>