مقدمه و پیش نیازهای React

React (ری اکت) یک کتابخانه برای زبان برنامه نویسی جاوااسکریپت هست که توسط شرکت فیسبوک (Facebook) توسعه داده شد و در سال 2013 به صورت رسمی ارائه شد. این کتابخانه در بسیاری از شرکت ها در حال استفاده است و بازار کار خوبی دارد. 

در این بخش به توضیح بیشتری در مورد React، پیش نیازهای آموزش React و ابزارهای لازم برای کار با React بیشتر صحبت خواهیم کرد.

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

React چیست و چرا باید آن را یاد بگیریم؟

React یک کتابخانه‌ی متن‌باز جاوااسکریپتی است که توسط شرکت Facebook توسعه داده شده و اولین‌بار در سال ۲۰۱۳ منتشر شد. این کتابخانه در حال حاضر به نسخه ۱۸ رسیده و به دلیل سرعت بالا، ساختار ماژولار و پشتیبانی قدرتمند، به یکی از پرکاربردترین ابزارها در توسعه رابط کاربری تبدیل شده است.

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

مخاطبان این دوره چه کسانی هستند؟

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

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

پیش‌نیازهای شرکت در دوره آموزش React

از آن‌جایی که React یک کتابخانه برای زبان JavaScript است، طبیعتاً لازم است پیش از شروع دوره با JavaScript آشنایی نسبی داشته باشید. نیازی نیست در سطح حرفه‌ای باشید، اما داشتن تجربه ابتدایی در این زبان ضروری است. همچنین آشنایی با مفاهیم پایه HTML و CSS از الزامات ورود به دنیای فرانت‌اند است.

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

ابزارهای ضروری برای شروع کار با React

برای شروع کدنویسی با React، نیاز به نصب برخی ابزارهای اولیه روی سیستم خود دارید. یکی از مهم‌ترین این ابزارها، نرم‌افزار Node.js است.

Node.js چیست و چرا به آن نیاز داریم؟

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

نحوه نصب Node.js

برای نصب Node.js، کافی است وارد وب‌سایت رسمی آن به آدرس nodejs.org شوید. در این صفحه معمولاً دو نسخه مختلف به شما پیشنهاد می‌شود در زمان ضیط این قسمت، نسخه‌های LTS و Current به ترتیب 16.14.2 و 17.9.0 هستند. پیشنهاد می‌کنیم نسخه LTS را نصب کنید، چرا که از پشتیبانی بلندمدت برخوردار بوده و معمولاً پایدارتر است.

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

استفاده از ترمینال برای اجرای دستورات

استفاده از ترمینال برای اجرای دستورات، یکی از مراحل مهم در فرآیند توسعه است. برای دسترسی به ترمینال در ویندوز، تنها کافیست در منوی جستجوی ویندوز عبارت cmd را تایپ کنید و برنامه Command Prompt را باز کنید.
برای بررسی نصب صحیح Node.js، می‌توانید از ترمینال استفاده کنید. دستور زیر را وارد کنید تا نسخه Node.js نصب‌شده روی سیستم شما نمایش داده شود:

node -v

اگر Node.js به درستی نصب شده باشد، نسخه آن نمایش داده خواهد شد. در غیر این صورت، ترمینال هیچ نسخه‌ای را نمایش نخواهد داد و باید فرآیند نصب را دوباره بررسی کنید.

بررسی نصب npm

در کنار Node.js، نرم‌افزار npm یا Node Package Manager  به‌طور خودکار نصب می‌شود. این ابزار برای مدیریت بسته‌ها و پکیج‌ها در پروژه‌های Node.js و React کاربرد فراوانی دارد. برای اطمینان از نصب npm، می‌توانید دستور زیر را در ترمینال وارد کنید:

npm -v

در صورتی که npm به درستی نصب شده باشد، نسخه آن در ترمینال نمایش داده خواهد شد (برای مثال، نسخه ۸). اگر این دستور نیز نسخه npm را نشان دهد، به این معنی است که هر دو نرم‌افزار Node.js و npm به‌درستی نصب شده‌اند و آماده استفاده برای پروژه‌های React خواهید بود.

انتخاب ویرایشگر کد مناسب برای پروژه‌ها

برای نوشتن و ویرایش کدهای پروژه‌های React، به یک محیط ویرایشگر کد نیاز داریم. شما می‌توانید از هر محیطی که راحت‌تر هستید، مانند Notepad یا ++Notepad استفاده کنید، اما توصیه می‌شود که از یک ویرایشگر کد پیشرفته و مخصوص توسعه‌دهندگان استفاده کنید.

چرا Visual Studio Code؟

یکی از بهترین و پرکاربردترین ویرایشگرهای کد برای توسعه‌دهندگان React، Visual Studio Code (VS Code) است. این نرم‌افزار به‌دلیل سبک بودن، قابلیت‌های فراوان و سهولت استفاده، انتخاب محبوب بسیاری از برنامه‌نویسان است. برخی از ویژگی‌های VS Code عبارتند از:

نحوه دانلود و نصب Visual Studio Code

برای دانلود Visual Studio Code، کافی است به وب‌سایت رسمی آن به آدرس Visual Studio Code مراجعه کنید. پس از ورود به وب‌سایت، دکمه دانلود را فشار دهید تا نسخه مناسب سیستم عامل شما دانلود شود. سپس نرم‌افزار را نصب کرده و آماده استفاده خواهید بود.

همان‌طور که مشاهده می‌کنید، آدرس URL برای دانلود Visual Studio Code کاملاً مشخص است. برای انتخاب نسخه مناسب و نصب این ویرایشگر کد، باید با توجه به نوع سیستم‌عامل خود، ورژن مناسب را انتخاب کنید.

انتخاب نسخه مناسب برای سیستم عامل

اگر سیستم‌عامل شما ویندوز است، باید نسخه‌ای که با معماری سیستم شما سازگار است را انتخاب کنید. در ویندوز، دو نسخه برای دانلود وجود دارد: نسخه ۶۴ بیتی و نسخه ۳۲ بیتی. باید نسخه‌ای را که مطابق با نوع معماری ویندوز شما است انتخاب کنید.پس از کلیک روی گزینه مناسب، صفحه دانلود برای شما باز می‌شود و لینک دانلود Visual Studio Code به شما ارائه خواهد شد. حجم این فایل حدوداً ۷۵ مگابایت است. 

در هنگام نصب Visual Studio Code، شما با دو گزینه مواجه خواهید شد:

• User Installer: این گزینه تنها برای کاربر فعلی سیستم نصب می‌شود.
• System Installer: این گزینه برای تمامی کاربران سیستم نصب می‌شود و به دسترسی ادمین نیاز دارد.

پیشنهاد می‌کنم که گزینه User Installer را انتخاب کنید، مگر اینکه بخواهید Visual Studio Code برای تمام کاربران سیستم شما نصب شود.

پس از دانلود و شروع فرآیند نصب، در مرحله‌ای به نام Select Additional Tasks خواهید رسید. در این قسمت، دو گزینه مهم وجود دارد که باید حتماً تیک آن‌ها را بزنید:

• Add to PATH: این گزینه به شما این امکان را می‌دهد که به راحتی از طریق ترمینال، پوشه‌های پروژه خود را با Visual Studio Code باز کنید.
• Register Code as an editor for supported file types: این گزینه باعث می‌شود که Visual Studio Code به عنوان ویرایشگر پیش‌فرض برای انواع فایل‌های پشتیبانی‌شده انتخاب شود.

این تنظیمات در آینده کمک زیادی به شما خواهند کرد تا به‌طور سریع و راحت‌تر به کدهای خود دسترسی پیدا کنید.

ترمینال داخلی Visual Studio Code

در Visual Studio Code، برای استفاده از ترمینال داخلی، از منوی Terminal گزینه New Terminal را انتخاب کنید. با این کار، ترمینالی در پنجره پایین محیط ویژوال استودیو کد برای شما باز خواهد شد و می‌توانید دستورات خود را مستقیماً در آن اجرا کنید.
در هنگام استفاده از Visual Studio Code، می‌توانید به راحتی پوشه‌ها را برای پروژه‌های خود باز کنید. برای این کار، فقط کافی است که روی پوشه مورد نظر راست‌کلیک کرده و گزینه Open with Code را انتخاب کنید. این گزینه پس از نصب Visual Studio Code و فعال کردن تنظیمات اضافی در هنگام نصب، برای شما در دسترس خواهد بود و به شما این امکان را می‌دهد که پوشه‌ها را مستقیماً در VS Code باز کنید.

استفاده از مرورگر برای مشاهده نتایج

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

ساخت پروژه React با استفاده از ترمینال 

برای شروع کار، به یک ترمینال نیاز داریم که می‌توانیم در داخل Visual Studio Code آن را باز کنیم. یک روش ساده برای باز کردن ترمینال این است که در پوشه مورد نظر روی دسکتاپ راست‌کلیک کرده و گزینه Open PowerShell Window Here را انتخاب کنید. این گزینه به شما اجازه می‌دهد که از PowerShell برای اجرای دستورات استفاده کنید.
برای ساخت اولین پروژه React، دستور زیر را در ترمینال وارد کنید:

npx create-react-app my-app

در اینجا، به جای "my-app"، می‌توانید نام دلخواه پروژه خود را وارد کنید (مثلاً "SokanAcademy"). پس از وارد کردن دستور، پروژه React به‌طور خودکار دانلود و نصب خواهد شد.
پس از نصب پروژه، می‌توانید وارد پوشه پروژه خود شوید و با استفاده از دستور زیر آن را اجرا کنید:

cd SokanAcademy
npm start

این دستور باعث می‌شود که پروژه شما روی localhost:3000 اجرا شود و مرورگر به‌طور خودکار باز شده و صفحه پروژه را نمایش دهد.