تبلیغات

آموزش کامل ایجاد پروژه ReactJS در NodeJS و ابزار NPM

شاید یکی از بزرگترین مشکلاتی که در شروع به یادگیری ReactJS با آن مواجه شده باشید، این باشد که ندانید از کجا و چگونه باید محیط توسعه‌ی ReactJS را راه‌اندازی کنید. البته قبلا در توضیحات ReactJS، به نحوه‌ی فراخوانی اسکریپت React در یک صفحه‌ی HTML و نوشتن یک مثال ساده‌ی Hello World پرداختیم؛ اما از آنجایی که در آن روش، با مشکلات زیادی از جمله سختی مدیریت و نگهداری پروژه رو به رو خواهیم شد، بهتر است از روش اصولی ایجاد و ساخت پروژه‌ی ReactJS استفاده کنیم؛ ولی قبل از ادامه‌ی بحث، ابتدا وارد هرکدام از لینک‌های زیر شده و با مفاهیم مربوطه آشنا شوید:

  1. ReactJS چیست؟!
  2. NodeJS چیست؟!
  3. ساخت اولین پروژه در NodeJS
  4. NPM چیست؟!

پس با توجه به توضیحات لینک‌های بالا، باید گفت که ReactJS، کتابخانه‌ی ساخت UI در جاوا اسکریپت می‌باشد. از طرفی، NodeJS یک اجراکننده‌ی جاوا اسکریپت (موتور JS)  بوده و NPM نیز ابزار مدیریت پکیج مختص NodeJS است. پس راه‌اندازی پروژه‌ی ReactJS در NodeJS، کمک زیادی در توسعه‌ی کد به ما خواهد کرد.

توجه داشته باشید که NodeJS، برایمان نقش IDE (محیط توسعه و نوشتن کد) را بازی نمی‌کند و ما می‌توانیم از IDE هایی از جمله ویژوال استودیو، Intellij IDEA یا VSCode و ادیتورهای متن Atom و Subulime Text و نوتپدپلاس‌پلاس استفاده کنیم.

ایجاد پروژه در NPM

نحوه‌ی ایجاد و راه‌اندازی یک پروژه‌ی ReactJS در NPM، روش‌های مختلفی دارد؛ اما ما قصد داریم تا یک ساختار از پیش آماده شده را برای توسعه‌ی ReactJS استفاده کنیم. البته در صورت تمایل نیز می‌توان به صورت دستی اقدام به ایجاد پروژه‌ی ReactJS کرده و پکیج‌های لازم و ضروری را قدم به قدم نصب کرد؛ ولی اینکار زمان‌بر بوده و دردسرهای پیکربرندی پروژه را به همراه خواهد داشت.

بنابراین ما در اینجا، از ابزار کمکی create-react-app برای راه‌اندازی یک پروژه‌ی ReactJS استفاده می‌کنیم.

شروع به کار

1- از نصب بودن NodeJS مطمئن شوید. سپس از منوی Start ویندوز، عبارت CMD را جستجو کرده و آن را در حالت Administrator اجرا کنید.

2- دستور زیر را تایپ کرده و Enter را بزنید؛ تا ابزار create-react-app به صورت سراسری نصب شود:
(توجه داشته باشید که ما این بسته را به صورت سراسری نصب می‌کنیم تا بتوانیم همیشه از آن برای ایجاد پروژه استفاده کنیم و فعلا با دستور زیر قرار نیست هیچ پروژه‌ای از ReactJS ایجاد شود.)

4- صبر کنید تا عملیات نصب و دریافت بسته از اینترنت تمام شود. سپس درایوری که قصد دارید پروژه‌ی خود را در آن بسازید را به صورت زیر وارد کرده و Enter را بزنید:

5- حالا با دستور زیر، به مسیری که قصد داریم پروژه‌ی ReactJS را در آن بسازیم، می‌رویم:
(توجه: مسیر نوشته شده تنها یک مثال است)

6- بنابراین داخل پوشه‌ی projects و سپس reactjs، قصد داریم پروژه‌ی خود را ایجاد کنیم؛ پس از دستور زیر استفاده می‌کنیم:
(به جای sample، نام پروژه‌ی خود را بنویسید؛ این نام، یک پوشه‌ی جدید در مسیر بالا خواهد بود که فایل‌های پروژه‌ی شما در آن قرار می‌گیرند.)

7- کمی طول خواهد کشید؛ پس از اتمام، از آنجایی که فعلا در مسیر قدیمی قرار داریم، از دستور زیر برای رفتن به پوشه‌ی sample (پوشه‌ی پروژه) استفاده می‌کنیم:

8- حالا بیایید پروژه را استارت کرده و خروجی آن را در مرورگر مشاهده کنیم:

مرورگر با آدرسی شبیه به آدرس «localhost:3000» باز شده و شما یک صفحه‌ی نمونه را مشاهده خواهید کرد. و همچنتین داخل CMD، عباراتی شبیه به زیر را خواهید دید:

Local http://localhost:3000/
On Your Network: http://192.168.1.105:3000/

اگر به شبکه وصل شده باشید، مثلا مودم وایرلس منزلتان، آدرس On Your Network برای مشاهده‌ی پروژه‌ی شما در شبکه خواهد بود که برای مثال می‌توانید با گوشی متصل به همان شبکه‌ی وایرلس (وای فای) نیز آن را مشاهده کنید.

  • اگر تغییری در کدهای پروژه رخ دهد، همه چیز به صورت خودکار ذخیره می‌شود و نیازی به استارت مجدد با دستور بالا وجود نداد؛ حتی نیازی به رفرش صفحه هم نیست و به محض ذخیره‌ی فایل، تغییرات در مرورگر ظاهرمی‌شوند.
  • برای توقف سرویس، Ctrl+C را در CMD فشار دهید؛ سپس Y را تایپ کرده و Enter را بزنید.

کمی درباره‌ی Create React App

بسته‌ی create-react-app، یک پیکربندی و ساختاری برای پروژه‌ی ReactJS در نظر گرفته است که در ادامه شرح می‌دهیم. این پیکربندی، شامل پوشه‌های src, public, build خواهد بود)


– فایل public/index.html: وقتی اپلیکیشن استارت شود، این اولین صفحه‌ای خواهد بود که فراخوانی می‌شود. و البته این تنها فایل HTML در کل برنامه خواهد بود! چراکه React، به طور کلی با JSX نوشته می‌شود. این فایل، شامل خط زیر می‌باشد:

این خط خیلی مهم است؛ چرا که تمامی کامپوننت‌های اپلیکیشن، داخل این div بارگزاری خواهند شد. در ادامه با آن بیشتر آشنا خواهید شد.


– فایل src/index.js: این فایل جاوا اسکریپت، مربوط به index.html می‌باشد و شامل کد مهم زیر است:

این خط، در حال گفتن این است که که کامپوننت App، باید به عنصر HTML ای شامل آیدی root می‌باشد تزریق شود. (یا به عبارتی، کامپوننت App، بایستی در عنصر HTML ای که آیدی آن برابر root است، بارگزاری شود)؛ که همان عنصر div موجود در فایل index.html می‌باشد.


– فایل src/index.css: فایل CSS مربوط به index.js


– فایل src/App.js: فایل اسکریپت مربوط به کامپوننت App؛ که کامپوننت اصلی بوده و تمامی کامپوننت‌های دیگر را دربرخواهد گرفت.

فایل src/App.css: فایل CSS مربوط به کامپوننت App


پوشه build: در حالت ساده، وقتی از دستور npm start برای اجرای پروژه استفاده شود، در واقع نسخه‌ی development build نمایش داده می‌شود؛ که همان نسخه‌ی در حال توسعه بوده و بهینه‌شده نیست؛ مثلا فایل‌ها فشرده نشده‌اند و یا اینکه خروجی نهایی گرفته نشده است. اما برای تولید نسخه‌ی production build یا محصول نهایی، بایستی از دستور زیر استفاده شود:

با اجرای این دستور، پوشه‌ی build در مسیر پروژه ایجاد خواهد شد.

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

شما برای اجرای فایل index موجود در build، نیاز خواهید داشت تا serve را نصب کرده باشید: (تنها یک بار به صورت سراسری نصب می‌شود)

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

آدرس‌های مورد نیاز برای مشاهده‌ی پروژه را خواهید دید که می‌توانید آنها را در مرورگر تایپ کنید. (آدرس لوکال به صورت خودکار به کلیپبورد کپی شده است)

برای توقف سرویس، Ctrl+C را در CMD فشار دهید؛ سپس Y را تایپ کرده و Enter را بزنید.
توجه
هیچ الزامی نیست که حتما از create-react-app برای ایجاد پروژه‌ی React استفاده شود؛ اما همانطور که گفته شد، این یک راه‌حل ساده‌ای برای انجام اینکار می‌باشد.

ایجاد کامپوننت (قطعه)

یک کامپوننت در React، یک قابلیت خاصی را انجام می‌دهد. و در واقع، یک اپلیکیشن در React، چیزی جز مجموعه‌ای از قطعات (کامپوننت‌ها = اجزاء) نیست. همچنین، هر کامپوننتی می‌تواند چندین کامپوننت زیرشاخه داشته باشد و همه‌ی آن‌ها می‌توانند با یکدیگر در ارتباط باشند.

شما کامپوننت App را در بالا دیدید، اما اجازه دهید تا یک کامپوننت جدید در React ایجاد کنیم.

داخل پوشه‌ی src، فایلی با نام FirstComponent.js ایجاد کرده و کد زیر را به داخل آن کپی کنید:

نام کامپوننت در اینجا، FirstComponent می‌باشد؛ که به صورت یک کلاس در این فایل تعریف شده است. این کلاس، بایستی از Component موجود در React به ارث رسیده باشد؛ سپس متدی با نام render در آن تعریف خواهد شد که UI کامپوننت را تولید می‌کند.

ورودی props در متد سازنده‌ی کامپونتت‌ها، شامل تمامی پارامترهایی خواهد بود که به کامپوننت ارسال می‌شود. برای مثال، از this.props.displaytext در داخل render استفاده شده است. و همانطور که می‌بینید، متد render یک خروجی JSX برمی‌گرداند. در ادامه خواهید دید که چگونه مقدار displaytext را برای این کامپوننت ارسال می‌کنیم.

JSX

JSX در واقع ترکیب HTML و جاوا اسکریپت است؛ که قدرت زیادی به آن اضافه می‌کند. شما در متد render بالا، یک ثابت به نام element می‌بینید که به صورت زیر می‌باشد:

این کد، یک المنت div با JSX ایجاد کرده و آن را به ثابت element اختصاص می‌دهد. توجه داشته باشید که در JSX، تنها می‌توانید یک المنت اصلی ایجاد کنید و نمی‌توانید برای مثال در کد بالا، پشت div یک div دیگر بنویسید؛ ولی می‌توانید داخل آن هر چقدر که خواستید از المنت‌های بیشتری استفاده کنید. و همچنین، اگر بخواهیم در چند خط بنویسیم، بایستی آن را داخل پرانتز قرار دهیم؛ که در بالا نیازی نبود که اینکار را بکنیم.

در ادامه‌ی کد، شما دستور return را مشاهده می‌کنید که یک JSX برای آن نوشته شده و همچنین ثابت تعریف شده‌ی element و مقدار this.props.displaytext نیز در آن استفاده شده‌اند. برای استفاده از آنها نیز یک براکت باز و بسته اطرافشان قرار گرفته است. (که این همان Expression ها می‌باشد)

استفاده از کامپوننت

اجازه دهید تا از کامپوننتی که ساخته‌ایم در کامپوننت اصلی یعنی App.js استفاده کنیم. بنابراین، فایل App.js را باز کنید. کد آن به صورت زیر خواهد بود: (البته ممکن است در آپدیت‌های جدید تغییر کرده باشد)

بیایید ابتدا این فایل را ساده‌تر کنیم و مواردی که create-react-app برایمان به صورت پیشفرض قرار داده است را حذف کنیم:

بنابراین یک div وجود دارد که از کامپوننت render خارج می‌شود و از کلاس css ای به نام App استفاده می‌کند. توجه داشته باشید که در اینجا از ویژگی class استفاده نمی‌کنیم و از className برای اختصاص کلاس سی‌اس‌اس استفاده شده است.

حالا به صورت زیر، از کامپوننتی که ساخته‌ایم در کامپوننت App استفاده می‌کنیم:

ابتدا کامپوننت را در قسمت بالا import کرده‌ایم تا بتوانیم از آن استفاده کنیم؛ و سپس این کامپوننت همانند یک تگ HTML رفتار خواهد کرد و همانطور که می‌بینید، ویژگی اختصاصی displaytext آن را هم تعیین کرده‌ایم. جذاب نیست؟!

توجه داشته باشید که حرف اول نام کامپوننت را باید با حروف بزرگ بنویسید تا در JSX تشخیص داده شود.

امیدوارم از این آموزش خوشتان آمده باشد. در آینده به موارد بیشتری اشاره خواهیم کرد.

تبلیغات
0
کانال تلگرام فول کده
تبلیغات

درباره نویسنده

هادی اکبرزاده

[ مدیر فول کده ]

علاقه‌مند به اشتراک گذاری اطلاعات در هر زمینه‌ای / برنامه‌نویس / مدیر فول کده

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نظرات ثبت شده بدون دیدگاه