11 مورد از بهترین ابزارهای توسعه React

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

بنابراین وقتی نوبت به انتخاب IDE مناسب می‌رسد، به دلیل اینکه گزینه‌های زیادی وجود دارد ممکن است کمی گیج کننده باشد.

در این مقاله من 11 ابزار را برای توسعه پروژه‌های ری‌اکت معرفی می‌کنم تا به شما کمک کند حداکثر استفاده را از فریمورک خود داشته باشید.

1. React Developer Tools

یکی از محبوب‌ترین ابزارهای توسعه ری‌اکت برای مرورگر کروم که اخیرا نسخه 4 خود را منتشر کرده است.

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

هر دو گزینه در تب‌های استاندارد DevTools موجود است که برای Vanilla JS در نظر گرفته شده‌اند. به این معنی که در مقایسه با موارد تخصصی که توسط افزونه اضافه شده‌اند، از جزئیات و قابلیت‌های یکسانی برخوردار نخواهید بود.

پس اگر علاقه‌مند به توسعه ری‌اکت هستید، این یک افزونه ضروری است.

 2. React Sight

این یکی دیگر از افزونه‌های کروم است که می‌توانید آن را برای کمک به انجام inspectهای خود نصب کنید.

جهت استفاده مانند قبل یک تب جدید به عنوان بخشی از DevTools باز خواهد شد به نام "ReactSight".

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

3. Bit

این یکی از بهترین گزینه‌های موجود برای ایجاد و به اشتراک گذاری کامپوننت‌های ری‌اکت است.

Bit یک ابزار CLI و یک بستر آنلاین را ارائه می‌دهد که در آن می‌توانید کامپوننت‌های ری‌اکت خود را منتشر کرده و با دیگران به اشتراک بگذارید. همچنین به شما امکان می‌دهد کامپوننت‌های ایجاد شده و منتشر شده توسط شخص ثالث را نیز جستجو کنید. تصور کنید NPM با Git ترکیب شده است، اما صرفا برای کامپوننت‌های ری‌اکت.

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

4. React Extension Pack (برای VS)

ویژوال استودیو بدون شک یکی از محبوب‌ترین IDEها برای توسعه‌دهندگان جاوااسکریپت است. هرچند گزینه‌های عالی دیگری مانندSublime ، IntelliJ و حتی Vim وجود دارد.

با توجه به آنچه گفته شد به دلیل جامعه قدرتمند پشت VS، فکر کردم لازم است ابزار React Extension Pack را هم معرفی کنم.

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

• ReactJS Code Snippets: 40 اسنیپت برای همه نیازهای عمومی شما و 34 اسنیپت خاص propTypes ارائه می‌دهد. در مواقعی که برای انجام محاسبات تنبل هستید، کمک می‌کند تا زمان خود را در نوشتن صرفه‌جویی کرده و در کارهای روزمره خود کارآمدتر باشید.
• ES Lint: این ابزار پشتیبانی از خط فرمان را با همین نام اضافه می‌کند. آن را در IDE شما ادغام کرده و کمک می‌کند سینتکس خود را بهبود ببخشید، استایل برنامه خود را تنظیم کرده و حتی خطاها را پیدا کنید که به طور خودکار (البته در برخی موارد) این کار را برایتان انجام می‌دهد.
• npm: هر بار که نیاز به نصب یک وابستگی جدید دارید، باید در IDE خود به ترمینال بروید، سرور را راه اندازی مجدد کنید یا حتی برخی از دستورات مربوط به npm را اجرا نمایید. این کار ممکن است کمی خسته کننده باشد، بنابراین این افزونه امکان اجرای دستورات npm را از طریق پالت فرمان فراهم می‌کند.
• JS ES6 Snippets: این شامل مجموعه دیگری از اسنیپت‌ها است. با توجه به اینکه با جاوااسکریپت کار می‌کنید، برای سرعت بخشیدن به روند کارتان، این مورد را در نظر بگیرید.
• Search node_modules: تا به حال از خود پرسیده‌اید که آیا ماژول مورد نظر را نصب کرده یا مجبورید دوباره آن را بررسی کنید؟ با استفاده از این افزونه می‌توانید ماژول‌ها را به راحتی پیدا کرده و در ویرایشگر خود باز کنید. ممکن است یک مورد استفاده بسیار خاص به نظر برسد، اما به من اعتماد کنید، داشتن این ابزار حتی اگر یکبار هم به آن احتیاج داشته باشید، زمان زیادی را برای شما ذخیره می‌کند.

برای نصب پکیج می‌توانید به راحتی از طریق پالت فرمان VS این کار را انجام دهید. آن را توسط کلیدهای CTRL+P باز کنید، سپس کد زیر را وارد نمایید:

ext install jawandarajbir.react-vscode-extension-pack

به منظور یادگیری بیشتر VS Code و کار با تنظیمات آن می‌توانید از این دوره رایگان در وب سایت راکت استفاده کنید.

5. Storybook

ری‌اکت با هدف کمک به توسعه‌دهندگان در نوشتن رابط کاربری به شیوه‌ای کاملا بصری ایجاد شده است. Storybook یک ابزار متن باز است که می‌توانید برای توسعه کامپوننت‌های UI خود از آن استفاده کنید. این یک کتابخانه نیست، اما فراتر از یک ابزار است، ویرایشگر UI آنلاین آن به شما امکان می‌دهد کد خود را توسعه دهید، اینسپکت کنید و در نهایت به صورت تعاملی به نمایش بگذارید (که در مورد توسعه کامپوننت‌های بصری بسیار مهم است).

برای نصب آن در پروژه ری‌اکت موجود تنها کاری که باید انجام دهید این است:

$ npx -p @storybook/cli sb init

این دستور ساختار پروژه شما را بررسی کرده و سعی می‌کند بفهمد که از کدام لایه view استفاده می‌کنید (همچنین به غیر از React از فریمورک‌های دیگر مانند Vue  و Angular نیز پشتیبانی می‌کند).

سپس می‌توانید Storybook را توسط دستور زیر اجرا کنید:

$ npm run storybook

6. React Styleguideist

این یکی دیگر از ابزارهای بسیار جالب و تعاملی برای ایجاد و نمایش کامپوننت‌های UI است.

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

برای قرار دادن این ابزار در پروژه‌های ری‌اکت خود، تنها کاری که باید انجام دهید این است (با این فرض که قبلا Webpack را نصب کرده‌اید و پروژه را با استفاده از Create React App ایجاد کرده‌اید):

$ npm install --save-dev react-styleguidist

سپس سرور style guide را با اجرای دستور زیر راه اندازی کنید:

$ npx styleguidist server

اگر می‌خواهید درباره استفاده از Styleguideist در پروژه خود بیشتر بدانید، مستندات یا دموی آن را بررسی کنید.

7. Create React App

این مقاله می‌تواند گواهی بر محبوبیت ری‌اکت به عنوان ابزاری برای جامعه فرانت-اند باشد. بدین ترتیب از شما انتظار می‌رود که از نوعی ساختار پروژه استاندارد پیروی کنید تا ابزارهای ذکر شده در اینجا بتوانند به درستی کار کنند.

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

برای استفاده از آن اگر قبلا npx را نصب کرده باشید، نیازی به نصب هیچ چیز دیگری ندارید، تنها چیزی که لازم دارید دستور زیر است:

$ npx create-react-app my-app

یا اگر به دلایلی طرفدار npx نیستید، می‌توانید از npm نیز به این صورت استفاده کنید:

$ npm init react-app my-app

یا حتی yarn:

$ yarn create react-app my-app

در هر صورت باید Node.js (نسخه 8.16.0 یا 10.16.0 یا بالاتر) را روی سیستم خود نصب کنید.

و با هر یک از این دستورات، ساختار پوشه‌ای به این شکل دریافت خواهید کرد:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js

اکنون آماده راه اندازی سرور و توسعه برنامه هستید:

$ cd my-app
$ npm start #or yarn start depending on what you prefer

با این کار یک سرور dev با آدرس http://localhost:3000 راه اندازی می‌شود و هر بار که کد را ویرایش می‌کنید، مجددا بارگیری می‌گردد.

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

به منظور آشنایی بیشتر با پکیج منجرها، این مقاله را مطالعه کنید.

8. React Bootstrap

آیا تا به حال نام بوت استرپ را شنیده‌اید؟ این یک فریمورک محبوب CSS (شاید هم محبوب‌ترین) است. به زبان ساده مجموعه‌ای از کلاس‌های CSS و توابع جاوااسکریپت را ارائه می‌دهد که به شما کمک می‌کند بدون نیاز به داشتن تخصص در یکی از این فناوری‌ها، رابط کاربری زیبا بسازید.

اکنون سازندگان React Bootstrap اجزای JS را دوباره نوشته‌اند تا با React سازگار شود. بنابراین شما می‌توانید از کامپوننت‌های آنها درست مانند کامپوننت‌های ری‌اکت استفاده کنید:

برای افزودن به پروژه خود می‌توانید آن را با استفاده از npm نصب کنید:

$ npm install react-bootstrap bootstrap

پس از اینکه نصب شد، می‌توانیدstylesheet  مورد نیاز خود را به فایل‌های App.js یا src/index.js پروژه اضافه کنید.

{/* The following line can be included in your src/index.js or App.js file*/}

import 'bootstrap/dist/css/bootstrap.min.css’;

9. React-Proto

اگر کمتر به کدنویسی و بیشتر به طراحی بصری علاقه دارید، React-proto می‌تواند ابزاری مناسب برای شما باشد. این به شما مکان می‌دهد Prototype UIهایی را با استفاده از درگ و دراپ (کشیدن و رها کردن) به جای نوشتن کد برای آن، طراحی کنید.

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

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

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

این برنامه با هر سه سیستم‌عامل اصلی سازگار است، بنابراین هیچ بهانه‌ای برای امتحان نکردن آن وجود ندارد.

10. Why did you render

اگر می‌خواهید کامپوننت‌های خود را دیباگ کنید، این ابزار انتخاب بسیار خوبی است. این کتابخانه کوچک زمان شروع به کار رندرهای ضروری را به شما اطلاع می‌دهد.

می‌توانید آن را به سادگی نصب کنید:

$ npm install @welldone-software/why-did-you-render --save

سپس در پروژه خود به صورت زیر وارد کنید:

import React from 'react';

if (process.env.NODE_ENV !== 'production') {

  const whyDidYouRender = require('@welldone-software/why-did-you-render');

  whyDidYouRender(React);

{

بعد تنها کاری که باید انجام دهید این است که مشخص کنید کدام کامپوننت‌ها را می‌خواهید در مورد آنها اطلاع داده شود، مانند زیر:

class BigListPureComponent extends React.PureComponent {

  static whyDidYouRender = true

  render(){

    return (

      //some heavy render you want to ensure doesn't happen if its not neceserry

    )

  }

{

هنگامی که همه چیز تنظیم و آماده شد، در اینجا خروجی است که می‌توانید انتظار داشته باشید:

برای کسب اطلاعات بیشتر مستندات آن را با دقت بررسی کنید، چرا که این قطعا یکی از مواردی است که باید مراقب آن باشید!

11. Proton Native

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

و اما اکنون توسط Proton Native می‌توانید این کار را در ری‌اکت نیز انجام دهید. بدین منظور با استفاده از کامپوننت‌ها، عناصر GUI تعریف کنید. همچنین این ابزار با همه ماژول‌های Node.js سازگار است (در واقع مبتنی بر آن است)، از Redux هم پشتیبانی می‌کند و به دلیل ماهیت Proton کاملا کراس پلتفرم است.

برای نصب آن در سیستم خود تنها چیزی که نیاز دارید این است که npm را قبلا نصب کرده باشید و موارد زیر را انجام دهید:

$ npm install -g create-proton-app

با این حال توجه داشته باشید که اگر از لینوکس استفاده می‌کنید، ابتدا باید موارد زیر را نصب کنید:

libgtk-3-dev build-essential python2 pkg-config

در نهایت برای ایجاد برنامه، دستورات زیر را اجرا کنید:

$ create-proton-app my-app

# move to your project directory
$ cd my-app

# run your app
$ npm run start

جمع‌بندی

اینها 11 مورد از بهترین ابزارها برای توسعه پروژه‌های ری‌اکت بودند. همه آنها مربوط به وب نیستند، همه آنها بصری نیستند و نیز ممکن است همه آنها برای کد نویسی به شما کمک نکنند. اما نکته اینجاست که بسیاری از آنها را می‌توان برای تکمیل پروژه و صرفه‌جویی در زمان استفاده کرد.

اگر به نظرتان موردی را فراموش کرده‌ام که برای نیازهای مرتبط با ری‌اکت مورد استفاده قرار می‌گیرد یا اینکه خودتان ابزاری را سراغ دارید که کاربردی است، در بخش زیر آن را به اشتراک بگذارید.

منبع