سلام دوستان تو این پست می خوایم یادبگیریم چطوری با ری‌اکت یک صفحه Review بسازیم. یک صفحه Review صفحه‌ای که در اون درمورد افراد، مشاغل، محصولات و یا مکان های توریستی یک سری اطلاعات میده مثلا یک شخصی رو با اسم، سن، شغل و یک متن کوتاه درمورد اون شخص یا درمورد کارش معرفی میکنه. ماهم در اینجا می خوایم یک Personal Review Page رو با ری‌اکت پیاده‌سازی کنیم. توجه: خب موضوعی که من برای این صفحه انتخاب کردم Personal Review Page هستش یعنی دیتاها و داده‌ها، باید درمورد اشخاص باشن اگه بخواهیم درمورد یک محصول یا یک مکان Review page بسازیم، باید نوع داده‌ها رو عوض کنیم نه کل برنامه نویسی صفحه رو! برای ساخت این صفحه Review چهار مرحله داریم: ساخت دیتا ( data . js ) ساخت صفحه مرور ( Review . js ) ساخت صفحه اصلی ( App . js ) استایل دهی به صفحات ( index . js ) در ادامه به ترتیب با نحوه ساخت این صفحات و کدنویسیشون آشنا میشیم. اول از همه باید یه برنامه react رو بسازیم به اینصورت که تو آدرس مورد‌نظر در ترمینال مینویسیم: خب دیتای صفحه Review رو به‌صورت آرایه‌ای از آبجکت‌ها تعریف میکنیم به اینصورت که هر عضو آرایه یک آبجکت هست و هر آبجکت ویژگی هایی چون name , age , job , power , image , birthday و متنی ( text ) در‌مورد اون آبجکت به ما میده. دیتای من درمورد سه شخصیت اصلی کارتون PowerPuffGirls هستش که به صورت زیر آوردم: آدرس عکس ها رو در فولدری بنام public که در خارج از src برنامه هست، و در فولدری بنام assets ذخیره کردم. در پایین عکس‌هایی که استفاده کردم رو آوردم شما خودتون میتونیدهرچقدر که خواستین دیتا و اطلاعات به data . js اضافه کنین. خب از این قسمت وارد برنامه نویسی خود صفحه میشیم. قبل اینکه برنامه نویسی رو شروع کنیم، باید react - icons رو از طریق ترمینال نصب کنیم که برای نصب کافیه که در مسیر src پروژه در ترمینال بنویسیم: حال فایل‌های زیر رو به قسمت اول برنامه اضافه میکنیم: یک arrow function داخل متغیر Review تعریف میکنیم و این متغیر رو اکسپورت میکنیم: ادامه کدها رو داخل این متغیر مینویسیم. چون data . js یک آرایه هست پس برای جستجو در آرایه باید از اندیس صفر آرایه شروع کرده و تا اندازه طول آرایه جستجو را ادامه دهد. برای همین با استفاده از هوک useState یک index تعریف می کنیم و مقدار اولیه صفر را به آن می دهیم (یادتون باشه useState رو import کنین " import React , { useState } from " react ) : حال اطلاعات موجود در data [ index ] رو در متغیرهای زیر ذخیره میکنیم: در برنامه Review سه کلید و surprise me تعریف شده که وظایف زیر رو دارن: با کلیک روی کلید ایندکس دیتا یدونه به عقب data ( index - ) بر میگرده و با کلیک روی کلید surprise me به صورت رندوم یکی از افراد data . js رو نشون میده data ( random ) البته index + تا وقتیکه دیتا هست جلو میره و وقتی به انتهای آرایه ی دیتا میرسه باید دوباره به اول آرایه برگرده یعنی بشه index = همچنین وقتی index - میشه تا اندیس باید کاهش پیدا کنه و بعد اندیس صفر باید بشه index = data . length - . بنابراین باید یه تابع برای کنترل index افزایشی یا کاهشی بنام checkNumber بنویسیم. توابع زیر رو برای حالت مذکور پیاده سازی میکنیم: خب حالا رسیدیم به قسمت return تابع اصلی ( Review ) و برگردوندن صفحه‌ی اون فقط کافیه تو ادامه کدهای بالا این کدها رو بهش اضافه کنیم: قسمت Review . js تموم شد. تو App . js فقط کافیه صفحه Review . js که در مرحله ساختیم رو با استفاده از تابع App برگردونیم: . استایل دهی به صفحات ( index . css ) تو این قسمت استایل های صفحه رو مینویسیم: حالا کافیه تو ترمینال در مسیر src برنامه بنویسیم npm start و تامام ) Be happy and enjoy the Life )