Project_HelloReact.jsx

/**
 * Project: Hello React — 個人歡迎頁面
 *
 * 學習重點：
 * - React 元件的基本結構
 * - JSX 中嵌入 JavaScript 表達式
 * - 行內樣式物件
 *
 * 使用方式：將此檔案內容複製到你的 App.jsx 中
 */

function App() {
  const studentName = 'Nelson';
  const currentDate = new Date().toLocaleDateString('zh-TW', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long',
  });
  const currentTime = new Date().toLocaleTimeString('zh-TW');
  const reactVersion = '18';
  const learningGoals = [
    'JSX 語法',
    '元件基礎',
    'Props & State',
    'Hooks',
    'React Router',
  ];

  const containerStyle = {
    minHeight: '100vh',
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontFamily: "'Segoe UI', 'Noto Sans TC', sans-serif",
    padding: '20px',
  };

  const cardStyle = {
    backgroundColor: 'rgba(255, 255, 255, 0.95)',
    borderRadius: '20px',
    padding: '48px',
    maxWidth: '550px',
    width: '100%',
    boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
    textAlign: 'center',
  };

  const avatarStyle = {
    width: '100px',
    height: '100px',
    borderRadius: '50%',
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    color: 'white',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '2.5rem',
    fontWeight: 'bold',
    margin: '0 auto 24px',
    boxShadow: '0 4px 15px rgba(102, 126, 234, 0.4)',
  };

  const tagStyle = {
    display: 'inline-block',
    padding: '6px 14px',
    margin: '4px',
    borderRadius: '20px',
    backgroundColor: '#eef2ff',
    color: '#4338ca',
    fontSize: '0.85rem',
    fontWeight: '500',
  };

  return (
    <div style={containerStyle}>
      <div style={cardStyle}>
        <div style={avatarStyle}>{studentName.charAt(0)}</div>

        <h1 style={{ color: '#1e1b4b', marginBottom: '8px', fontSize: '2rem' }}>
          Hello, {studentName}!
        </h1>

        <p style={{ color: '#6b7280', marginTop: '0', fontSize: '1.1rem' }}>
          歡迎來到 React {reactVersion} 的世界
        </p>

        <div
          style={{
            backgroundColor: '#f8fafc',
            borderRadius: '12px',
            padding: '16px',
            margin: '24px 0',
          }}
        >
          <p style={{ margin: '4px 0', color: '#475569' }}>
            📅 {currentDate}
          </p>
          <p style={{ margin: '4px 0', color: '#475569' }}>
            🕐 {currentTime}
          </p>
          <p style={{ margin: '4px 0', color: '#475569' }}>
            🧮 2 + 3 = {2 + 3}
          </p>
        </div>

        <h3 style={{ color: '#374151', marginBottom: '12px' }}>
          學習目標
        </h3>
        <div>
          {learningGoals.map((goal, index) => (
            <span key={index} style={tagStyle}>
              {goal}
            </span>
          ))}
        </div>

        <p
          style={{
            marginTop: '24px',
            color: '#9ca3af',
            fontSize: '0.85rem',
          }}
        >
          這是你的第一個 React 應用程式 🎉
        </p>
      </div>
    </div>
  );
}

export default App;