اجرای اولین کامپوننت ساده

مقدمه

در درس‌های گذشته، محیط توسعه خود را آماده کرده و با ساختار یک پروژه React آشنا شدیم. اکنون زمان آن رسیده که اولین قطعه کد React خود را بنویسیم. ما صفحه خوشامدگویی پیش‌فرض Create React App را حذف کرده و آن را با یک کامپوننت ساده "Hello, World!" جایگزین خواهیم کرد. این کار به ما کمک می‌کند تا فرآیند ویرایش یک کامپوننت و مشاهده تغییرات آن در مرورگر را به صورت عملی تجربه کنیم.

ویرایش کامپوننت اصلی (App.js)

همانطور که در درس قبل دیدیم، فایل src/App.js کامپوننت اصلی و ریشه اپلیکیشن ما را تعریف می‌کند. این فایل را در ویرایشگر کد خود باز کنید. محتوای فعلی آن شامل کدهای JSX و CSS برای نمایش لوگوی چرخان React است.

ما قصد داریم تمام محتوای داخل تابع App را پاک کرده و آن را با یک ساختار ساده‌تر جایگزین کنیم. تمام کد داخل فایل src/App.js را حذف کرده و کد زیر را به جای آن قرار دهید:

src/App.js

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

export default App;

بیایید این کد را بررسی کنیم. ما یک کامپوننت تابعی به نام App تعریف کرده‌ایم. این تابع یک قطعه JSX را برمی‌گرداند که بسیار شبیه به HTML است و یک تگ <h1> ساده را نمایش می‌دهد. خط export default App; این کامپوننت را در دسترس سایر فایل‌های پروژه (به ویژه src/index.js که آن را رندر می‌کند) قرار می‌دهد.

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

اگر سرور توسعه شما از درس قبل همچنان در حال اجرا باشد (npm start)، به محض ذخیره کردن تغییرات در فایل App.js، باید ببینید که مرورگر به صورت خودکار رفرش شده و صفحه جدید را نمایش می‌دهد.

به جای لوگوی چرخان، اکنون باید یک تیتر بزرگ با متن "Hello, React World!" را مشاهده کنید. این فرآیند ویرایش و مشاهده زنده تغییرات، هسته اصلی گردش کار توسعه در React است و به ما اجازه می‌دهد تا به سرعت UI خود را ساخته و نتایج را مشاهده کنیم.

همچنین می‌توانید فایل src/App.css را باز کرده و تمام محتوای آن را حذف کنید، زیرا دیگر به استایل‌های پیش‌فرض نیازی نداریم.

در این درس کوتاه اما مهم، ما اولین گام عملی را در دنیای کدنویسی React برداشتیم. با ویرایش کامپوننت App و جایگزینی آن با یک عنصر ساده، فرآیند اصلی توسعه در React را تجربه کردیم: تعریف کامپوننت‌هایی که JSX را برمی‌گردانند.

شما اکنون آماده‌اید تا با JSX، زبان قدرتمندی که React برای توصیف رابط کاربری استفاده می‌کند، بیشتر آشنا شوید. با این درس، فصل «گام‌های ابتدایی با ری‌اکت» به پایان می‌رسد. در فصل بعدی، «مقدمه‌ای بر JSX»، به صورت عمیق به بررسی سینتکس، قوانین و قابلیت‌های JSX خواهیم پرداخت.