شروع کنید: برنامه React خود را بهینه کنید

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

حسین جرده

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

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

چرا این مفید است؟

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

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

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

  • نحوه استفاده از React
  • نحوه عملکرد React در زیر کاپوت

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

ایجاد React App

Create React App (CRA) ساده ترین راه برای شروع ساخت برنامه های React است. این یک راه‌اندازی پیش‌فرض با تعدادی از ویژگی‌های اصلی، از جمله یک سیستم ساخت شامل یک بسته‌بندی ماژول (پک وب) و یک ترانسپایلر (بابل) فراهم می‌کند.

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

npx create-react-app app-name

پس از اتمام اجرای دستور، می توانید با دستورات زیر به برنامه بروید و آن را اجرا کنید:

cd new-app
npm start

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

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

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

بعدش چی؟

اکنون که می دانید چگونه شروع به ساخت یک برنامه Create React کنید، بیاموزید که چگونه عملکرد و دسترسی برنامه خود را با همه راهنماهای این مسیر یادگیری بهبود دهید: