React Fetch API 示例

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

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

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await fetch('https://www.technosysa.com/new_announce.php?mode=get_announce&id=17');
      const jsonData = await response.json();
      setData(jsonData);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  return (
    <div className="App">
      <header className="bg-blue-600 p-4">
        <h1 className="text-white text-2xl font-bold">Announcement</h1>
      </header>
      <main className="p-4">
        {data ? (
          <div className="bg-white shadow-lg rounded-lg p-6">
            <h2 className="text-xl font-semibold mb-4">{data.title}</h2>
            <p className="text-gray-700">{data.content}</p>
          </div>
        ) : (
          <p className="text-gray-700">Loading...</p>
        )}
      </main>
      <footer className="bg-gray-800 p-4 mt-8">
        <p className="text-white text-center">© 2025 TechnoSys. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;