شروع به کار: بهینه‌سازی برنامه React

می‌خواهید سایت React شما تا حد امکان سریع و دردسترس باشد؟ جای درستی آمده‌اید!

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

این راهنما به شما نشان می‌دهد که چگونه با برنامه React شروع به کار کنید. همه راهنماهای دیگر در این بخش موضوعاتی را برای بهینه‌سازی سرعت یا دسترس‌پذیری برنامه React پوشش می‌دهند.

چرا این اطلاعات مفید است؟

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

چه چیزی یاد خواهید گرفت؟

آموزش‌های گام‌به‌گام در این مسیر یادگیری روی موارد زیر تمرکز ندارند:

  • نحوه استفاده از «واکنش»
  • نحوه عملکرد React در پشت صحنه

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

ایجاد کردن «برنامه React»

ایجاد برنامه React (CRA) ساده‌ترین راه برای شروع ساختن برنامه‌های React است. این چارچوب راه‌اندازی پیش‌فرضی را با تعدادی ویژگی اصلی ارائه می‌دهد، ازجمله سیستم ساخت حاوی بسته‌بندی‌کننده ماژول (webpack) و مترجم مبدأ به مبدأ (Babel).

در پوسته خط فرمان، فقط باید دستور زیر را اجرا کنید تا برنامه جدیدی ایجاد شود:

npx create-react-app app-name

وقتی اجرای فرمان تمام شد، می‌توانید با فرمان‌های زیر به برنامه بروید و آن را اجرا کنید:

cd new-app
npm start

جاسازی زیر ساختار دایرکتوری و صفحه وب واقعی یک برنامه CRA را که به‌تازگی راه‌اندازی شده است نشان می‌دهد.

فایل‌های پیکربندی و اسکریپت‌های ساخت متعددی وجود دارد که CRA برای راه‌اندازی فرایند ساخت webpack و Babel استفاده می‌کند که شامل راه‌اندازی پایه Jest برای آزمایش است. برای ساده‌تر کردن کارها برای کاربر، این فایل‌ها پنهان هستند و تا زمانی که از CRA خارج نشوید، نمی‌توان به آن‌ها دسترسی داشت. همیشه بهتر است تا حد امکان از خارج کردن اجتناب کنید، زیرا این کار به معنای پذیرفتن تمام این فایل‌های پیکربندی به‌عنوان کد منبع خودتان است که مدیریت آن می‌تواند دشوار شود.

ساختار فهرست راهنمای برنامه CRA جدید فقط حاوی فایل‌هایی است که واقعاً برای کار کردن روی برنامه‌تان باید اصلاح کنید. اسناد CRA این موضوع را با جزئیات توضیح می‌دهد.

حالا چه می‌شود؟

اکنون که می‌دانید چگونه ساختن Create React App را شروع کنید، با همه راهنماهای موجود در این مسیر یادگیری، با نحوه بهبود عملکرد و دسترس‌پذیری برنامه‌تان آشنا شوید: