ایجاد نوار پیشروی در React — از صفر تا صد

آیا تا کنون در موقعیتی بوده‌اید که بخواهید یک نوار پیشروی یا Progress Bar در پروژه ری‌اکت داشته باشید، اما نتوانسته‌اید منابع ساده‌ای برای راهنمایی در مورد اجرای صحیح آن بیابید؟ در این مقاله بدون نیاز به نصب هیچ کتابخانه‌ای، همه مواردی که برای ایجاد یک نوار پیشروی در ری‌اکت مورد نیاز است را توضیح می‌دهیم.

گام 1: ایجاد یک فایل کامپوننت جدید و تنظیم ایمپورت‌های مناسب

باید مطمئن شوید که ایمپورت‌های ری‌اکت و styled-components را گنجانده‌اید، زیرا در سراسر این فرایند به آن‌ها نیاز خواهیم داشت. همچنین متد render و return را در کامپوننت کلاس بگنجانید.

گام 2: ایجاد نوار پیشروی در کامپوننت‌های HTML

شما باید دو div بسازید. یکی div بیرونی و دیگری div درونی است. div بیرونی کانتینر نوار پیشروی خواهد بود و div درونی با کانتینر به صورت گام به گام پر می‌شود تا مرحله کنونی کاربر را در اپلیکیشن نمایش دهد. این div-ها می‌توانند به صورت const-هایی بین خطوط import و خط اولیه class ProgressBar extends Component ایجاد شوند. این همان جایی است که از ایمپورت styled-components استفاده می‌کنیم.

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

کلیک کنید

لازم به ذکر است که استفاده از بک‌تیک به این دلیل است که ما از «لفظ-های قالبی» (template literal) برای ارسال عبارتی استفاده می‌کنیم که div درونی ProgressInTracker را ردگیری می‌کند. شما باید برخی استایل‌بندی‌های عمومی به این div-ها اضافه کنید تا با یا بدون پر شدن div درونی ببینیم چه اتفاقاتی می‌افتد. برای این که همه چیز ساده‌تر بماند، هر بار بر روی یک div متمرکز می‌شویم.

Div بیرونی

ما نام div بیرونی خود را Tracker تعیین کرده‌ایم. زمانی که این div ایجاد شده و استایل‌بندی شود، می‌توانید از آن در بخش‌های render و return فایل ProgressBar استفاده کنید. همچنین می‌توانید کامپوننت ProgressBar را در فایل App اصلی در هر دو بخش imports در render و همچنین بخش return ایمپورت کنید. اینک می‌توانید یک نوار روی صفحه ببینید:

Div درونی

ما نام این div درونی را ProgressInTracker گذاشته‌ایم. این div عرض خود را بر مبنای درصدی که به صورت یک prop از فایل APP اصلی ارسال شده تعیین می‌کند. ارتفاع باید 100 درصد کانتینر والد باشد و باید یک رنگ متضاد با رنگ div بیرونی انتخاب کنید. شعاع حاشیه را کمی کمتر از div بیرونی تنظیم کرده‌ایم و یک انیمیشن نیز روی width تعیین کرده‌ایم تا همه چیز روان به نظر برسد. در ادامه div درونی را به تگ‌های Tracker که قبلاً تنظیم کرده‌ایم می‌فرستیم و درصد را 25 تعیین می‌کنیم تا مطمئن شویم که همه چیز به درستی کار می‌کند.

گام 3: محاسبه پیشروی

اکنون که چارچوب کلی نوار پیشروی ایجاد شده است، باید شروع به کدنویسی دریافت دستورالعمل میزان پر شدن div درونی بکنیم. به فایل APP اصلی (یا هر جایی که کامپوننت ProgressBar از آنجا ایمپورت شده) بازگردید و یک حالت اولیه برای درصد div بیرونی تعیین کنید. حالت را به کامپوننت ProgressBar در بخش render و return ارسال کنید.

به فایل کامپوننت ProgressBar بازگردید تا بتوانید درصد را به صورت props به بخش‌های رندر و بازگشتی ProgressInTracker ارسال کنید.

گام 4: کنترل کردن پیشروی

در فایل APP اصلی باید یک دکمه طراحی کنیم تا زمانی که نوار پیشروی شروع به پر شدن می‌کند را به وسیله تابع onClick کنترل کنیم. درون تابع onClick باید حالت درصد را برابر با حالت اولیه + X (یعنی مقداری که با هر بار کلیک روی دکمه می‌خواهید نوار پیشروی کند) تنظیم کنید. ما مقدار 25 را برای X تنظیم کرده‌ایم تا کاربر با 4 بار کلیک بتواند آن را تکمیل کند. div درونی باید این مقدار تعریف شده را افزایش دهد.

گام 5: مدیریت خطا

ممکن است کاربر پس از پر شدن نوار پیشروی همچنان به کلیک کردن ماوس ادامه دهد و از این رو باید مطمئن شویم که نوار پیشروی هرگز از عرض کانتینر والد خود تجاوز نمی‌کند. در فایل ProgressBar باید یک تابع جدید بسازیم که این محاسبه ریاضی را برای ما انجام دهد:

این تابع را به کامپوننت ProgressInTracker ارسال می‌کنیم به طوری که مقدار minimum برابر با 0 باشد، مقدار value درصدی است که با هر بار کلیک کاربر افزایش می‌یابد و مقدار بیشینه آن 100 است.

بدین ترتیب نوار پیشروی ما تکمیل می‌شود. نکته دیگری که باید اشاره کنیم این است که می‌توانید یک دکمه «Previous» نیز اضافه کنید تا نوار پیشروی قابلیت کاهش نیز داشته باشد. بدین منظور باید یک دکمه دیگر برای کاهش اضافه کنید. برای انجام این کار گام 4 راهنما را تکرار کنید. یک تابع مشابه به این دکمه بدهید که با هر بار کلیک کاربر مقدار مربوطه کاهش یابد.

اینک شما یک نوار پیشروی کاملاً عملیاتی دارید و می‌توانید آن را در پروژه یا اپلیکیشن خود به کار بگیرید تا کارهای کاربر سازمان‌یافته مانده و از اتفاقاتی که می‌افتد مطلق باشد.

فیلم مجموعه آموزش جاوا اسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌‌های JavaScript (جاوا اسکریپت)
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش مقدماتی فریمورک React Native برای طراحی نرم افزارهای اندروید و iOS با زبان جاوا اسکریپت
• ۱۰ نکته و ترفند برای بهبود برنامه نویسی React — راهنمای کاربردی
• ۵ ابزار برای تسریع فرایند توسعه در React — راهنمای کاربردی

==