شروع یادگیری ری‌اکت (React JS)

ری‌اکت (React) چیست؟

React یک کتابخانه‌ی جاوااسکریپتی متن‌باز است که توسط فیسبوک توسعه یافته و برای ساخت رابط‌های کاربری (UI) به‌ویژه در برنامه‌های تک‌صفحه‌ای (SPA) استفاده می‌شود. این کتابخانه بر پایه‌ی مفهوم کامپوننت‌ها طراحی شده که به توسعه‌دهندگان امکان می‌دهد بخش‌های مختلف رابط کاربری را به صورت ماژولار و قابل استفاده مجدد ایجاد کنند. React با استفاده از Virtual DOM تغییرات را بهینه‌سازی می‌کند و باعث بهبود کارایی و سرعت رندر صفحات می‌شود. این کتابخانه همچنین با فریمورک‌هایی مانند Next.js و کتابخانه‌هایی مثل Redux برای مدیریت وضعیت سازگار است.

نیازمندی‌ها (Requirements)

برای دنبال کردن این مجموعه مقالات آموزشی، شما باید با اصول پایه‌ای توسعه وب آشنا باشید، یعنی چگونگی استفاده از HTML، CSS و JavaScript. همچنین کمک می‌کند که با مفاهیم API آشنا باشید، زیرا در این تجربه یادگیری به آن پرداخته خواهد شد. به علاوه، شما به ابزارهای زیر نیاز دارید تا هنگام خواندن این مقالات با من کد بزنید.

ویرایشگر و ترمینال (Editor and Terminal)

برای شروع کار با توسعه وب، من یک راهنمای تنظیمات به شما داده‌ام. برای این تجربه یادگیری، شما به یک ویرایشگر متن (مانند Sublime Text) و یک ابزار خط فرمان (مانند iTerm) نیاز دارید. به عنوان یک جایگزین، پیشنهاد می‌کنم از IDE (محیط توسعه یکپارچه)، مانند Visual Studio Code (که به اختصار VSCode نیز نامیده می‌شود)، برای مبتدیان استفاده کنید، زیرا این ابزار یک راه‌حل همه‌جانبه است که هم ویرایشگر پیشرفته و هم ابزار خط فرمان یکپارچه را در اختیار شما قرار می‌دهد و به دلیل محبوبیت آن در میان توسعه‌دهندگان وب، گزینه مناسبی است.

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

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

نصب Node و NPM

قبل از اینکه شروع کنیم، باید Node و NPM نصب شده باشند. هر دوی این‌ها برای مدیریت کتابخانه‌ها (node packages) که در طول مسیر به آن‌ها نیاز خواهید داشت، استفاده می‌شوند. این پکیج‌ها می‌توانند کتابخانه‌ها یا کل فریم‌ورک‌ها باشند. ما پکیج‌های خارجی نود را از طریق npm (مدیر بسته‌های نود) نصب خواهیم کرد.

برای بررسی نسخه‌های Node و npm در خط فرمان می‌توانید از دستورات زیر استفاده کنید:

--version
npm --version

اگر در ترمینال خروجی از نسخه نصب‌شده دریافت نکردید، باید Node و npm را نصب کنید.

تنظیم پروژه‌ی ری‌اکت (Setting up a React Project)

در این قسمت، از create-react-app برای شروع پروژه‌ی ری‌اکت خود استفاده می‌کنیم. این ابزار، که توسط فیسبوک در سال 2016 معرفی شده است، یک پکیج شروع بدون نیاز به پیکربندی است که برای مبتدیان پیشنهاد می‌شود. در create-react-app ابزارها و پیکربندی‌ها در پس‌زمینه به طور خودکار انجام می‌شود و شما تنها بر روی پیاده‌سازی برنامه خود تمرکز می‌کنید.

پس از نصب Node و NPM، از خط فرمان استفاده کنید و دستور زیر را در پوشه‌ای که برای پروژه‌تان در نظر گرفته‌اید وارد کنید. در این مثال، نام پروژه «hacker-stories» است، اما می‌توانید هر نامی که می‌خواهید انتخاب کنید:

create-react-app hacker-stories

پس از پایان نصب، به پوشه‌ی پروژه وارد شوید:

cd hacker-stories

حالا می‌توانید پروژه را در ویرایشگر یا IDE باز کنید. برای Visual Studio Code، کافی است دستور زیر را در خط فرمان وارد کنید:

code .

ساختار پوشه structure یا شکلی از آن بسته به نسخه create-react-app، باید ایجاد شود:

ساختار پوشه‌های پروژه

ساختار پوشه‌ها به این صورت خواهد بود (البته ممکن است بسته به نسخه‌ی create-react-app تغییرات جزئی داشته باشد):

-stories/
  --node_modules/
  --public/
  --src/
    --App.css
    --App.js
    --App.test.js
    --index.css
    --index.js
    --logo.svg
  --.gitignore
  --package-lock.json
  --package.json
  --README.md

این خلاصه ای از مهم ترین پوشه‌ها و فایل‌ها است:

README.md: این فایل شامل دستورالعمل‌ها و اطلاعات مفید در مورد پروژه است.

node_modules/: این پوشه شامل تمام پکیج‌های نصب‌شده است. در پروژه‌های ری‌اکت، این پوشه به طور خودکار توسط npm مدیریت می‌شود.

package.json: این فایل شامل لیست وابستگی‌ها و سایر تنظیمات پروژه است.

package-lock.json: این فایل تنظیمات دقیق نسخه‌های پکیج‌ها را مشخص می‌کند.

.gitignore: این فایل شامل تمام فایل‌ها و پوشه‌هایی است که نباید به مخزن git شما اضافه شوند. این فایل‌ها و پوشه‌ها باید فقط در پروژه‌ی محلی شما قرار داشته باشند. پوشه‌ی node_modules/ یکی از این مثال‌ها است. برای اشتراک‌گذاری کافی است فایل package.json را با دیگران به اشتراک بگذارید تا آن‌ها بتوانند وابستگی‌ها را در سیستم خود با استفاده از دستور npm install نصب کنند بدون اینکه نیاز به اشتراک‌گذاری کل پوشه‌ی وابستگی‌ها باشد.

public/: این پوشه شامل فایل‌های توسعه مانند public/index.html است. فایل index.html در هنگام توسعه اپلیکیشن در آدرس localhost:3000 نمایش داده می‌شود یا در صورتی که اپلیکیشن در دامنه‌ای دیگر میزبان باشد، آنجا نمایش می‌یابد. پیکربندی پیش‌فرض این فایل index.html را به تمام کدهای جاوااسکریپت در پوشه‌ی src/ مرتبط می‌کند.

در ابتدا، تمام فایل‌های مورد نیاز شما در پوشه‌ی src/ قرار دارند. تمرکز اصلی بر روی فایل src/App.js است که برای پیاده‌سازی کامپوننت‌های ری‌اکت استفاده می‌شود. این فایل برای پیاده‌سازی اپلیکیشن شما مورد استفاده قرار می‌گیرد، اما ممکن است بعداً بخواهید کامپوننت‌های خود را به چندین فایل تقسیم کنید که هر فایل یک یا چند کامپوننت را در خود جای دهد. به این نقطه در نهایت خواهیم رسید.

علاوه بر این، شما یک فایل src/App.test.js برای تست‌های خود و یک فایل src/index.js به عنوان نقطه‌ی ورود به دنیای ری‌اکت خواهید یافت. شما در بخش‌های بعدی با این دو فایل آشنا خواهید شد. همچنین یک فایل src/index.css و یک فایل src/App.css برای استایل‌دهی به اپلیکیشن و کامپوننت‌های شما وجود دارد که با استایل پیش‌فرض در زمان باز کردن آن‌ها نمایش داده می‌شود. شما این فایل‌ها را بعداً تغییر خواهید داد.

پس از اینکه با ساختار پوشه‌ها و فایل‌های پروژه‌ی ری‌اکت خود آشنا شدید، بیایید از دستورات موجود برای راه‌اندازی پروژه استفاده کنیم. تمام دستورات اختصاصی پروژه‌ی شما در فایل package.json و زیر ویژگی scripts قرار دارند. این دستورات ممکن است مشابه نمونه‌های زیر باشند:

package.json
{
...
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
}

این اسکریپت‌ها با استفاده از دستور npm run <script> در ترمینال یکپارچه IDE یا ابزار خط فرمان مستقل شما اجرا می‌شوند. برای اسکریپت‌های start و test، می‌توان از عبارت run صرف‌نظر کرد. دستورات به شرح زیر هستند:

# Runs the application in http://localhost:3000
npm start
# Runs the tests
npm test
# Builds the application for production
npm run build

دستوری دیگر از اسکریپت‌های قبلی npm به نام eject وجود دارد که نباید در این تجربه یادگیری استفاده شود. این یک عملیات یک‌طرفه است، زیرا پس از استفاده از این دستور، نمی‌توانید به حالت قبل برگردید. اساساً این دستور برای دسترسی به تمام ابزارها و پیکربندی‌های create-react-app طراحی شده است، اگر از انتخاب‌ها راضی نیستید یا می‌خواهید تغییراتی ایجاد کنید. اما در اینجا ما تمام تنظیمات پیش‌فرض را نگه می‌داریم.