2分で理解するReact：コンポーネント、フック、ベストプラクティス！

1// シンプルな関数コンポーネント
2const Welcome = ({ name }) => {
3  return <h1>こんにちは、{name}さん！👋</h1>;
4};
5
6// プロップスとchildrenを持つコンポーネント
7const Card = ({ title, children }) => {
8  return (
9    <div className="card">
10      <h2>{title}</h2>
11      <div className="card-content">{children}</div>
12    </div>
13  );
14};
15
16// 使用例
17const App = () => {
18  return (
19    <Card title="最初のカード">
20      <Welcome name="開発者" />
21      <p>Reactの世界へようこそ！</p>
22    </Card>
23  );
24};

1import { useState } from 'react';
2
3const Counter = () => {
4  const [count, setCount] = useState(0);
5  const [isActive, setIsActive] = useState(false);
6
7  const handleIncrement = () => {
8    setCount((prevCount) => prevCount + 1);
9    setIsActive(true);
10  };
11
12  return (
13    <div className="counter">
14      <p>カウンター: {count}</p>
15      <p>状態: {isActive ? 'アクティブ' : '非アクティブ'}</p>
16      <button onClick={handleIncrement} className={isActive ? 'active' : ''}>
17        増加
18      </button>
19    </div>
20  );
21};