راه‌اندازی سریع یک پروژه مدرن
راه‌اندازی یک پروژه مدرن جاوااسکریپت از ابتدا می‌تواند فرآیند پیچیده‌ای باشد. شما نیاز به تنظیم
یک باندلر ماژول مانند Webpack، یک کامپایلر مانند Babel برای تبدیل سینتکس‌های جدید،
و یک سرور توسعه دارید. خوشبختانه، تیم React یک ابزار فوق‌العاده به نام Create React App
ایجاد کرده است که تمام این پیکربندی‌های پیچیده را به صورت خودکار برای ما انجام می‌دهد.
Create React App یک محیط توسعه کامل و بهینه‌سازی شده برای ساخت اپلیکیشن‌های تک-صفحه‌ای (SPA)
با React فراهم می‌کند. این ابزار به ما اجازه می‌دهد تا بدون هیچ‌گونه پیکربندی، فوراً شروع به
کدنویسی React کنیم.
ایجاد اولین اپلیکیشن React
اکنون که Node.js و npm را نصب کرده‌ایم، می‌توانیم با یک دستور ساده در ترمینال، اولین پروژه
React خود را بسازیم. ترمینال را باز کرده و به پوشه‌ای بروید که می‌خواهید پروژه خود را در آن
ایجاد کنید.
$ npx create-react-app hello-react
بیایید این دستور را تجزیه کنیم:
- npx: یک ابزار خط فرمان است که به همراه npm نصب می‌شود و به شما اجازه می‌دهد تا
پکیج‌های npm را بدون نصب سراسری آنها، اجرا کنید.
- create-react-app: نام پکیجی است که مسئول ساخت پروژه است.
- hello-react: نامی است که ما برای پوشه پروژه خود انتخاب کرده‌ایم.
اجرای این دستور ممکن است چند دقیقه طول بکشد. این ابزار در پس‌زمینه، آخرین نسخه React و سایر
وابستگی‌های لازم را دانلود کرده و یک ساختار پوشه استاندارد با تمام فایل‌های پیکربندی مورد نیاز
ایجاد می‌کند.
اجرای سرور توسعه
پس از اینکه ساخت پروژه با موفقیت به پایان رسید، Create React App دستورالعمل‌هایی را برای شروع
کار به شما نمایش می‌دهد. ابتدا، با دستور `cd` وارد پوشه پروژه جدید خود شوید و سپس سرور توسعه را
اجرا کنید.
$ cd hello-react
$ npm start
دستور npm start سرور توسعه محلی را راه‌اندازی می‌کند. این سرور به صورت خودکار تغییرات در
فایل‌های شما را مشاهده کرده و هر بار که شما یک فایل را ذخیره می‌کنید، مرورگر را به صورت خودکار
رفرش می‌کند (قابلیتی به نام Hot Reloading).
پس از اجرای این دستور، مرورگر شما باید به صورت خودکار باز شده و آدرس http://localhost:3000 را
نمایش دهد. شما صفحه پیش‌فرض خوشامدگویی React را با یک لوگوی چرخان مشاهده خواهید کرد.
نتیجه‌گیری
در این درس، ما با موفقیت و تنها با چند دستور ساده، یک پروژه React کامل و مدرن را راه‌اندازی
کردیم. ابزار Create React App تمام پیچیدگی‌های مربوط به پیکربندی را از ما پنهان کرد و به ما
اجازه داد تا به سرعت وارد مرحله کدنویسی شویم.
اکنون که پروژه ما آماده است، در درس بعدی به «مرور ساختار فایل‌ها و دایرکتوری‌ها» خواهیم پرداخت و
با فایل‌های مهمی که Create React App برای ما ایجاد کرده است، آشنا خواهیم شد تا بفهمیم کد خود
را در کجا باید بنویسیم.