React js چیست؟ معرفی مفاهیم پایه React

React js (ری اکت) یک کتابخانه‌ی قدرتمند، اخباری، منعطف و یکی از سریع‌ترین و محبوب‌ترین کتابخانه‌های جاوا اسکریپت برای ساخت رابط‌های کاربری است. React اجازه می‌دهد رابط‌های کاربری پیچیده را از طریق قطعه‌های کوچک کد به نام components (مؤلفه‌ها) ایجاد کنید.

React عناصر مختلفی دارد، اما این مقاله را از معرفی کلاس زیرین React.Component شروع می‌کنیم:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />

component ها به دلیل اینکه به React می‌گویند باید چه مواردی را به کاربر نمایش دهد، اهمیت زیادی دارند. مهم‌تر از همه اینکه اگر در این اطلاعات تغییری ایجاد شود، React هم به شکلی بهینه عناصر را به‌روزرسانی و بازنویسی خواهد کرد.

ShoppingList در این بخش یک React component class یا React component type برشمرده می‌شود. هر عنصر پارامترهایی به نام props (ویژگی، کوتاه شده‌ی کلمه properties) را می‌پذیرد و از طریق متد render سلسله‌مراتب مشاهدات را به صفحه برمی‌گرداند.

متد render توضیحاتی ازآنچه می‌خواهید روی صفحه ببینید را برمی‌گرداند. React این توضیحات را دریافت می‌کند و نتیجه را نمایش می‌دهد. render دقیقاً یک عنصر از React را برمی‌گرداند که توصیفی کوتاه از آن چیزی است که باید رندر شود. اکثر توسعه‌دهنده‌های React از سینتکس خاصی به نام JSX استفاده می‌کنند که نوشتن ساختارها را ساده‌تر می‌کند. سینتکس <div /> در زمان ساخت به (‘React.createElement (‘div تغییر می‌کند. درنتیجه مثال بالا معادل کدهای زیر است:

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

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

مقاله مرتبط: AngularJS چیست؟

ShoppingList component  بالا تنها component های داخلی DOM مانند <div /> و <li /> را ارائه می‌کند. هرچند می‌توانید مؤلفه‌های شخصی‌سازی‌شده خود را هم تولید و ارائه کنید. برای مثال می‌توانیم با نوشتن <ShoppingList /> به‌تمامی فهرست ارجاع دهیم. هرکدام از مؤلفه‌های React می‌توانند ذخیره شوند و به شکل کاملاً مجزای فعالیت کنند. به همین خاطر می‌توانید با استفاده از React رابط‌های کاربری بسیار پیچیده‌ای را بر پایه‌ی مؤلفه‌های ساده طراحی کنید.

بررسی کد استارتر

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

کد استارتر (Starter Code) پایه‌ی تمامی ساختارهای ما است. در این نمونه ما استایل‌های CSS را در اختیارتان گذاشته‌ایم تا تمرکز خود را بر یادگیری React و مثال زیر (نوشتن بازی tic-tac-toe) محدود کنید.

با بررسی کدهای زیر به این نتیجه می‌رسید که سه نوع مؤلفه React در این کدها وجود دارد:

• Square
• Board
• Game

کامپوننت Square کد ساده‌ی <button> را ارائه می‌کند و Board ۹ عدد square را تحویل می‌دهد. مؤلفه Game جدول را به همراه مقدار placeholder تعریف‌نشده ارائه می‌کند که در آینده آن را ویرایش خواهیم کرد. در حال حاضر هیچ‌کدام از مؤلفه‌ها ارتباطی با کاربر برقرار نمی‌کنند و تعاملی نیستند.

عبور اطلاعات از Props

برای شروع می‌خواهیم اطلاعاتی را از کامپوننت Board به کامپوننت Square منتقل کنیم. در متد renderSquare (در Board) کد را به شکلی تغییر دهید که مشخصه‌ای به نام value به Square منتقل شود.

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }

سپس متد render در Square را به شکلی تغییر دهید که مقدار بالا را از طریق جایگزینی {/* TODO */} با {this.props.value} نمایش دهد:

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

قبل:

بعد: باید در هرکدام از مربع‌های خروجی بتوانید یک عدد را مشاهده کنید.

به همین سادگی توانستید یک مشخصه را از مؤلفه Board به Square منتقل کنید. در اکثر اپلیکیشن‌های React، ویژگی‌ها همواره از والدین به فرزندان منتقل می‌شوند.

تولید مؤلفه واکنشی (اینتراکتیو)

حالا می‌خواهیم مؤلفه Square را به شکلی برنامه‌نویسی کنیم که پس از کلیک، مقدار X را نمایش دهد. نخست تگ button در زمان بازگشت از render() را به کد زیر تغییر دهید:

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>
        {this.props.value}
      </button>
    );
  }
}

حالا اگر روی Square کلیک کنیم، یک پیام خطا در مرورگر دریافت خواهیم کرد.

نکته:

برای ساده‌تر کردن کار از این به بعد از تابع arrow در سینتکس خود برای مدیریت رویدادها استفاده می‌کنیم:

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>
       {this.props.value}
     </button>
   );
 }
}

توجه کنید که چگونه با استفاده از onClick={() => alert( ‘click’)}، در اصل یک تابع را پس از کلیک به‌عنوان ویژگی onClick انتقال می‌دهیم. یکی از اشتباهات رایج، از یاد بردن () => و نگارش onClick={alert(‘click’)} است که باعث می‌شود پیام اخطار در هر بار تحویل مؤلفه‌ها مجدداً فعال شود.

به‌عنوان قدم بعدی، از Square می‌خواهیم که این کلیک را «به خاطر بسپارد» و سپس Square را با علامت X پر کند. به‌خاطرسپاری در مؤلفه‌ها با استفاده از state اتفاق می‌افتد.

مؤلفه‌های React با استفاده از this.state در ساختار خود عمل به‌خاطرسپاری را انجام می‌دهند. this.state باید در مؤلفه شما خصوصی (private) در نظر گرفته شود. در اینجا مقدار فعلی this.state را در Square ذخیره می‌کنیم و سپس با کلیک روی آن، مقدار را تغییر می‌دهیم.

نخست برای شروع state باید سازنده (constructor) را به کلاس خود اضافه کنیم:

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}

نکته:

در کلاس‌های جاوا اسکریپت، همواره باید در زمان تعریف سازنده در کلاس زیرین، super را فراخوانی کنیم. همه کلاس‌هایی که در مؤلفه React دارای constructor (سازنده) هستند باید با فراخوانی super(props) آغاز شوند.

حالا متد render در Square را به شکلی تغییر می‌دهیم که مقدار فعلی را در زمان کلیک نشان دهد:

• درون تگ <button>، props.value را با this.state.value جایگزین کنید.
• مدیر رویداد () => alert() با () => this.setState({value: ‘X’}) جایگزین کنید.
• برای ساده‌تر کردن خوانش کدها، ویژگی‌های className و onClick را در خطوط جداگانه قرار دهید.

پس‌ازاین تغییرات، تگ <button> که توسط متد render بازمی‌گردد، به شکل زیر در خواهد آمد:

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button
        className="square"
        onClick={() => this.setState({value: 'X'})}
      >
        {this.state.value}
      </button>
    );
  }
}

در اصل با فراخوانی this.setState از onClick در متد رندر، از React درخواست می‌کنیم که هر بار روی <button> کلیک شد، Square را مجدداً رندر کند و تحویل دهد. پس از به‌روزرسانی، مقدار this.state.value به X تغییر پیدا می‌کند و درنتیجه همین مقدار (X) را در صفحه‌ی بازی مشاهده می‌کنیم. حالا اگر روی هرکدام از مربع‌ها (Square) کلیک کنید، یک ضربدر (X) نمایش داده خواهد شد.

زمانی که setState را در یک مؤلفه فراخوانی می‌کنید، React به شکل خودکار مؤلفه فرزند را نیز به‌روزرسانی می‌کند.

امکانات توسعه‌دهنده

افزونه React Devtools برای مرورگرهای کروم و فایرفاکس قابل‌دسترسی هستند و به شما اجازه می‌دهند که درختِ مؤلفه‌های React را در بخش ابزارهای توسعه‌دهنده (developer tools) مشاهده کنید.

React DevTools به شما اجازه می‌دهد که ویژگی‌ها و state مؤلفه‌ها را مشاهده کنید. پس از نصب ابزار، کافی است روی هرکدام از المنت‌های صفحه، کلیک راست کنید و گزینه‌ی Inspect را انتخاب کنید. با این کار، ابزارهای توسعه‌دهنده به شما نمایش داده می‌شوند و زبانه React به‌عنوان آخرین زبانه از سمت راست به شما نمایش داده خواهد شد.

هرچند برای کار با CodePen باید چند قدم دیگر نیز بردارید:

• لاگین یا ثبت‌نام کنید و ایمیل خود را به تأیید برسانید.
• روی دکمه‌ی Fork کلیک کنید.
• روی Change View کلیک کنید و سپس Debug mode را برگزینید.
• درنتیجه devtools در زبانه جدید به یک‌ زبانه جداگانه برای React مجهز خواهد شد.