شروع کار با React و ایجاد یک پروژه جدید [بخش اول]

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

نقش Node.js در React به صورت یک سرور و بستر برای نصب و اجرای پکیجی‌های وابسته و مورد نیاز می‌باشد. با نصب Node.js یک امکان دیگر هم روی سیستم شما نصب می‌شود که معروف به NPM (Node Package Manager) می‌باشد که ما می‌توانیم به کمک NPM براحتی پکیج‌های سمت Front خود را نصب کنیم و نیاز به دانلود دستی و افزودن به پروژه را نداریم. مثلا با یک دستور ساده مانند NPM I Bootstrap شما می‌توانید در مسیر جاری، Bootstrap را به صورت دانلود شده داشته باشید.
پس NPM یا Node Package Manager یک مدیریت کننده پکیج‌ها می‌باشد که در دنیای Front بسیار کاربرد دارد و نقش مهمی دارد. البته NPM یک رقیب بسیار قوی با نام YARM دارد که بعدا شما هم از آن استفاده خواهید کرد. YARM هم یک Package Manager بسیار قوی است که بسیار محبوب و پراستفاده می‌باشد.

پس ما Node.js را روی سیستم خود نصب کردیم. برای اینکه چک کنیم آیا Node.js از قبل روی سیستم ما نصب شده است یا نه، روش‌های مختلفی وجود دارد. یکی از روش‌ها این است که شما در Command Prompt یا همان CMD معروف دستور Node –Version (Dash Dash – – Version) را تایپ و اجرا کنید. اگر ورژنی به شما نمایش داده شد که مشخص می‌شود Node.js از قبل روی سیستم شما نصب شده است. ولی اگر پیغام خطا دریافت کردید باید Node.js را نصب کنید.

نکته مهم در این بخش این است که اگر Node.js از قبل نصب بود ولی ورژن آن قدیمی بود و قبل از ورژن 11 بود، بهتر است ابتدا Node.js فعلی را Uninstall کنید و سپس نسخه جدید را نصب کنید. در تصویر زیر نسخه Node.js نصب شده را مشاهده می‌کنید.

پیش نیاز اول که همان Node.js به علاوه NPM بود را آماده کردیم. حالا باید یک Code Editor خوب و سبک داشته باشیم که بتوانیم با آن برنامه خود را بنویسیم. محبوب ترین Code Editor در بین برنامه نویس‌ها در حال حاضر VS Code می باشد که می توانید از سایت خود VS Code دانلود و نصب کنید.

پیش نیاز دوم رو هم نصب کردیم. در زمان نصب VS Code توصیه می‌کنم که در مرحله آخر نصب که به شما چند Checkbox نمایش داده می‌شود که شامل افزوده شده Open with Code به منوی کلیک راست روی فولدرها و فایل‌ها می‌باشد را تیک بزنید که براحتی بتوانید فولدر یا فایل مورد نظر را در محیط VS Code باز کنید.
پیش نیازهای مورد نیاز رو برای شروع کار نصب کردیم. حالا موقع ایجاد یک App از نوع React می‌باشد. ما برای ایجاد یک React App می‌توانیم از دو روش زیر استفاده کنیم:

• به کمک Create-React-App
• ایجاد پروژه به صورت مرحله به مرحله به صورت دستی

هر یک از روش‌های بالا مزایا و معایبی دارند. در ابتدای کار توصیه می‌شود که به کمک پکیج Create-React-App پروژه React خود را ایجاد کنید تا درگیر جزئیات اولیه و حواشی ساخت پروژه نشوید. ولی بعد از حرفه‌ای شدن در React سعی می‌کنیم پروژه‌های خود را به صورت مرحله به مرحله خودمان ایجاد کنیم و از کتابخانه Create-React-App استفاده نکنیم.
مزیت کتابخانه Create-React-App سادگی در ایجاد پروژه می‌باشد و برای شما یک Template اولیه و آماده می‌سازد که می‌توانید براحتی آن را توسعه دهید.
ابتدا شما باید پکیج مربوط به Create-React-App را به صورت global (به صورت سراسری و عمومی) نصب کنید. برای این کار در CMD دستور زیر را وارد نمایید:

npm i create-react-app -g

سوئیچ -g همان نصب به صورت global می باشد، یعنی دستورات مربوط به create-react-app در همه مسیرها قابل دسترس می باشد.
بعد از نصب پکیج بالا حالا می‌توانیم اولین پروژه React خود را ایجاد کنیم. بهتر است یک فولدر به نام دلخواه به طور مثال React Projects برای خود در یکی از درایوها (بهتر است در Desktop نباشد) ایجاد کنید. سپس CMD را در مسیر این فولدر (به طور مثال React Projects) باز کنید.
برای باز کردن CMD در مسیر مورد نظر می‌توانید در Address Bar فولدر جاری کلیک کرده و کلمه CMD را تایپ کنید و Enter کنید.مانند تصویر زیر:

سپس در Command Prompt ایجاد شده با تایپ دستور زیر می‌توانید یک پروژه React ایجاد کنید.

create-react-app first-app

دستور Create-React-App که مشخص است و First-App نام پروژه و فولدر اصلی پروژه ما خواهد بود که نباید در نام پروژه حروف بزرگ نوشته شود و همه حروف به صورت Lower Case باشد و بین کلمات از Dash استفاده شود.
مدت زمان ایجاد یک پروژه React بستگی به سرعت اینترنت شما و همچنین سخت افزار سیستم مخصوصا هارد دستگاه شما دارد. حوصله کنید پروژه ایجاد شود و سپس ادامه دهید.

یک روش دیگر هم برای ایجاد پروژه به کمک create-react-app وجود دارد که به شکل زیر می‌باشد:

NPX create-react-app first-app

در این حالت که کلمه NPX در ابتدای دستور افزوده شده است، به این شکل است که دیگر شما نیاز به پکیج Create-React-App نخواهید داشت و می‌توانید براحتی و بدون نصب یک پکیج به صورت Global از آن استفاده کنید. مزیت این روش در این است که شما با دستور NPX همیشه آخرین نسخه از آن پکیج را دارید، در حالی که شما وقتی یک پیکج را مخصوصا به صورت Global نصب می‌کنید تا مدت‌ها شاید فراموش کنید آن را بروزرسانی کنید و نسخه‌های جدید آن را نصب کنید.

بعد از اجرای این دستور در مسیر فولدر جاری که پوشه React Projects در درایو D سیستم من می‌باشد یک پوشه با نام First-App ساخته می‌شود که همان پروژه React شما می‌باشد.
در React، محتوای یک پروژه در یک فولدر اصلی قرار می‌گیرد که شما باید آن را با ابزار VS Code خود باز کنید و شروع به کدنویسی نمایید.مانند شکل زیر:

برای دوستانی که تا به حال از نرم افزار VS Code استفاده نکردن شاید در ابتدا (یکی دو هفته اول) براشون محیط سخت و آزاردهنده‌ای باشه ولی به مرور خواهد دید که چقدر راحت، سریع و ساده است و بعد از مدتی حسابی به آن عادت خواهید کرد.

در محیط VS Code و در سمت چپ ما یک منوی عمودی (Sidebar) داریم که در اولین آیتم آن Explorer می‌باشد، که مثل Explorer ویندوز شما در آن می‌توانید فولدرها و فایل‌ها پروژه خود را مشاهده کنید و روی آنها کلیک کرده و باهاش کار کنید. در عکس زیر شما فولدرها و فایل‌های مربوط به پروژه First-App که ساختیم رو مشاهده می‌کنید.

سعی می‌کنیم در بخش دوم این مقاله، تک تک آیتم‌ها را به صورت مختصر توضیح دهیم و ببنیم هر کدام چه کاری انجام می‌دهند.
الان می‌خواهیم همین پروژه و Template اولیه که ایجاد شده را اجرا کنیم. برای اجرا پروژه باید یک دستور جدید تایپ و اجرا کنیم. ما برای تایپ و اجرای دستوراتی که تا به حال در محیط CMD وارد می‌کردیم، می‌توانیم براحتی در VS Code در بخش Terminal تایپ کرده و اجرا کنیم.

برای باز کردن یک ترمینال جدید می‌توانید در منوی افقی بالای VS Code روی منوی Terminal کلیک کنید و در منوی باز شده و روی New Terminal کلیک کنید. با این کار در بخش پایین VS Code یک پنجره جدید نمایش داده خواهد شد که همان ترمینال درخواستی شما است.
برای اجرا پروژه می‌توانید براحتی دستور زیر را اجرا کنید و پروژه شما ابتدا کامپایل می‌شود و سپس در آدرس localhost و پورت 3000 در مرورگر پیش فرض سیستم شما نمایش داده خواهد شد.

npm start

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

تا اینجا شما موفق شدید که پیش نیازهای لازم برای ایجاد یک پروژه React را نصب کنید و سپس یک پروژه ایجاد کرده و آن را با موفقیت اجرا نمایید. در بخش دوم همین مقاله با اجزای داخلی یک پروژه React آشنا خواهیم شد.

دانلود این مقاله آموزشی