در این مقاله قصد داریم تا بررسی کنیم که چگونه می‌توانیم بدون بازنویسی هیچ کدی و با استفاده از کتابخانه react-codemod، برنامه React خود را به آخرین نسخه موجود، یعنی نسخه 19 React ارتقا دهیم.

بررسی react-codemod

react-codemod کتابخانه‌ای است که برای خودکارسازی فرآیند ارتقا یک برنامه React به آخرین نسخه، و بازسازی پایگاه کد برای پشتیبانی از design patternهای جدید طراحی شده است.

react-codemod مجموعه‌ای از اسکریپت‌ها است که الگوهای خاصی را در یک پایگاه کد شناسایی کرده و با کدهای به‌روز شده جایگزین می‌کند. این کتابخانه یک ابزار ضروری برای بازسازی و ارتقا در مقیاس بزرگ بدون نیاز به ویرایش دستی هر فایلی می‌باشد.

آماده‌سازی برنامه React برای ارتقا به نسخه 19  React

قبل از اینکه پایگاه کد React موجود خود را به جدیدترین APIها و design patternها به‌روزرسانی کنیم، ابتدا باید نسخه React پروژه خود را ارتقا دهیم. با اجرای دستور زیر می‌توانیم این کار را انجام دهیم:

npm install --save react@latest

در مرحله بعد، باید دایرکتوری پروژه را به عنوان یک Git repository مقداردهی اولیه کنیم، زیرا react-codemod برای این که به درستی کار کند به یک commit Git نیاز دارد. برای انجام این کار، دستور زیر را اجرا می‌کنیم:

git init

نصب react-codemod

کتابخانه react-codemod را نصب می‌کنیم، که ما را قادر می‌سازد تا مجموعه‌ای از دستورات را اجرا نماییم که به‌طور خودکار پایگاه کد ما را به آخرین APIها و design patternهای React به‌روزرسانی کند. برای نصب کتابخانه react-codemod دستور زیر را اجرا می‌کنیم:

npm i react-codemod

انتقال پایگاه کد به نسخه React 19

اکنون، می‌توانیم به‌روزرسانی پایگاه کد خود را شروع کنیم تا با جدیدترین APIها و design patternهای React هماهنگ شود، بدون اینکه نیاز باشد آن‌ها را به صورت دستی تغییر دهیم. مراحل زیر نشان می‌دهند که چگونه باید پایگاه کد React موجود خود را با استفاده از دستورات react-codemod به APIها و design patternهای React 19 ارتقا دهیم.

تبدیل createElement به کد JSX

تبدیل کد createElement به JSX یک گام مهم در مدرن‌سازی پایگاه کد React به حساب می‌آید. JSX روشی بصری، خوانا و قابل نگه‌داری برای نوشتن کامپوننت‌های React در مقایسه با createElement ارائه می‌دهد.

کد زیر را به عنوان مثالی در نظر می‌گیریم. این کد از createElement برای ایجاد المنت‌های React استفاده می‌کند:

const element = React.createElement(
  'div',
  { className: 'container' },
  React.createElement('h1', null, 'Hello, world!'),
  React.createElement('p', null, 'This is a React application.')
);

برای تبدیل کد createElement بالا به کد JSX معادل آن، ابتدا باید یک Git commit را اجرا کنیم و سپس دستور react-codemod را برای create-element-to-jsx با استفاده از دستورات زیر اجرا نماییم:

git add .
git commit -m "Commit message"
npx react-codemod create-element-to-jsx src/

پس از اجرای دستور بالا، با این سوال Which dialect of JavaScript do you use? مواجه می‌شویم که باید گزینه مورد نظر خود را انتخاب کنیم.

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

const element = (  
<div className="container">
    <h1>Hello, world!</h1>
    <p>This is a React application.</p>
  </div>
);

تبدیل function bindingها به arrow functionها

در کلاس کامپوننت‌ها، استفاده از arrow functionها یک رویکرد مختصر و مدرن ارائه می‌کند که نیاز به اتصالات صریح را از بین می‌برد. با استفاده از react-codemod می‌توانیم به راحتی همه توابع binding در پایگاه کد خود را بدون نیاز به بازنویسی کل کامپوننت به arrow functionها تبدیل کنیم.

در ادامه کامپوننت زیر را بررسی می‌کنیم که چگونه می‌توانیم آن را به arrow functionها تبدیل نماییم.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('Button clicked!');
  }
  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

برای تبدیل توابع binding در کامپوننت بالا به arrow functionها، دستورات زیر را در ترمینال اجرا می‌کنیم:

git add .
git commit -m "Commit message"
npx react-codemod manual-bind-to-arrow src/

در این مرحله نیز با این سوال Which dialect of JavaScript do you use? مواجه می‌شویم که باید گزینه مورد نظر خود را انتخاب کنیم.

پس از موفقیت آمیز بودن دستور بالا، همانطور که در کد زیر مشاهده می‌کنیم توابع binding به arrow functionها تبدیل می‌شوند:

class MyComponent extends React.Component {
  handleClick = () => {
    console.log('Button clicked!');
  };
  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

تبدیل PropTypes به prop-types

با شروع نسخه React 19، PropTypes از پکیج React حذف شده و با prop-types جایگزین می‌شود. این بدان معنی است که اگر از PropTypes در پایگاه کد خود استفاده می‌کنیم، باید آن را به‌روزرسانی نماییم و به جای آن از prop-types استفاده کنیم.

در ادامه کد زیر را از PropTypes به prop-types تبدیل کرده و دستور import مناسب را اضافه کنیم:

import React from 'react';
class MyComponent extends React.Component {
  render() {
    return <div>{this.props.name}</div>;
  }
}
MyComponent.propTypes = {
  name: React.PropTypes.string.isRequired,
};

می‌توانیم کد PropTypes را با اجرای دستور react-codemod زیر به prop-types تبدیل نماییم:

git add .
git commit -m "Commit message"
npx react-codemod manual-bind-to-arrow src/

پس از اجرای دستور بالا، پایگاه کد ما به طور خودکار برای استفاده از prop-types به‌روزرسانی می‌شود:

import React from 'react';
import PropTypes from 'prop-types';
class MyComponent extends React.Component {
  render() {
    return <div>{this.props.name}</div>;
  }
}
MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
};

تبدیل کلاس کامپوننت به PureComponent

هنگامی که یک کامپوننت parent مجددا رندر می‌شود، React کامپوننت‌های child آن را نیز دوباره رندر می‌کند. استفاده از PureComponent به جلوگیری از رندر مجدد غیرضروری کلاس کامپوننت‌ها کمک می‌کند، تا زمانی که ویژگی‌ها و state کامپوننت بدون تغییر باقی بماند.

به عنوان مثال، در کد زیر همیشه زمانی که کامپوننت parent مجددا رندر می‌شود، این کامپوننت هم re-render می‌شود که این موضوع می‌تواند عملکرد برنامه را کاهش دهد:

import React from 'react';
class MyComponent extends React.Component {
  render() {
    return <div>{this.props.name}</div>;
  }
}

برای جلوگیری از رندر شدن مجدد کامپوننت‌های child زمانی که ویژگی‌ها و state آن‌ها در طول رندر مجدد کامپوننت parent بدون تغییر باقی می‌ماند، باید کلاس کامپوننت‌های برنامه خود را با استفاده از دستور زیر به PureComponent تبدیل نماییم:

git add .
git commit -m "Commit a message"
npx react-codemod pure-component src/

با اجرای دستور بالا با سوالات زیر مواجه خواهیم شد:

هنگامی که دستور کامل شود، کلاس کامپوننت‌های پایگاه کد ما به PureComponent تبدیل می‌شوند و از رندر مجدد غیرضروری کامپوننت‌های child جلوگیری می‌کنند. همانطور که می‌بینیم:

import React, { PureComponent } from 'react';
class MyComponent extends PureComponent {
  render() {
    return <div>{this.props.name}</div>;
  }
}

جمع‌بندی

در این مقاله بررسی کردیم که چگونه با استفاده از react-codemod، یک پایگاه کد برنامه React را به آخرین APIهای React یعنی نسخه 19 ارتقا دهیم و design patternها را بدون بازنویسی هیچ کدی به‌روزرسانی نماییم.

به روز نگه داشتن پایگاه کد برنامه با جدیدترین APIها و design patternهای React، عملکرد، امنیت و پایبندی به بهترین شیوه‌ها را تضمین می‌کند.