これだけで十分！Reactの基本機能でできること一覧

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

   function App() {
     return (
       <div>
         <h1>タイトル</h1>
         <p>本文</p>
       </div>
     );
   }

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

   <div className="container">内容</div>

   <img src="logo.png" alt="Logo" />

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

const element = React.createElement('h1', null, 'Hello, World!');

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

   class Welcome extends React.Component {
     render() {
       return <h1>Hello, {this.props.name}!</h1>;
     }
   }

   function App() {
     return (
       <div>
         <Welcome name="React" />
       </div>
     );
   }

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

   function Header() {
     return <h1>アプリケーションのヘッダー</h1>;
   }

   function Footer() {
     return <footer>© 2024 MyApp</footer>;
   }

   function App() {
     return (
       <div>
         <Header />
         <p>メインコンテンツ</p>
         <Footer />
       </div>
     );
   }

function Button(props) {
  return <button style={{ backgroundColor: props.color }}>{props.label}</button>;
}

function App() {
  return (
    <div>
      <Button color="blue" label="送信" />
      <Button color="red" label="削除" />
    </div>
  );
}

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

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

   function Component(props) {
     props.value = "新しい値"; // エラー
   }

function Product(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>価格: {props.price}円</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <Product name="リンゴ" price="100" />
      <Product name="バナナ" price="150" />
    </div>
  );
}

function Button(props) {
  return <button>{props.label}</button>;
}

Button.defaultProps = {
  label: "クリック",
};

function App() {
  return <Button />;
}

import PropTypes from "prop-types";

function Button(props) {
  return <button>{props.label}</button>;
}

Button.propTypes = {
  label: PropTypes.string.isRequired,
};

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // 初期値を0に設定

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>カウントを増やす</button>
      <button onClick={() => setCount(count - 1)}>カウントを減らす</button>
    </div>
  );
}

export default Counter;

   // 正しい方法
   setCount(count + 1);

   // 誤った方法
   count = count + 1; // エラーの原因

   setCount(count + 1);
   setCount(count + 1); // countは1回しか増加しない可能性

const [name, setName] = useState("ゲスト");

const [value, setValue] = useState(() => {
  return Math.random();
});

function Form() {
  const [text, setText] = useState("");

  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>入力した内容: {text}</p>
    </div>
  );
}

function App() {
  const handleClick = () => {
    alert("ボタンがクリックされました！");
  };

  return (
    <button onClick={handleClick}>クリック</button>
  );
}

function App() {
  const handleClick = (event) => {
    console.log("クリックした要素:", event.target);
  };

  return (
    <button onClick={handleClick}>クリック</button>
  );
}

   <button onClick={() => console.log("クリックされました！")}>クリック</button>

   function App() {
     const handleChange = (event) => {
       console.log("入力された値:", event.target.value);
     };

     return <input type="text" onChange={handleChange} />;
   }

   function App() {
     const handleSubmit = (event) => {
       event.preventDefault(); // ページリロードを防止
       console.log("フォームが送信されました！");
     };

     return (
       <form onSubmit={handleSubmit}>
         <button type="submit">送信</button>
       </form>
     );
   }

   <div onMouseEnter={() => console.log("マウスが乗りました！")}>
     ホバーしてください
   </div>

class App extends React.Component {
  handleClick() {
    console.log(this); // デフォルトでは undefined
  }

  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>クリック</button>
    );
  }
}

function App() {
  const handleClick = (message) => {
    alert(message);
  };

  return (
    <button onClick={() => handleClick("こんにちは！")}>クリック</button>
  );
}

  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log("コンポーネントがマウントされました");
  }

  shouldComponentUpdate(nextProps, nextState) {
    return nextState.count !== this.state.count;
  }

  componentDidUpdate(prevProps, prevState) {
    console.log("コンポーネントが更新されました");
  }

  componentWillUnmount() {
    console.log("コンポーネントがアンマウントされました");
  }

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

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

  useEffect(() => {
    console.log("マウントまたは更新されました");
  }, [count]);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増加</button>
    </div>
  );
}

useEffect(() => {
  console.log("マウントされました");

  return () => {
    console.log("アンマウントされました");
  };
}, []);

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

  useEffect(() => {
    let isMounted = true;

    fetch("https://api.example.com/data")
      .then((response) => response.json())
      .then((result) => {
        if (isMounted) {
          setData(result);
        }
      });

    return () => {
      isMounted = false; // クリーンアップ処理
    };
  }, []);

  return <div>{data ? JSON.stringify(data) : "データを読み込み中…"}</div>;
}

import React, { useState } from "react";

function TodoApp() {
  return (
    <div>
      <h1>Todoアプリ</h1>
      <TodoForm />
      <TodoList />
    </div>
  );
}

export default TodoApp;

function TodoForm({ addTask }) {
  const [task, setTask] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (task.trim()) {
      addTask(task);
      setTask(""); // 入力欄をリセット
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={task}
        onChange={(e) => setTask(e.target.value)}
        placeholder="タスクを入力"
      />
      <button type="submit">追加</button>
    </form>
  );
}

function TodoList({ tasks, removeTask }) {
  return (
    <ul>
      {tasks.map((task, index) => (
        <li key={index}>
          {task}{" "}
          <button onClick={() => removeTask(index)}>削除</button>
        </li>
      ))}
    </ul>
  );
}

function TodoApp() {
  const [tasks, setTasks] = useState([]);

  const addTask = (task) => {
    setTasks([...tasks, task]);
  };

  const removeTask = (index) => {
    setTasks(tasks.filter((_, i) => i !== index));
  };

  return (
    <div>
      <h1>Todoアプリ</h1>
      <TodoForm addTask={addTask} />
      <TodoList tasks={tasks} removeTask={removeTask} />
    </div>
  );
}

export default TodoApp;

import React, { useState } from "react";

function TodoApp() {
  const [tasks, setTasks] = useState([]);

  const addTask = (task) => {
    setTasks([...tasks, task]);
  };

  const removeTask = (index) => {
    setTasks(tasks.filter((_, i) => i !== index));
  };

  return (
    <div>
      <h1>Todoアプリ</h1>
      <TodoForm addTask={addTask} />
      <TodoList tasks={tasks} removeTask={removeTask} />
    </div>
  );
}

function TodoForm({ addTask }) {
  const [task, setTask] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (task.trim()) {
      addTask(task);
      setTask("");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={task}
        onChange={(e) => setTask(e.target.value)}
        placeholder="タスクを入力"
      />
      <button type="submit">追加</button>
    </form>
  );
}

function TodoList({ tasks, removeTask }) {
  return (
    <ul>
      {tasks.map((task, index) => (
        <li key={index}>
          {task} <button onClick={() => removeTask(index)}>削除</button>
        </li>
      ))}
    </ul>
  );
}

export default TodoApp;

function CartItem({ item, updateQuantity }) {
  return (
    <div>
      <h3>{item.name}</h3>
      <p>価格: {item.price}円</p>
      <button onClick={() => updateQuantity(item.id, -1)}>-</button>
      {item.quantity}
      <button onClick={() => updateQuantity(item.id, 1)}>+</button>
    </div>
  );
}

function ChatApp() {
  const [messages, setMessages] = useState([]);

  const addMessage = (message) => {
    setMessages([...messages, message]);
  };

  return (
    <div>
      <MessageInput addMessage={addMessage} />
      <MessageList messages={messages} />
    </div>
  );
}

function Timer() {
  const [time, setTime] = useState(0);
  const [running, setRunning] = useState(false);

  useEffect(() => {
    if (running) {
      const interval = setInterval(() => setTime((t) => t + 1), 1000);
      return () => clearInterval(interval);
    }
  }, [running]);

  return (
    <div>
      <p>経過時間: {time}秒</p>
      <button onClick={() => setRunning(true)}>スタート</button>
      <button onClick={() => setRunning(false)}>ストップ</button>
      <button onClick={() => setTime(0)}>リセット</button>
    </div>
  );
}

function WeatherApp() {
  const [city, setCity] = useState("");
  const [weather, setWeather] = useState(null);

  const fetchWeather = () => {
    fetch(`https://api.example.com/weather?city=${city}`)
      .then((res) => res.json())
      .then((data) => setWeather(data));
  };

  return (
    <div>
      <input
        type="text"
        value={city}
        onChange={(e) => setCity(e.target.value)}
        placeholder="都市名を入力"
      />
      <button onClick={fetchWeather}>天気を取得</button>
      {weather && <p>気温: {weather.temp}°C</p>}
    </div>
  );
}