نمونه پروژه‌های ری اکت – کامپوننت‌های React همراه با سورس کد

با سلام و عرض ادب خدمت کاربران گرامی، کتابخانه ری اکت یکی از پر طرفدارترین کتابخانه هایی است که برای برنامه نویسی کلاینت ساید در این روزها مورد توجه توسعه دهندگان است. پروژه های کوچک و بزرگ بسیاری در سراسر جهان توسط ReactJS توسعه داده شده اند که اغلب آنها رایگان و براحتی در دسترس کاربران است. سورس کد آنها در Github موجود است و می توان اسکریپت پروژه ها را دانلود کرد و در سیستم لوکال خود به بررسی و توسعه آن بپردازیم. در این مقاله قصد داریم چند نمونه از بهترین وب اپلیکیشن ها و کامپوننت هایی که توسط کتابخانه ReactJS نوشته شده اند را معرفی و بررسی کنیم.

پروژه اول: (Todo List)

مشاهده دمو  |  مشاهده گیتهاب

شرح: یک وب اپلیکیشن ساده در زمینه تعریف تسک (Todo List App). هیچ دیتابیس یا کد بک اند ندارد.

نحوه راه اندازی پروژه در لوکال:

• Clone گرفتن از Repository پروژه در گیت هاب و انتقال مسیر جاری توسط دستور cd به روت پروژه
• اجرای دستور yarn install به منظور نصب وابستگی ها یا dependencies
• اجرای دستور yarn start روی فولدر پروژه برای راه اندازی سرور لوکال در حالت development

اپلیکیشن بطور پیش فرض در آدرس http://localhost:3000 اجرا خواهد شد.

Building:

برای build گرفتن از منابع استاتیک (static assets) باید دستور yarn build را روی پروژه اجرا کنید. با اینکار، یک فولدر بنام build در پروژه ایجاد می شود که شامل تمام فایل ها و فولدرهای static برنامه خواهد بود.

Testing:

برای تست برنامه، ابتدا دستور yarn start را اجرا کنید تا پروژه در development mode اجرا شود. سپس دستور yarn cypress:run را برای تست End to End اجرا کنید.

امکانات:

عنوان تسک را در محل مربوطه تایپ کرده و دکمه Enter را بزنید (یا روی دکمه مقابل input کلیک کنید) تا یک تسک به لیست تسک ها اضافه شود. با زدن تیک کنار هر تسک، می توانید آن را بعنوان یک تسک تکمیل شده نشانه گذاری کنید. یا می توانید تسک موردنظر را با کلیک روی آیکون سطل زباله از لیست حذف کنید.

پروژه دوم: (SlideShow)

مشاهده دمو  |  مشاهده گیتهاب

شرح: امکانات وب اپلیکیشن Carousel: زوم تصاویر، کنترل تصاویر قبل و بعد با Drag کردن موس و همچنین با کلیدهای keyboard، قابلیت بارگذاری تنبل یا Lazy Loading، نمایش تصاویر بندانگشتی یا Thumbnail و…

نصب پکیج:

توسط npm:

npm install --save react-gallery-carousel

توسط yarn:

yarn add react-gallery-carousel

نحوه استفاده:

import React from 'react'; 
import Carousel from 'react-gallery-carousel'; 
import 'react-gallery-carousel/dist/index.css'; 

const App = () => { 
    const images = [900, 800, 700, 600, 500].map((size) => 
    ({ 
        src: `https://placedog.net/${size}/${size}` 
    })); 
    return (<Carousel images={images} />); 
}; 

export default App;

امتیاز در LightHouse:

توسعه در لوکال:

برای توسعه اپلیکیشن Carousel در سرور لوکال خود، مراحل زیر را انجام دهید:

• در cmd یا ترمینال، به فولدر /src رفته و دستور yarn start را اجرا کنید.
• در یک تب دیگر در ترمینال، مطابق دستورات زیر به مسیر /example رفته و yarn start را اجرا کنید:

  cd example
  yarn start

پروژه سوم: (VideoPlayer)

مشاهده دمو  |  مشاهده گیتهاب

شرح: یک پخش کننده ویدیو یا video player توسعه داده شده با ReactJS و قدرت گرفته از کتابخانه VideoJS

نصب پکیج:

توسط npm:

npm -i lion-player

توسط yarn:

yarn add lion-player

تنظیمات:

تعریف دستور زیر در ابتدای صفحه:

import { LionPlayer } from 'lion-player';

و فراخوانی فایل استایل آن در صفحه به دو روش:

• استفاده از تگ link:

<link href="https://unpkg.com/lion-player@1.1.4/dist/lion-skin.min.css" rel="stylesheet">  

• استفاده از دستور import:

import 'lion-player/dist/lion-skin.min.css';

نحوه استفاده:

نحوه تعریف دستورات لازم جهت استفاده از lion-player:

import { LionPlayer } from 'lion-player';

const SOURCES = [
  {
    src: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/m3u8s/105560.m3u8',
    type: 'application/x-mpegURL',
  },
  {
    src: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/mpds/105560.mpd',
    type: 'application/dash+xml',
  }
];

export default function Player() {
  return (
    <LionPlayer sources={SOURCES} autoplay="muted" />
  );
}

پروژه چهارم: (Animated Button)

مشاهده دمو  |  مشاهده گیتهاب

شرح: نمایش دکمه های سه بعدی و انیمیشنی زیبا به همراه نوار پیشرفت (progress bar)

کامپوننت Reactive Button جایگزین مناسبی است برای دکمه های خسته کننده و کلاسیک ری اکت. دکمه هایی که توسط کامپوننت Reactive طراحی می شوند در رنگ ها و طرح های مختلف ارائه شده که کاربر پسند و جذاب هستند.

چند ویژگی کامپوننت Reactive Button:

• کامپوننت سبک و کم حجم (کمتر از 20 کیلوبایت)
• سه بعدی
• انیمیشن دار
• پشتیبانی از آیکون
• راحتی استفاده در پروژه
• بدون dependency
• توسعه آسان

نصب کامپوننت:

توسط npm:

npm install reactive-button

توسط yarn:

yarn add reactive-button

نحوه استفاده:

برای مشاهده داکیومنت کامل کامپوننت Reactive به مستندات آن مراجعه شود.

در مثال زیر از این دکمه ها در یک تسک ناهمگام یا Async استفاده کرده ایم. وقتی روی دکمه کلیک می شود، یک تسک ناهمگام مانند form submit یا fetch data شروع به اجرا و پردازش می شود و پس از پایان تسک، یک پیغام موفقیت آمیز نمایش داده می شود.

• State با رشته ‘idle’ مقداردهی اولیه شده و بعنوان props در ReactButton مورد استفاده قرار گرفته است.
• وقتی دکمه کلیک می شود، مقدار فعلی state توسط متد setState به ‘loading’ تغییر می کند.
• وقتی تسک تکمیل شد، بر اساس وضعیت تسک می توان state را به یکی از مقادیر ‘error’ یا ‘idle’ یا ‘success’ آپدیت کرد.

استفاده محدود:

import React, { useState } from 'react';
import ReactiveButton from 'reactive-button';

function App() {
    const [state, setState] = useState('idle');

    const onClickHandler = () => {
        setState('loading');
        setTimeout(() => {
            setState('success');
        }, 2000);
    }

    return (
        <ReactiveButton
            buttonState={state}
            onClick={onClickHandler}
        />
    );
}

export default App;

استفاده کامل:

import React, { useState } from 'react';
import ReactiveButton from 'reactive-button';

function App() {
    const [state, setState] = useState('idle');

    const onClickHandler = () => {
        setState('loading');
        setTimeout(() => {
            setState('success');
        }, 2000);
    }

    return (
        <ReactiveButton
            buttonState={state}
            onClick={onClickHandler}
            color={'primary'}
            idleText={'Button'}
            loadingText={'Loading'}
            successText={'Success'}
            errorText={'Error'}
            type={'button'}
            className={'class1 class2'}
            style={{ borderRadius: '5px' }}
            outline={false}
            shadow={false}
            rounded={false}
            size={'normal'}
            block={false}
            messageDuration={2000}
            disabled={false}
            buttonRef={null}
            width={null}
            height={null}
            animation={true}
        />
    );
}

export default App;

نکته: برای تسک های همگام یا sync نیازی به تعریف state و setState نمی باشد و می توانید بصورت ساده از دکمه استفاده کنید.

پروژه پنجم: (React Google Calendar)

مشاهده دمو   |  مشاهده گیتهاب

شرح: یک کامپوننت ریکتی که رویدادهای ثبت شده در سرویس Google Calendar را توسط API دریافت کرده و نمایش می دهد. می توان رویدادها را حذف کرد یا تغییر داد. تمام رویدادها در محدوده زمانی یا Time Zone کاربر نمایش داده می شود.

دیزاین این تقویم رویدادی از این سورس کد و تقویم گوگل الهام گرفته شده است و از متریال دیزاین (Material Design) استفاده می کند.

نصب کامپوننت:

1. npm install --save react react-dom @emotion/react
2. npm install --save @ericz1803/react-google-calendar

نحوه استفاده:

ابتدا API را از Google Developer دریافت کنید. سپس آیدی سرویس تقویم گوگل را از Google-Calendar دریافت کنید. چیزی شبیه عبارت زیر خواهد بود:

09opmkrjova8h5k5k46fedmo88@group.calendar.google.com

پس از مراجعه به سرویس تقویم گوگل، در منوی Setting بدنبال لینک Integrate بگردید. مطابق تصویر زیر:

مثال اولیه و basic:

import React from "react";
import Calendar from "@ericz1803/react-google-calendar";

const API_KEY = "YOUR_API_KEY";
let calendars = [
  {calendarId: "YOUR_CALENDAR_ID"},
  {
    calendarId: "YOUR_CALENDAR_ID_2",
    color: "#B241D1" //optional, specify color of calendar 2 events
  }
];

class Example extends React.Component {
  render() {
    return (
      <div>
        <Calendar apiKey={API_KEY} calendars={calendars} />
      </div>
    )
  }
}

سفارشی سازی تقویم:

کامپوننت React Google Calendar این امکان را فراهم می کند که رنگ رویدادها را مطابق دلخواه خود تعریف کنیم. برای شخصی سازی سایر المان های تقویم، مانند حاشیه (border) یا رنگ کل تقویم، می توان استایل موردنظر را در آبجکت styles تعریف کرد. هر استایلی که در آبجکت styles تعریف می شود باید به شکل object باشد. در لیست زیر، کلیدهای آبجکت styles را مشاهده می کنید:

calendar
day
today
tooltip
event
eventText
eventCircle
multiEvent

مثالی از کامپوننت شخصی سازی شده:

import React from "react";
import Calendar from "@ericz1803/react-google-calendar";
import { css } from "@emotion/react";

const API_KEY = "YOUR_API_KEY";
let calendars = [
  {calendarId: "09opmkrjova8h5k5k46fedmo88@group.calendar.google.com", color: "#B241D1"}, //add a color field to specify the color of a calendar
  {calendarId: "hkr1dj9k6v6pa79gvpv03eapeg@group.calendar.google.com"}, //without a specified color, it defaults to blue (#4786ff)
  {calendarId: "rg4m0k607609r2jmdr97sjvjus@group.calendar.google.com", color: "rgb(63, 191, 63)"} //accepts hex and rgb strings (doesn't work with color names)
];

let styles = {
  //you can use object styles (no import required)
  calendar: {
    borderWidth: "3px", //make outer edge of calendar thicker
  },
  
  //you can also use emotion's string styles
  today: css`
   /* highlight today by making the text red and giving it a red border */
    color: red;
    border: 1px solid red;
  `
}

class Example extends React.Component {
  render() {
    return (
      <div>
        <Calendar apiKey={API_KEY} calendars={calendars} styles={styles} />
      </div>
    )
  }
}

پروژه ششم: (Multi-Select)

مشاهده دمو   |  مشاهده گیتهاب

شرح: یک کامپوننت ریکت که قابلیت انتخاب چند آیتم را از بین لیستی از آیتم ها را دارد و از کامپوننت Material-UI Auto Complete استفاده می کند.

نحوه استفاده:

برای استفاده از کامپوننت، تعریف props های value و options و onChange و label و labelPlural الزامی است. مطابق کد زیر:

<MultiSelect
  value={value} // From useState
  onChange={setValue} // From useState
  options={['The Shawshank Redemption', 'The Godfather', ...]}
  label="Movie"
  labelPlural="Movies"
/>

options props:

ساده ترین مقدار برای options آرایه ای از رشته ها می باشد. اما اگر می خواهید کنترل بیشتری روی مقادیر انتخاب شده در لیست بازشو داشته باشید، باید آبجکت Option را مانند زیر تعریف کنید:

type Option<T = string> = {
  value: T;
  label: string;
  disabled?: boolean;
};

value و onChange:

• value باید یک آرایه از T باشد. در حالت multi-select
• در حالت single-select باید فقط T یا null باشد.
• اولین پارامتر onChange هم مطابق value مقداردهی می شود.

پروژه هفتم: (React-Anime)

مشاهده دمو   |  مشاهده گیتهاب

شرح: یک کتابخانه ساده انیمیشن برای ری اکت که با استفاده از کتابخانه anime.js ایجاد شده است. فقط کافیست کامپوننت <Anime> را تعریف کنید و هر آنچه را که می خواهید انیمیشن داشته باشد در داخل این کامپوننت قرار دهید.

نصب کامپوننت:

npm i react-anime -S

ویژگی های کامپوننت:

• براحتی می توان با تعریف تگ <Anime> در داخل تگ Anime دیگر، انیمیشن های تودرتو را Nested تعریف کرد.
• انیمیشن ها می توانند به مقادیر state واکنش نشان دهند.
• می توان از delay prop برای آبشاری کردن انیمیشن ها و ترتیبی کردن آنها استفاده کرد.
• و…

پروژه هشتم: (React-Tip)

مشاهده دمو   |  مشاهده گیتهاب

شرح: کامپوننتی برای نمایش tooltip در اپلیکیشن های ری اکت بر اساس ballon.css

نصب کامپوننت:

npm install -S @jswork/react-tip

شامل سه property زیر است:

• className: جهت تعریف کلاس اضافی برای کامپوننت
• title: متن داخل tooltip
• placement: محل قرارگیری و نمایش تولتیپ. که یکی از این مقادیر است: ‘up’,’down’,’left’,’right’,’up-left’,’up-right’,’down-left’,’down-right’

نحوه استفاده:

1- import css:

// or use sass
@import "balloon-css";
@import "~@jswork/react-tip/dist/style.scss";

// customize your styles:
$react-tip-options: ()

2. import js:

import ReactDemokit from '@jswork/react-demokit';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactTip from '@jswork/react-tip';
import './assets/style.scss';

class App extends React.Component {
  state = {
    placements: [
      'up',
      'down',
      'left',
      'right',
      'up-left',
      'up-right',
      'down-left',
      'down-right'
    ]
  };

  render() {
    const { placements } = this.state;
    return (
      <ReactDemokit
        className="p-3 app-container"
        url="https://github.com/afeiship/react-tip">
        {placements.map((item) => {
          return (
            <ReactTip key={item} title={`abc.com - ${item}`} placement={item}>
              <button className="button is-fullwidth is-info">Abc.com - {item}</button>
            </ReactTip>
          );
        })}
      </ReactDemokit>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

پروژه نهم: (Supercons)

مشاهده دمو   |  مشاهده گیتهاب

شرح: مجموعه ای از آیکون های open source ری اکت.

نحوه نصب:

توسط npm:

npm i supercons

توسط yarn:

yarn add supercons

نحوه استفاده:

import React from 'react'
import Icon from 'supercons'

export default () => (
  <div style={{ color: 'magenta' }}>
    <Icon glyph="like" size={128} />
    <Icon glyph="cloud" size={32} />
  </div>
)

توسعه کامپوننت:

از repository آن در گیتهاب clone گرفته و به فولدر آن بروید:

git clone https://github.com/lachlanjc/supercons.git
cd supercons

سپس باید dependency های پکیج را با دستور npm install نصب کنید.

پکیج را با دستور زیر بصورت لوکال اجرا کنید:

yarn run dev

و پس از انجام تغییرات خود روی آیکون ها، لایبرری را build کنید:

yarn run prepare

پروژه دهم: (AkarIcons)

مشاهده دمو   |  مشاهده گیتهاب

شرح: مجموعه ای از آیکون های کاربردی و جذاب برای طراحان و توسعه دهندگان اپلیکیشن های react

نحوه نصب:

npm install --save akar-icons

نحوه استفاده:

برای استفاده از آیکون های Akar-Icons کافیست کامپوننت آن را مطابق دستورات زیر import کرده و آیکون مورد نظر را در متد render فراخوانی کنید. در کد زیر، ما فقط آیکون های star و arrowRight و linkOut را import کرده ایم:

import { ArrowRight, Star, LinkOut } from 'akar-icons';

const MyComponent = () => {
  return (
    <div>
      <ArrowRight />
      <Star />
      <LinkOut />
    </div>
  );
};

export default MyComponent;

این آیکون ها می توانند props های متنوعی دریافت کنند. مانند color و size

<Star color="yellow" size={32} strokeWidth={3} />

همچنین این امکان را داریم که کل آیکون های لایبرری را import کنیم. به صورت زیر:

import * as Icon from 'akar-icons';

const MyComponent = () => {
  return <Icon.ArrowRight />
};

export default MyComponent;

پروژه یازدهم: (React-PDF)

مشاهده دمو   |  مشاهده گیتهاب

شرح: برای تولید فایل های pdf در اپلیکیشن ری اکت، در مرورگر و سرور.

نحوه نصب:

از طریق yarn:

yarn add @react-pdf/renderer

از طریق npm:

npm install @react-pdf/renderer --save

نحوه استفاده:

قدم اول (ایجاد داکیومنت PDF):

import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4'
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1
  }
});

// Create Document Component
const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);

قدم دوم (انتخاب محل رندر شدن فایل):

*در یک فایل:

import ReactPDF from '@react-pdf/renderer';

ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);

*در یک Stream:

import ReactPDF from '@react-pdf/renderer';

ReactPDF.renderToStream(<MyDocument />);

*در DOM:

import React from 'react';
import ReactDOM from 'react-dom';
import { PDFViewer } from '@react-pdf/renderer';

const App = () => (
  <PDFViewer>
    <MyDocument />
  </PDFViewer>
);

ReactDOM.render(<App />, document.getElementById('root'));

پروژه دوازدهم: (Admin-Dashboard)

مشاهده دمو   |  مشاهده گیتهاب

شرح: تمپلیت متن باز (open source) داشبورد مدیریت برای وب اپلیکیشن های ریکت که بر اساس آخرین نسخه فریم ورک بوت استرپ (Bootstrap 5) طراحی شده است. در Volt Dashboard بیش از 100 المان رابط کاربری (UI) را برای کامپوننت های ریکت طراحی شده است.

نحوه نصب:

1- مراجعه به سایت Themesberg و ثبت نام رایگان در آن (یا colne کردن repository آن در Github)

2- دانلود کردن فایل zip پروژه

3- اجرای دستور yarn install یا npm install در فولدر اصلی پروژه (به منظور نصب package های لازم)

4- در نهایت اجرای پروژه توسط دستور yarn start در لوکال هاست

نحوه استفاده:

به داکیومنت سایت Themesberg مراجعه شود.

پروژه سیزدهم: (Magic-Paint)

مشاهده دمو   |  مشاهده گیتهاب

شرح: وب اپلیکیشن نقاشی یا paint پیاده سازی شده توسط ReactJS و با استفاده از تکنولوژی های زیر:

Canvas API و custom hooks و font awesome

امکانات:

برخی از ابزارهای وب اپلیکیشن React Magic Paint:

Brush preview (color and size)
Standard solid color brush
Eraser
Color picker
Image downloader (download images as png)
Manual brush size control
Magic brush color saturation and lightness controls

پروژه چهاردهم: (Tooltip-Popover)

مشاهده دمو   |  مشاهده گیتهاب

شرح: هوک react-laag می تواند المان های UI مانند TOOLTIP و POPOVER را موقعیت دهی کند و بطور دقیق مشخص کند کجا نمایش داده شود.

ویژگی ها:

• حجم بسیار کم: فقط 8 کیلوبایت. بصورت فشرده (minify شده)
• مدیریت و کنترل کامل روی موقعیت نمایش المان های رابط کاربری اپلیکیشن
• کارایی (performance) بالا
• و…

نحوه نصب:

توسط npm:

npm install react-laag

توسط yarn:

yarn add react-laag

نحوه استفاده:

import * React from "react";
import { useLayer, useHover, Arrow } from "react-laag";

function Tooltip({ children, content }) {
  const [isOver, hoverProps] = useHover();

  const {
    triggerProps,
    layerProps,
    arrowProps,
    renderLayer
  } = useLayer({
    isOpen: isOver
  });

  return (
    <>
      <span {...triggerProps} {...hoverProps}>
        {children}
      </span>
      {isOver &&
        renderLayer(
          <div className="tooltip" {...layerProps}>
            {content}
            <Arrow {...arrowProps} />
          </div>
        )}
    </>
  );
}

فراخوانی کامپوننت:

const someContent = (
  <div>
    When you hover <Tooltip content="I'm a tooltip!">this</Tooltip> word, you
    should see a tooltip
  </div>
);

پروژه پانزدهم: (UI-Library)

مشاهده دمو   |  مشاهده گیتهاب

شرح: یک کتابخانه رابط کاربری است که بر اساس Figma Design طراحی شده و برای وب اپلیکیشن های ریکت مناسب می باشد.

نحوه نصب:

توسط npm:

npm i sonwan-ui

توسط yarn:

yarn add sonwan-ui

نحوه استفاده:

ایمپورت لایبرری:

import "sonwan-ui/build/style.min.css";
import SonWan from "sonwan-ui";

استفاده در کامپوننت:

const { Input, Switch, Card, CardItem, ListItem } = SonWan;
return (
  <>
    <Input placeholder="Search In Codesandbox" />
    <Card>
      <CardItem
        title="Yuzuha Usagi"
        subtitle="0821 - 7654 - 3210"
      />
    </Card>
  </>
);

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