توسعه وب اپلیکیشن با ReactJS

در این مقاله، شما را با ایجاد یک برنامه وب React JS از ابتدا راهنمایی می کنیم.Instalar (Node.js، NPM، NPX)در این مرحله باید node.js را روی سیستم خود نصب کنید. در مطلب قبلی توضیح داده شد، اگر فراموش کردید می توانید اینجا بخوانید.شاید متوجه شده باشید که تفاوت بین NPM و NPX چیست؟NPM: Node Package Manager همانطور که از نام کامل آن پیداست، شما هر بسته ای را که می خواهید با NPM نصب می کنید، مانند npm نصب هر بسته.NPX : node package clear ابزار اجرای بسته با این دستور یکی دیگر از مزایای مهم Npx امکان اجرای بسته ای است که نصب نشده است، به عنوان مثال npx nisi-package.ساخت پروژهپس از نصب و اجرای NodeJS، ترمینال (CMD) را در پوشه ای که می خواهید پروژه ایجاد کنید باز کنید و دستور زیر را وارد کنید:npx create-react-app my appاین را هم به شما بگویم که my-app نام پروژه شماست، می توانید هر نامی که می خواهید بنویسید.بعد از دستور بالا به پوشه ایجاد شده رفته و اولین دستور npm را در آن پوشه اجرا کنید. این دستور یک برنامه Node.js را اجرا می کند.به طور خودکار در مرورگر شما نمایش داده می شود. اگر نمایش داده نشد http://localhost:3000/ را به صورت دستی در مرورگر خود وارد کنید. اگر مراحل درست باشد، باید نتیجه را مطابق شکل زیر مشاهده کنید.در پوشه پروژه خود، باید پوشه و فایل های پروژه را مانند تصویر زیر اضافه کنید.یک بخش ایجاد کنیدیکی از بزرگترین مزیت های React این است که می توانید از کامپوننت هایی استفاده کنید که به شما این امکان را می دهد که به راحتی رابط های کاربری پیچیده را تجزیه کنید، به عنوان مثال می توانید یک صفحه را به چند قسمت تقسیم کنید، یک قسمت اصلی و یک قسمت پاورقی.خوب حالا یک فایل دستی به نام کامپوننت در فایل SRC ایجاد می کنیم و تمام کامپوننت ها را در آن قرار می دهیم.آیا می خواهید یک فروشگاه بزرگ مانند اینترنت داشته باشید؟ما حرفه ای ترین فروشگاه اینترنتی را برای شما طراحی می کنیم.برای ساختن یک عنصر می توانید این کار را به دو صورت انجام دهید.صبر کنیک فایل به نام js در پوشه کامپوننت ایجاد کنید.دارای ترمینال (cmd)برای این کار به پوشه مورد نظر رفته و دستور زیر را وارد کنید.npm install-save-dev create-react-component-foldernpx crcf फुटरفوتر نام کامپوننتی است که با استفاده از دستور بالا ایجاد کردم، همچنین می توانید به جای فوتر نام کامپوننت خود را مشخص کنید و پس از زدن ENTER ساختار شما به این شکل در می آید.داخل پوشه کامپوننتدر هر جزءاستفاده از قطعاتبرای استفاده از ویژگی ها، باید علامت گذاری کنید:ngimpor Piedon './components/footer/footer';در کامپوننت اصلی، کامپوننت app.js، شامل یک جزء در return() است که در زیر نشان داده شده است.واکنش را از \ 'react \' وارد کنید.وارد کردن آرم از \'./logo.svg\'; وارد کردن هدر از \'./App.css\';\'./components/header/header\';وارد کردن پاورقی از \'./components/footer/footer\'; وارد کردن پاورقی اصلی از \'./components/main/main\';تابع تابع () {بازگشت (|عنوان<فوتر/>))صادرات برنامه پیش فرض؛پیش نویس را فعلا منتشر کنیدپس از نوشتن کد باید npm را در پوشه cmd شروع کنید و خروجی زیر در مرورگر شما نمایش داده می شود.در هر واحدانواع تجهیزاتهر کامپوننت دارای یک فایل css است که در آن می توانید سبک های خاص آن کامپوننت را اعمال کنید. برای اینکه کامپوننت‌ها بتوانند از سبک خود استفاده کنند، کد 'import'./component.css را به فایل component.js در بالای صفحه اضافه کنید.برای افزودن کلاس، باید از کلمه کلیدی className استفاده کنیدمدیراستفاده از Semantic UI React در این پروژهSemantic UI React یک کتابخانه قدرتمند است که توسط شرکت هایی مانند آمازون - نتفلیکس - مایکروسافت در پروژه های خود استفاده می شود. این کتابخانه حاوی لیستی از اجزای React است. در این بخش می‌توانید موارد مفید زیادی را مشاهده کنید، کتابخانه‌هایی مانند نوار برنامه، تکمیل خودکار، نشان‌ها، دکمه‌ها، کارت‌ها، جعبه‌های محاوره‌ای، نمادها، منوها، اسلایدرها و موارد دیگری که می‌توانید در React ببینید.برای افزودن این کتابخانه باید دستور زیر را در پوشه اصلی پروژه قرار دهید تا بسته آن در بسته های پروژه دانلود شود.واکنش UI معنایی را اضافه می کند$ رشته semantic-ui-css را اضافه کنیدپس از افزودن پکیج، می توانید از تمام اجزای آماده آن در پروژه خود استفاده کنید، برای مثال می خواهیم یک دکمه معنایی به پروژه اضافه کنیم، برای این کار شما کد را به کامپوننت مورد نظر اضافه کرده و از آن در render() استفاده می کنید.