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

مقدمه

در بخش اول مقاله ایجاد یک پروژه ریکت با پیش نیازها آشنا شدیم. برای شروع باید چه نرم افزارهایی را نصب کنیم و همینطور چطور یک پروژه جدید ریکت ایجاد کنیم.در ادامه می‌خواهیم شما را با اجزای داخلی و عبارت‌های مهم و کلیدی در ریکت آشنا کنیم.
ریکت در پشت صحنه با دو کتابخانه مهم کار می‌کند که اولی Babel و دومی Webpack می‌باشدباید کار هر کدام از این‌ها رو بدانیم و در زمان نیاز بتوانیم نحوه کار و عملکرد آنها را کمی تغییر دهیم. شاید تا مدت‌ها شما نیاز به تغییر دادن رفتارهای پیش فرض نداشته باشید، ولی وظیفه هر کدام از اینها را باید بدانید.
ابتدا با Babel شروع می‌کنیم. ما در ریکت کدهای HTML خود را باید با فرمت کمی متفاوت تر نسبت به خود HTML بنویسیم که به این فرمت jsx یا JavaScript XML گفته می‌شود. فرمت jsx به شما این امکان را می‌دهد که بتوانید در ریکت کدهای HTML بنویسید و داخل کدهای html خود به کدهای ریکت دسترسی داشته باشید.
نگران یادگیری jsx نباشید چون همان کدهای HTML است با چند قانون و قاعده که اصلا آزاردهنده نمی‌باشند و وقتی مشغول کدنویسی در ریکت می‌شوید این موضوع خیلی زود برایتان عادی خواهد شد.

خوب حالا Babel و jsx چه ارتباطی با یکدیگر دارند و نکته مهم تر اینکه کار اصلی Babel در پروژه‌های ریکت چیست؟
Babel در ریکت نقش کامپایلر را بازی می‌کند و کدهای ریکت و jsx را تبدیل به کدهای JavaScript می‌کند.پس کامپایلر ما در ریکت Babel می‌باشد که جز مهم ترین کتابخانه‌های پروژه‌های React می‌باشد.
حالا برویم سر وقت Webpack که کاربرد آن در ریکت چیست؟Webpack یک کتابخانه بسیار معروف و کاربردی در دنیای وب می‌باشد که در سایر SPA ها مانند Angular و Vue.js هم استفاده می‌شود. کاری که Webpack انجام می‌دهد بسیار مهم و تاثیرگذار است.
webpack کار بسته بندی و ساختن فایل‌های جاوا اسکریپت نهایی را برعهده دارد. باید در هر فایل پیش نیازهای آن را آورده و با درنظر گرفتن خیلی از جزئیات دیگر، یک فایل JavaScript بسازد که آن در مرورگر کاربر قابل اجرا شدن باشد.
از Webpack در دنیای وب به عنوان یک جادوگر یاد می‌شود چون در پشت صحنه کار بسته بندی(bundle)، کار بسیار زیادی انجام می‌شود و جزئیات زیادی مانند هم نامی توابع، متغیرها و … کنترل می‌شود که Webpack این کار را به خوبی انجام می‌دهد و خروجی بی نقصی ایجاد می‌کند.

شما در تنظیمات و تغییرات مربوط به پروژه‌ها، بیشتر با Webpack درگیر خواهید شد و کار زیادی با babel نخواهید داشت. در مقالات بعدی سعی می‌کنم که در یک مقاله به صورت مفصل فقط در درباره Webpack بنویسم و شما را با هم جزئیات و تنظیمات webpack آشنا کنم.
فعلا در این مرحله شما باید تعریف و نقش هر یک را در ریکت بدانید.
خوب تا اینجا پروژه ایجاد شده و آماده اجرا می‌باشد. کمی هم با پشت صحنه آشنا شدیم که کتابخانه‌های Webpack و Babel چه نقشی ایفا می‌کنند.
حالا برویم سروقت React و اینکه در ابتدا چطور می‌توانیم پروژه خود را اجرا کنیم و در مرورگر مشاهده کنیم؟
برای این کار شما می‌توانید در پنجره Terminal مربوط به VS Code یا در محیط Command Prompt که در مسیر پروژه باز شده است دستور زیر را اجرا کنید:
npm start
با این دستور پروژه ریکت شما بعد از کامپایل در مرورگر پیش فرض سیستم شما در پورت ۳۰۰۰ نمایش داده خواهد شد. پورت پیش فرض در ریکت در اولین پروژه ۳۰۰۰ می‌باشد و اگر همزمان پروژه دومی را اجرا کنید پورت ۳۰۰۱ برای پروژه دوم در نظر گرفته خواهد شد.صفحه پیش فرض و اولیه پروژه ریکت بعد از اجرا شدن در مرورگر شما به شکل زیر خواهد بود:یکی از ویژگی‌های ریکت این است که شما می‌توانید پس از اجرای پروژه، تغییراتی در فایل‌های پروژه جاری انجام دهید و پس از ذخیره کردن تغییرات، خروجی در مرورگر به صورت خودکار رفرش خواهد شد و نیازی نیست مثل گذشته رفرش دستی مرورگر را انجام دهید. این از امکانات داخل Webpack می‌باشد که به عنوان ویژگی Watch در Webpack Server می‌باشد که این کار اعمال تغییرات در خروجی را انجام می‌دهد.
ساختار فایل‌های یک پروژه ریکت که توسط Create-React-App ایجاد شده است به شکل زیر می‌باشد من محتوای بخش FIRST-APP که نام فولدر پروژه ما هست را به ترتیب تصویر بالا در ادامه توضیح می‌دهم:

• Node_Modules: این فولدر شامل همه پکیج‌هایی می‌باشد که در پروژه به صورت پیش فرض وجود دارد و همینطور پکیج‌هایی مثل bootstrap که بعدا خودمان نصب خواهیم کرد در این فولدر قرار می‌گیرد. عموما ما محتوای داخل این فولدر را دستی تغییر نمی‌دهیم و این فولدر توسط دستوراتی مثل npm یا yarn کنترل می‌شود. نکته دیگر این هست که این پوشه را در Source Control خود مثل گیت باید ignore کنیم، چون دارای حجم و تعداد بسیار زیادی فایل‌های js می‌باشد.
• Public: این فولدر دارای یک فایل index.html و چندین فایل دیگر می‌باشد که فایل‌هایی مربوط به pwa و robot.txt می‌باشد. در این پوشه مهم ترین فایل index.html می‌باشد که کل خروجی پروژه ریکت شما در داخل این فایل رندر و نمایش داده می‌شود و به خاطر همین ویژگی به این نوع spa گفته می‌شود، چون همه خروجی‌ها در یک فایل نمایش داده می‌شود که در اینجا همان index.html می‌باشد.
• src: این فولدر مهم ترین فولدر پروژه می‌باشد که همه فایل‌ها مربوط به پروژه را در این بخش می‌سازیم و داخل آن را فولدر بندی می‌کنیم و فایل‌ها را داخل آن ایجاد کرده و کدهای خود را می‌نویسیم.در داخل فایل src یک فایل index.js داریم که فایل شروع کننده در ریکت می‌باشد که مشخص می‌کند چه کامپوننتی به عنوان صفحه پیش فرض به کاربر نمایش داده شود.
• Gitignore: این فایل مربوط به source control گیت می‌باشد که مشخص می‌کند که چه فولدر یا فایل‌های درگیر گیت نشوند و عملن گیت با آنها کاری نداشته باشد و آنها را track نکند.
• Package.json: این فایل مهم ترین فایل کانفیگ پروژه می‌باشد که شاید شما در ابتدا با آن کاری خاصی نداشته باشید و با بزرگ تر شدن و پیچیده تر شدن پروژه حتما باید با ساختار داخلی آن آشنا شوید و بتوانید تغییراتی را روی آن ایجاد کنید. این فایل شامل کانفیگ‌هایی مانند ورژن ریکت پروژه، دستورات اجرا، build و تست مربوط به پروژه می‌باشد.
• README.md: فایل توضیحات پروژه می‌باشد که به صورت یک فایل راهنما و نوشته است و محتوای داخل آن رو پروژه هیچ تاثیری ندارد.
• yarn.lock : این فایل بسته به اینکه شما از npm استفاده می‌کنید یا yarn نام متفاوتی در پروژه‌ها دارد. اگر شما از yarn استفاده کنید به صورت yarn.lock ساخته می‌شود. اما اگر از npm استفاده کنید برای نصب package ها به صورت package.lock.json ساخته می‌شود. محتوای داخل آن مشخص می‌کند که هر پکیج دقیقا از چه آدرسی دانلود شده و چه ورژنی از آن نصب شده است. حذف کردن این فایل تاثیری رو اجرا ندارد و فقط به صورت یک log فایل استفاده می‌شود.

این معرفی بخش‌های اصلی یک پروژه ریکت بود، که توسط کتابخانه Create-React-App ایجاد کرده بودیم. حالا شما بیشتر در فولدر src فایل‌های خود را بسازید و پروژه خود را توسعه دهید.

نکته مهم دیگر در ریکت اینکه عموما ریکت را می‌توان با دو نوع syntax مختلف نوشت که اولی ECMAScript است و دومی TypeScript.شاید حدود ۹۰ درصد از برنامه نویسان ریکت از حالت ECMAScript استفاده می‎کنند.پسوند فایل‌های پروژه در ریکت هم اگر شما از ECMAScript استفاده کنید به صورت js یا jsx می‌باشد و اگر از حالت TypeScript استفاده شود پسوند فایل ts خواهد بود.
در رابطه با ECMAScript اگر آشنایی با آن ندارید زیاد نگران نباشید. ویژگی‌های جدید جاوا اسکریپت براساس استانداردی با نام ECMAScript ارائه می شود و مثلا با نام es6 عرضه می‌شود.
پس شما در واقع همان java script را کار می‌کنید که سال به سال در حال کامل شدن و افزوده شدن امکانات جدید می‌باشد.
خوب پس ما برای کار با ریکت از ECMAScript استفاده می‌کنیم که قبلا با آن کار کردیم (java script) و بخش‌های مختلف پروژه را با آن توسعه می‌دهیم.
تا اینجای کار با ساختار پروژه و روش‌های نوشتن کد ریکت آشنا شدیم. در ادامه می‌خواهیم درگیر اجزا و عناصر داخلی ریکت شویم و ببینیم برای ایجاد و نمایش یک صفحه جدید باید چه کاری انجام دهیم.

ما در ریکت به صفحات که به تنهایی نمایش داده می‌شوند یا جزئی از یک صفحه دیگر هستند، کامپوننت می‌گوئیم. پس کلمه کامپوننت جای صفحه و عناصر داخلی آن را می‌گیرد و ما باید بدانیم یک کامپوننت در ریکت چه ویژگی‌هایی دارد و چگونه ساخته و استفاده می‌شود.
در ریکت برای ساخت کامپوننت ما دستور خاصی اجرا نمی‌کنیم و براحتی روی فولدر مربوط که فعلا src می‌باشد کلیک راست کرده و New File را انتخاب می‌کنیم.
نام کامپوننت را به صورت Pascal Case نامگذاری می‌کنیم یعنی حرف اول کلمات بزرگ و بقیه حروف کوچک و در نهایت برای همه فایل‌ها یا پسوند js می‌گذاریم یا پسوند jsx که بیشتر پسوند js استفاده می‌شود.
پس الان در داخل پوشه src یک فایل با نام Home.js ایجاد کردیم. حالا باید فایل را باز کنیم و شروع به نوشتن کدهای ریکت خود برای ساختن یک کامپوننت شویم مانند تصویر زیر که کدهای کامپوننت Home را نمایش می‌دهد.
 
پس الان در داخل پوشه src یک فایل با نام Home.js ایجاد کردیم. حالا باید فایل را باز کنیم و شروع به نوشتن کدهای ریکت خود برای ساختن یک کامپوننت شویم مانند تصویر زیر که کدهای کامپوننت Home را نمایش می‌دهد

نکته مهم در این بخش این است که ما در ریکت می‌توانیم کامپوننت‌های خود را به دو شکل زیر بنویسیم:

• Class Component: در این روش به کمک کلاس و ارث بری از کلاس Component یک کامپوننت جدید استفاده می‌کنیم. تیم ریکت ابتدا با این روش شروع کرد و همچنان این روش پشتیبانی می‌شود. ولی قرار است در ورژن‌های جدید ریکت دیگر class component پشتیبانی نشود و کنار گذاشته شود. تصویر بالا به روش Class Component ایجاد شده است.
• Function Component: این روش با استفاده از یک تابع معمولی یا Arrow Function، کامپوننت ایجاد می‌شود که روشی است که الان بسیار زیاد استفاده می‌شود و اکثر کامپوننت‌ها با این روش ایجاد می‌شوند به دلیل مزایای که نسبت به روش Class Component دارد. در تصویر زیر کامپوننت Home با روش arrow function ایجاد شده است.

در هر دو حالت بالا شما یک تگ div مشاهده می‌کنید که خروجی مدنظر این کامپوننت که کدهای html می‌باشد با فرمت jsx در آن بخش نوشته می‌شود.
من فعلا فقط یک تگ h1 قرار می دهم و عبارت Home Sample Component را داخل آن می‌نویسم.حالا می خواهیم این کامپوننت را در خروجی نمایش دهیم. برای این کار باید از تگ آن استفاده کنیم. یعنی خروجی هر کامپوننت برای استفاده در کامپوننت دیگر به صورت یک تگ می‌باشد مثل: <Home />
باید نام تگ‌های خروجی کامپوننت های ریکت به صورت PascalCase باشد تا درست نمایش داده شود.
حالا برای نمایش کافی است که این تگ <Home /> را در فایل index.js قرار دهید که این کامپوننت به عنوان کامپوننت پیش فرض نمایش داده شود.در تصویر بالا ابتدا ما کامپوننت Home را در فایل index.js ، import کردیم و سپس در خط ۱۰ گفتیم که کامپوننت Home به عنوان کامپوننت شروع کننده در بخش root در فایل index.html نمایش داده شود.
دستور document.getElementById(‘root’) در داخل فایل index.html در فولدر public به دنبال تگی با id با مقدار root می گردد و خروجی کامپوننت Home را در داخل آن رندر می کند و به کاربر نمایش داده می‌شود.خوب پس تا به اینجای کار یک کامپوننت جدید ایجاد کردیم و یک عبارت داخل آن نوشتیم و سپس آن کامپوننت را به عنوان کامپوننت شروع کننده در فایل index.js معرفی کردیم و در خروجی طبق تصویر بالا نتیجه را مشاهده کردیم.
امیدوارم تا اینجا یک دید کلی از روند کار مشاهده کرده باشید و ادامه را در بخش سوم مقاله با هم ادامه خواهیم داد.