معرفی چند کامپوننت محبوب react

اگه این نوشته رو میخونید به احتمال خیلی زیاد با react  آشنایی دارید ، اما اگه هنوز مقاله آشنایی با reactjs و پا گذاشتن به دنیای reactnative رو نخوندید پیشنهاد میکنم حتما مطالعه کنید . اما در این نوشته قراره یک سری کامپوننت محبوب و کاربردی از ری اکت رو به شما معرفی میکنیم ، البته قبلا هم در چند سری نوشته دیگه در بلاگ سایت مواردی از  کامپوننت های ری اکت رو معرفی کردیم .

اولین مورد Recharts  هستش ، که چارت هایی با استفاده از کامپوننت های ری اکت رو تولید میکنه ، Recharts با عناصر svg ساخته شده و قابلیت تغییر مقیاس رو داره . تقریبا میشه گفت ساخت هر نوع چارتی امکان پذیر هستش .  اگه خواستید میتونید راهنمای ریچارت رو مطالعه کنید و نمونه کد و چارت هارو ببینید .

دومین مورد React DnD نام داره ، شما میتونید محیط های drag and drop رو با استفاده از کامپونت های ری اکت بسازید . این امکان رو هم دارید تا برای هر event هدفی رو تعیین کنید و رابط کاربری فوق العاده ای رو بسازید .

مورد بعدی React Virtualized هستش ، شما میتونید جداول (لیست) های بسیار شکیل و زیبا رو خروجی بگیرید . کاربران میتونند سطر هارو اسکرول کنند و متون خاصی در جدول براشون به نمایش گذاشته بشه ، از طریق این لینک میتونید از راهنما استفاده کنید و همچنین نمونه table هارو ببینید.

چهارمین مورد  Blueprint هست . مجموعه ای از کامپوننت های ری اکت رو در بر داره ، آیکون ها ،دکمه ها ، navigation و … رو دربر داره و شما میتونید متناسب با نیازتون عنصر های موجود رو دستکاری کنید و به یک نتیجه فوق العاده برسید .

مورد بعدی UI Router for React نام داره . مسیر دهی رو بر اساس state برای برنامه اماده میکنه ، زمانی که کاربر در حال گشت و گذار بین صفحات وب سایت شما هست ، برنامه url رو تغییر میده و این به کاربر این اجازه رو میده که هر صفحه رو به صورت مجزا بوک مارک کنه و همچنین سرعت بالا در جابه جایی بین صفحات رو فراهم میکنه .

ششمین مورد به  React-Bootstrap اشاره میکنه . حتما با بوت استرپ آشنایی دارید ، React-Bootstrap به جاوااسکریپت اجازه میده تا رندر کردن صفحه رو در سطحی بالاتر از css و html انجام بده .  اگه علاقه به آشنایی بیشتر دارید میتونید Document رو مطالعه کنید .

مورد بعدی توسط Airbnb  برای ساده کردن مدیریت سیستم طراحی شرکت ساخته شده ،  React Sketch.app ابزار قدرتمند برای ساخت پروتوتایپ ها هست ، استفاده از  React Sketch.app این امکان رو به شما میده تا سند های قابل استفاده مجددی رو که از کامپوننت های ری اکت همراه با  Sketch  استفاده میکنند فراهم کنید . میتونید به این لینک در گیتهاب هم سر بزند .همچنین میتونید ویدئو هفت ثانیه ای زیر رو مشاهده کنید.

هشتمین مورد styled-components هست . این مورد به شما این اجازه رو میده تا کامپوننت های ری اکت رو با استفاده از css آراسته کنید ، styled-components عمل ظاهر سازی توسط css رو حذف میکنه و styling رو سریع تر و ساده تر میکنه .

مورد نهم قراره در مورد Material-UI صحبت کنیم . Material UI با استفاده از مجموعه ای از کامپوننت های ری اکت استفاده از متریال دیزاین گوگل رو همراه با ری اکت رو فراهم میکنه . بسیاری از Buttons ،Badges  ، Cards ، Menus  ،Sliders  و …  در ری اکت که بر مبنای متریال دیزاین نوشته شدن در اختیار شما قرار میگیره . داکیومنتش رو میتونید اینجا ببینید .

آخرین مورد در این نوشته Gatsby.js هست . شما میتونید وب سایت هایی ایستا بسازید . به شما این اجازه رو میده تا داده هارو از منابعی مثل پایگاه داده ، cms خودتون و یا یک فایل سیستمی دریافت کنید . میتونید در داکیومنتش بیشتر در این مورد مطالعه کنید و یاد بگیرید .