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


اگه این نوشته رو میخونید به احتمال خیلی زیاد با react آشنایی دارید ، اما اگه هنوز مقاله آشنایی با reactjs و پا گذاشتن به دنیای reactnative رو نخوندید پیشنهاد میکنم حتما مطالعه کنید . اما در این نوشته قراره یک سری کامپوننت محبوب و کاربردی از ری اکت رو به شما معرفی میکنیم ، البته قبلا هم در چند سری نوشته دیگه در بلاگ سایت مواردی از کامپوننت های ری اکت رو معرفی کردیم .
اولین مورد Recharts هستش ، که چارت هایی با استفاده از کامپوننت های ری اکت رو تولید میکنه ، Recharts با عناصر svg ساخته شده و قابلیت تغییر مقیاس رو داره . تقریبا میشه گفت ساخت هر نوع چارتی امکان پذیر هستش . اگه خواستید میتونید راهنمای ریچارت رو مطالعه کنید و نمونه کد و چارت هارو ببینید .
1 2 3 4 5 6 |
<BarChart width={600} height={300} data={data}> <XAxis dataKey="name" tick={<CustomAxisTick />} /> <YAxis /> <Bar type="monotone" dataKey="uv" fill="#8884d8" shape={<TriangleBar />} /> </BarChart> |
دومین مورد 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 خودتون و یا یک فایل سیستمی دریافت کنید . میتونید در داکیومنتش بیشتر در این مورد مطالعه کنید و یاد بگیرید .
دیدگاهتان را بنویسید