اولین اپ (First App)

در این صفحه اولین اپ ری اکت خودت را می سازی. دقیقا همان پروژه Vite قبلی را برمی داریم و فقط یک فایل را عوض می کنیم تا متن ساده Hello World نشان بدهد. این ساده ترین تمرین برای درک ساختار یک کامپوننت React است.

ساختار پیش فرض App.jsx در اولین اپ ری اکت

داخل پوشه my-react-app یک پوشه src می بینی. در این پوشه فایلی به نام App.jsx وجود دارد. این فایل قلب رابط کاربری فعلی پروژه است. یعنی همان صفحه ای که بعد از npm run dev در مرورگر دیدی.

محتوای پیش فرض این فایل در پروژه Vite شبیه کد زیر است. این کد از قلاب useState برای شمارش کلیک استفاده می کند. قلاب یا Hook تابعی در React است که قابلیت اضافه می کند؛ مثلا مدیریت حالت (State).

import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';

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

  function handleClick() {
    setCount(function(prevCount) {
      return prevCount + 1;
    });
  }

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={handleClick}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App;

مشاهده در ادیتور

در این کد، App یک کامپوننت React است. useState یک حالت به نام count می سازد. تابع handleClick مقدار count را یکی زیاد می کند. دکمه روی صفحه این تابع را اجرا می کند. باقی بخش ها فقط لوگوها و متن های راهنما هستند.

جایگزینی App.jsx برای ساخت اولین اپ ری اکت

حالا می خواهیم همه چیز را ساده کنیم. قرار است به جای صفحه شلوغ، فقط یک متن Hello World ببینیم. برای این کار، کل محتوای فایل App.jsx را پاک می کنی و با کد زیر جایگزین می کنی.

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}

export default App;

مشاهده در ادیتور

در این نسخه ساده، دیگر خبری از useState نیست. فقط یک کامپوننت ساده داریم که یک div و یک h1 نمایش می دهد. همین کد برای شروع فهم JSX کافی است. JSX همان سینتکس مخصوص React برای نوشتن تگ ها داخل جاوااسکریپت است.

به روزرسانی خودکار با HMR در اولین اپ ری اکت

وقتی کد را جایگزین کردی و فایل را ذخیره کردی چه می شود؟ مرورگر خودش بدون رفرش دستی صفحه را به روز می کند. این ویژگی را HMR یا Hot Module Replacement می گویند. یعنی تغییر کد بلافاصله روی صفحه دیده می شود.

در پروژه Vite این ویژگی از قبل فعال است. پس فقط کافی است فایل را ذخیره کنی. اگر تغییری ندیدی، خطاهای ترمینال یا کنسول مرورگر را چک کن. معمولا مشکل از یک اشتباه تایپی کوچک در JSX است.

گام به گام ساخت اولین اپ ری اکت

1. پروژه my-react-app را در ادیتور کد باز کن.
2. به پوشه src برو و فایل App.jsx را باز کن.
3. کل محتوای فایل را حذف و با کد Hello World جایگزین کن.
4. فایل را ذخیره کن و مرورگر را نگاه کن.
5. اگر سرور dev خاموش است، دوباره npm run dev را اجرا کن.

نکته: اگر مرورگر صفحه دیگری نشان می دهد، آدرس را چک کن. باید روی http://localhost:5173 باشی؛ همان آدرسی که Vite در ترمینال نوشته است.

بعد از اولین اپ، کجا بروی؟

حالا که اولین اپ ری اکت را ساختی، وقت عمیق تر شدن است. می توانی دوباره به صفحه شروع کار ری اکت سر بزنی و دستورها را مرور کنی. سپس در مرحله بعدی، صفحه رندر در React را بخوان تا بفهمی React دقیقا چطور JSX را روی صفحه نشان می دهد.

جمع بندی سریع

• فایل اصلی رابط کاربری در پروژه Vite همان App.jsx است.
• با جایگزینی کد، اولین اپ ری اکت را ساختی.
• ویژگی HMR تغییرات را بدون رفرش نشان می دهد.
• این تمرین پایه خوبی برای فهم JSX و کامپوننت است.
• قدم بعدی، یادگیری رندر و ساخت اپ های بزرگ تر است.