10 راه برای سرعت بخشیدن به توسعه React

از آنجایی که که من نوشتن برنامه‌های React را دوست دارم، ترجیح می‌دهم چند ساعت زودتر کارم را تمام کنم تا بتوانم وقت خود را در بیرون از خانه و یا در یک بازی ویدیویی سپری کنم. به همین خاطر در این مقاله ده روش برای سرعت بخشیدن به توسعه برنامه‌های React آورده شده است.

1. از فریمورک استفاده کنید

فریمورک‌ها آزادی را از توسعه دهنده می‌گیرند. شما تصمیمات کمتری دارید زیرا هزاران توسعه دهنده متخصص و برجسته آنها را برای شما ساخته‌اند. حداقل از هر ده تصمیم نه مورد بهتر از تصمیمی است که شما می‌گیرید. بنابراین برای صرفه جویی در زمان و نوشتن کدهای سازگارتر و پایدارتر، نقشه راه فریمورک تعیین شده را دنبال کنید.

فریمورک React مورد علاقه من Next.js است. به این دلیل که می‌توان از SSR، مسیریابی داخلی، تقسیم خودکار کدها، پشتیبانی از CSS-in-JS و موارد دیگر استفاده کرد. حتی می‌توانید lambdas بنویسید و منطق تجاری (مانند تایپ‌ها و اعتبارسنجی) را با کد سمت کلاینت خود به اشتراک بگذارید. اگر یک برنامه Next.js را در Vercel میزبانی می‌کنید، فقط با پوش کردن به گیت هاب می‌توانید یک برنامه رایگان و بی نهایت مقیاس پذیر را به کار بگیرید.

فریمورک‌های عالی دیگر می‌توانند Gatsby.js و Remix باشند.

حتی اگر تصمیم دارید از فریمورک استفاده نکنید، حداقل باید از یک مولد boilerplate مانند create-react-app استفاده کنید.

2. از ESLint استفاده کنید

احتمال می‌دهم که در حال حاضر از ESLint استفاده می‌کنید. هیچ بهانه‌ای برای استفاده از کد فوق العاده قابل تنظیم که هنگام اشتباه مرتب به شما هشدار می‌دهد وجود ندارد. دو افزونه ESLint وجود دارد که به ویژه برای React مفید هستند (و من می‌گویم ضروری است):

• eslint-plugin-react
• eslint-plugin-jsx-a11y

3. از Prettier استفاده کنید

همانند ESLint می‌توانید از Prettier استفاده کنید. Prettier با اکثر ویرایشگرها ادغام می‌شود تا به صورت خودکار کد شما را در قالب بندی کند و از یک سبک سازگار بهره‌مند کند.

4- از تکمیل خودکار با هوش مصنوعی استفاده کنید

امیدوارم سه مورد اول تعجب آور نباشد. اگر در سال 2020 توسعه دهنده جاوااسکریپت باشید، استفاده از یک فریمورک، ESLint و Prettier برای شما کافی است. مورد بعدی هنوز جا نیفتاده است. این ابزار محبوب من است که کمک می‌کند تا هنوز بتوانم با هیپسترهای JS همکاری کنم.

تسلیم ربات فوق الذکر شوید و از تکمیل خودکار هوش مصنوعی استفاده کنید. ابزار مورد علاقه من تاکنون TabNine است. با بهره‌گیری از این ابزار تحت تأثیر قرار خواهید گرفت.

5. قدرت CLI خود را فوق‌العاده کنید

یک قدم فراتر از توانمندسازی جاوااسکریپت خود بروید و در دنیای شگفت‌انگیز ابزارهای CLI غرق شوید. من به طور خاص چند مورد را توصیه می کنم:

• Oh My Zsh: پیکربندی Zsh خود را با هزاران تابع مفید، راهنما، پلاگین، طرح زمینه و … تقویت کنید.
• Scaffolder: بدون دردسر کد بویلرپلیت تولید می‌کند.
• ZSH-z: با این ابزار سریع به دایرکتوری‌هایی که اخیرا بازدید کرده‌اید بروید.

6. از کتابخانه کامپوننت‌های React استفاده کنید

تا زمانی که برای یک شرکت بزرگ که کتابخانه کامپوننت‌های داخلی دارد کار نکرده باشید، مطمئنا ترجیح می‌دهید از پیش ساخته‌ها استفاده کنید. دیگر تحمل این را ندارم که به جای جدول‌ها و متن‌های قابل تنظیم، تعداد زیادی div و تگ اضافی بنویسم. پس جلوه بصری Chakra UI را تحسین کنید (برگرفته از وب سایت آنها):

import * as React from "react";
import { Box, Image, Flex, Badge, Text } from "@chakra-ui/core";
import { MdStar } from "react-icons/md";

export default function Example() {
  return (
    <Box p="5" maxW="320px" borderWidth="1px">
      <Image borderRadius="md" src="https://bit.ly/2k1H1t6" />
      <Flex align="baseline" mt={2}>
        <Badge colorScheme="pink">Plus</Badge>
        <Text
          ml={2}
          textTransform="uppercase"
          fontSize="sm"
          fontWeight="bold"
          color="pink.800"
        >
          Verified &bull; Cape Town
        </Text>
      </Flex>
      <Text mt={2} fontSize="xl" fontWeight="semibold" lineHeight="short">
        Modern, Chic Penthouse with Mountain, City & Sea Views
      </Text>
      <Text mt={2}>$119/night</Text>
      <Flex mt={2} align="center">
        <Box as={MdStar} color="orange.400" />
        <Text ml={1} fontSize="sm">
          <b>4.84</b> (190)
        </Text>
      </Flex>
    </Box>
  );
}

Chakra UI کتابخانه کامپوننت‌های مورد علاقه من است و محبوبیت آن در حال افزایش است. موارد دیگری همچون Rebass و Base Web نیز وجود دارند.

7. از کتابخانه CSS-in-JS استفاده کنید

حتی هنگام استفاده از کتابخانه کامپوننت‌ها، ممکن است لازم باشد CSS بنویسید. این همانند جاوااسکریپت است که عمدتا غیرقابل اجتناب است. بهترین گزینه شما نوشتن CSS در جاوااسکریپت است که به شما امکان محدودتر کردن استایل‌ها در کامپوننت‌ها، وابستگی‌های صریح، کاهش حالت آبشاری و سایر مزایای دیگر را می‌دهد. بسیاری از توسعه دهندگان شروع به استفاده از Linaria کرده‌اند. Linaria هزینه‌ عملکردی سایر کتابخانه‌های CSS-in-JS را ندارد، زیرا فایل‌های CSS را استخراج می‌کند و منجر به زمان اجرای صفر می‌شود.

سایر توسعه دهندگان از Emotion ، Styled Components و JSS استفاده می‌کنند.

8- از Storybook استفاده کنید

Storybook به شما این امکان را می‌دهد تا کامپوننت‌های React را جدا از منطق تجاری برنامه، به سرعت بسازید. برای تعیین نحوه رندر کامپوننت، می‌توانید پیکربندی‌های مختلف propها را امتحان کنید. یکی از مزایای قابل تأیید Storybook این است که معماری کاملا مشخصی را اعمال می‌کند. من معمولا تا آنجا که ممکن است برنامه خود را در Storybook ایجاد می‌کنم و کامپوننت‌های پیچیده و حتی صفحات را می‌سازم. زمانی که منطق تجاری را شروع می‌کنم، یک کامپوننت wrapper فقط وظیفه تهیه لوازم جانبی برای موارد ارائه شده را بر عهده خواهد داشت. کامپوننت‌های هوشمند کاملا از کامپوننت‌های معمولی جدا هستند. اگر هنوز این کار را نکرده‌اید، مقاله کلاسیک در مورد کامپوننت‌های باهوش در مقابل کامپوننت‌های خنگ را بخوانید.

9. فرم‌ها را خودتان ننویسید

یادگیری نوشتن فرم در React vanilla مهم است. این کار توسعه دهنده را مجبور می‌کند تفاوت بین کامپوننت‌های کنترل شده و کنترل نشده، مدیریت state و موارد دیگر را تشخیص دهد. اما هنگام نوشتن کد مطمئنا می‌خواهید از کتابخانه استفاده کنید. یک کتابخانه فرم خوب نه تنها در وقت شما صرفه جویی می‌کند، بلکه در معرض مشکل نیز نخواهد بود.

ممکن است فکر کنید "اما من می‌خواهم ورودی کاربر را به طور همزمان تأیید کنم" یا "اگر یک ورودی به ورودی دیگر وابسته باشد، چه می‌شود؟". خب یک کتابخانه فرم برای این مورد وجود دارد. من Formik را توصیه می‌کنم، اما React Final Form و React Hook Form مورد علاقه توسعه دهنده‌های دیگر است.

10. چرخ را دوباره اختراع نکنید

React یک نعمت الهی به برنامه نویسان تنبل است. همه پیچیده‌ترین کامپوننت‌های قابل توسعه قبلا نوشته شده‌اند. اگر متوجه شدید که در حال نوشتن جدول، کامپوننت تکمیل خودکار و ابزارهای انیمیشن هستید یا اگر SVG را برای آیکون وارد می‌کنید، نوشتن جدول را متوقف کنید و کتابخانه آن را جستجو کنید. اینها برخی از موارد دلخواه من هستند:

• Framer Motion: برای انیمیشن‌ها
• React Table: برای جدول‌ها
• React Icons: برای آیکون‌ها
• React Draggable: برای کشیدن عناصر
• React Autosuggest: برای تکمیل خودکار
• React Datepicker: برای انتخاب تاریخ

منبع