React یک کتابخانه جاوااسکریپت است که برای ایجاد رابط کاربری مورد استفاده قرار می‌گیرد. بسیاری از کسب و کارها و شرکت‌ها از جمله LinkedIn، Twitter و غیره از React استفاده می‌کنند و همین موضوع باعث می‌شود تا آن‌ها دائماً به دنبال استعدادهای جدید باشند. در این مقاله قصد داریم تا با مفاهیم اولیه و مهم React آشنا شویم و آن‌ها را در مثال باهم بررسی کنیم.

React چیست؟

React یک کتابخانه جاوااسکریپت فرانت‌اند open source و فوق‌العاده سریع است که برای ایجاد رابط کاربری مورد استفاده قرار می‌گیرد. این کتابخانه بسیار کارآمد و منعطف است و از رویکرد مبتنی بر کامپوننت پیروی می‌کند که به ما این امکان را می‌دهد تا بتوانیم کامپوننت‌های رابط کاربری با قابلیت استفاده مجدد ایجاد کنیم.

توسعه‌دهندگان عمدتا از React برای ایجاد برنامه‌های کاربردی تک صفحه‌ای (SPA) استفاده می‌کنند و این کتابخانه فقط بر روی لایه view از معماری MVC تمرکز می‌کند.

ویژگی‌های React

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

• React برخلاف Real DOM، از Virtual DOM استفاده می‌کند.
• React از اتصال داده‌ای یک طرفه استفاده می‌کند.
• از مفاهیم React برای توسعه برنامه‌های کاربردی وب و همچنین برنامه‌های تلفن همراه با استفاده از React Native استفاده می‌شود که به ما این امکان را می‌دهد تا بتوانیم برنامه‌های چند پلتفرمی بسازیم.

ایجاد یک پروژه جدید در React

ما می‌توانیم با مقداردهی اولیه یک پروژه و نصب تمام وابستگی‌ها، یک برنامه React را از ابتدا ایجاد کنیم. اما ساده‌ترین راه استفاده از create-react-app از طریق دستور زیر است:

npx create-react-app my-app

توجه به این نکته لازم است که my-app نام برنامه‌ای است که در حال ایجاد آن هستیم، اما شما می‌توانید هر نام دلخواهی را برای پروژه خود انتخاب ‌کنید.

DOM مخفف چیست؟

اصطلاح “DOM” مخفف Document Object Model است و به نمایش کل رابط کاربری یک برنامه وب به عنوان یک ساختار داده درختی اشاره دارد.

انواع DOM

ما دو نوع DOM داریم که عبارتند از: Virtual DOM و Real DOM.

مزایا و معایب React

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

مزایا:

1. توسعه‌دهندگان جاوااسکریپت می‌توانند مفاهیم React را سریع‌تر یاد بگیرند، همچنین به دلیل تقاضای بالای این کتابخانه منابع آموزشی زیادی در دسترس است.
2. React سازگار با موتورهای جست‌وجو است
3. ایجاد رابط کاربری غنی و کامپوننت سفارشی را آسان‌تر می‌کند.
4. React دارای رندر سریع است.
5. استفاده از JSX این امکان را به ما می‌دهد تا کدی بنویسیم که ساده‌تر، جذاب‌تر و قابل فهم‌تر باشد.

معایب:

1. از آنجایی که React یک کتابخانه فرانت‌اند است، برای ساخت یک برنامه کامل به زبان‌ها و کتابخانه‌های دیگری هم نیاز است.
2. ممکن است درک مفاهیم React برای برنامه نویسان تازه‌کار و کم‌تجربه دشوار باشد زیرا از JSX استفاده می‌کند.
3. documentهای موجود به دلیل چرخه‌های توسعه کوتاه به سرعت منسوخ می‌شوند.

JSX چیست؟

JavaScript XML به اختصار JSX نامیده می‌شود. JSX ایجاد HTML در React را امکان‌پذیر کرده و آن را ساده می‌کند، در نتیجه نشانه‌گذاری خواناتر و قابل درک‌تری را به همراه دارد. به عنوان مثال:

const App = () => {
  return (
    <div>
       <h1>Hello World</h1>
    </div>
  )
}

چرا مرورگرها نمی توانند JSX را بخوانند؟

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

باید به این نکته توجه کنیم که create-react-app به صورت داخلی از Babel برای تبدیل JSX به جاوااسکریپت استفاده می‌کند، اما می‌توانیم با استفاده از Webpack پیکربندی babel خود را تنظیم کنیم.

منظور از کامپوننت‌ چیست؟

کامپوننت یک بلاک کد مستقل با قابلیت استفاده مجدد است که به جای ساختن کل رابط کاربری در یک فایل آن را به قطعات کوچک‌تر تقسیم می‌کند.

دو نوع کامپوننت در React وجود دارد: functional component و class component.

class component چیست؟

class componentها کلاس‌های ES6 هستند که JSX را برمی‌گرداند و استفاده از اکستنشن‌های React را ضروری می‌کند. از آنجایی که در نسخه‌های قبل ازReact (16.8) امکان استفاده از state در داخل functional component وجود نداشت، از آن‌ها فقط برای رندر کردن رابط کاربری استفاده می‌کردند. به عنوان مثال:

import React, { Component } from 'react'
export default class App extends Component {
  render() {
    return (
      <div>
         <h1>Hello World</h1>
      </div>
    )
  }
}

functional component چیست؟

یک تابع جاوااسکریپت یا ES6 که المنت React را برمی‌گرداند به عنوان یک functional component (JSX) نامیده می‌شود.

از زمانی که هوک‌ها در React معرفی شدند توانستیم از stateها در functional componentها استفاده کنیم، که همین موضوع باعث شده است تا بسیاری از افراد به دلیل سینتکس ساده‌تر، آن‌ها را بپذیرند. مثلا:

import React from 'react'
const App = () => {
  return (
    <div>
       <h1>Hello World</h1>
    </div>
  )
}
export default App;

نحوه استفاده از CSS در React

۳ روش برای استایل دادن به برنامه‌های React با استفاده از CSS وجود دارد:

• استایل‌دهی inline
• استایل‌دهی External
• CSS در JS

استفاده از ()render در React چگونه است؟

render()در class component برای برگرداندن HTMLای که در کامپوننت نمایش داده می‌شود مورد استفاده قرار می‌گیرد. یعنی از آن برای خواندن props و state و بازگرداندن کد JSX به کامپوننت root برنامه استفاده می‌شود.

Props چیست؟

props به عنوان property نیز نامیده می‌شود و از آن‌ برای انتقال داده‌ها از یک کامپوننت به کامپوننت دیگر (کامپوننت parent به child) استفاده می‌شود. معمولا برای رندر کردن داده‌های تولید شده به صورت پویا نیز مورد استفاده قرار می‌گیرند.

توجه به این نکته لازم است که کامپوننت child هرگز نمی‌تواند به کامپوننت parent پراپ ارسال کند زیرا این یک جریان یک‌طرفه است (parent به child).

مثلا:

function App({name, hobby}) {
    return (
      <div>
        <h1>My name is {name}.</h1>
        <p>My hobby is {hobby}.</p>
      </div>
    );
}

export default App;

state در React چیست؟

state یک آبجکت داخلی React است که برای ایجاد و مدیریت داده‌ها در کامپوننت‌ها مورد استفاده قرار می‌گیرد و تفاوت آن با props در این است که state برای ذخیره‌سازی داده‌ها به جای ارسال آن‌ها به‌ کار برده می‌شود.

همینطور state قابل تغییر است یعنی داده‌ها می‌توانند تغییر کنند و این تغییرات از طریق this.state()قابل دسترسی است. به عنوان مثال:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "John Doe"
    };
  }

  render() {
    return (
      <div>
        <h1>My name is {this.state.name}</h1>
      </div>
    );
  }
}

نحوه به‌روزرسانی state یک کامپوننت در React

باید این را بدانیم که وقتی یک state را مستقیماً به‌روزرسانی می‌کنیم، کامپوننت را re-render نمی‌کنیم، یعنی ما نمی‌توانیم به‌روزرسانی را ببینیم.

اگر بخواهیم re-render شود، باید از متد setState()استفاده کنیم که آبجکت state کامپوننت را به‌روزرسانی می‌کند و کامپوننت را دوباره تغییر می‌دهد. مثلا:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "John Doe"
    };
  }
  changeName = () => {
    this.setState({name: "Jane Doe"});
  }
  render() {
    return (
      <div>
        <h1>My {this.state.name}</h1>
        <button
          type="button"
          onClick={this.changeName}
        >Change Name</button>
      </div>
    );
  }
}

چگونه بین state و props تمایز قائل شویم؟

state و props آبجکت‌های جاوااسکریپت با توابع متمایز هستند.

props برای انتقال داده از کامپوننت parent به کامپوننت child استفاده می‌شود، در حالی که state یک ذخیره‌سازی داده به شکل محلی است که فقط برای آن کامپوننت در دسترس است و نمی‌توان آن را با کامپوننت‌های دیگر به اشتراک گذاشت.

Event در React چیست؟

در React یک Event عملی است که می‌تواند توسط یک اقدام کاربر یا یک رویداد ایجاد شده توسط سیستم به وجود بیاید. کلیک‌های ماوس، لود شدن صفحه وب، فشار دادن کلید، اسکرول و سایر تعاملات نمونه‌هایی از Eventها هستند. به عنوان مثال:

// For class component
<button type="button" onClick={this.changeName} >Change Name</button>

// For function component
<button type="button" onClick={changeName} >Change Name</button>

نحوه مدیریت Eventها در React

Eventها در React مشابه المنت‌های DOM مدیریت می‌شوند. اما یکی از تفاوت‌هایی که باید در نظر بگیریم، موضوع نام‌گذاری Eventها است که به جای حروف کوچک، به صورت camelCase نام‌گذاری می‌شوند. مثلا:

Class Component

class App extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('This button was Clicked');
  }
  render() {
    return (
      <div>
         <button onClick={this.handleClick}>Click Me</button>
      </div>
   );
  }
}

Function Component

const App = () => {
   const handleClick = () => {
      console.log('Click happened');
   };
   return (
      <div>
         <button onClick={handleClick}>Click Me</button>
      </div>
   );
};
export default App;

نحوه انتقال پارامترها به یک Event Handler

در functional componentها می‌توانیم این کار را انجام دهیم:

const App = () => {
   const handleClick = (name) => {
      console.log(`My name is ${name}`);
   };
   return (
      <div>
         <button onClick={() => handleClick('John Doe')}>Click Me</button>
      </div>
   );
};
export default App;

و در class componentها می‌توانیم این کار را انجام دهیم:

class App extends React.Component {
  call(name) {
    console.log(`My name is ${name}`);
  }
  render() {
    return (
      <button onClick= {this.call.bind(this,"John Doe")}>
        Click the button!
      </button>
    );
  }
}
export default App;

در ویدیو آموزش React – دوره فشرده کانال یوتیوب می‌توانید مرور سریع بر روی این مفاهیم React داشته باشید و با نحوه کار با آن‌ها آشنا شوید.

Redux چیست؟

Redux یک کتابخانه جاوااسکریپت open source محبوب برای مدیریت و متمرکز کردن state برنامه است. معمولاً با React یا هر View-library دیگری استفاده می‌شود.

مفاهیم این کتابخانه به شکل دقیق در آموزش React و Redux – دوره جامع مورد بررسی قرار گرفته است.

React Hooks چیست؟

هوک‌ها در نسخه ۱۶٫۸ به React اضافه شدند تا به ما اجازه دهند بدون نیاز به نوشتن کلاس از state و سایر ویژگی‌های React استفاده کنیم.

آن‌ها در داخل کلاس‌ها کار نمی‌کنند، بلکه به ما کمک می‌کنند تا به state و متدهای lifecycle از function componentها متصل شویم.

ما چه زمانی شروع به استفاده از Hookها در React کردیم؟

تیم React مفاهیم React Hooks را برای اولین بار در اواخر اکتبر ۲۰۱۸ در خلال React Conf و سپس در اوایل فوریه ۲۰۱۹ با React v16. 8.0 به دنیا معرفی کرد.

معرفی هوک ()useState

هوک UseState حافظه‌ای است که استفاده از متغیرهای state را در functional componentها امکان‌پذیر می‌کند. ما می‌توانیم state اولیه را به این تابع منتقل کنیم و آن، متغیری حاوی مقدار state فعلی (نه لزوماً state اولیه) و تابع دیگری برای به‌روزرسانی این مقدار را برمی‌گرداند. به عنوان مثال:

import React, { useState } from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      // ...
    </div>
  );
}

معرفی هوک ()useEffect

هوک UseEffect به ما این امکان را می‌دهد تا در کامپوننت‌های خود side effectهایی مانند fetch کردن داده‌ها، به‌روزرسانی مستقیم DOM، استفاده از تایمرهایی مانند setTimeout()و موارد دیگر را انجام دهیم.

این هوک دو آرگومان می‌گیرد: callback و dependencies، که به ما کمک می‌کند تا زمان اجرای side effectها را کنترل کنیم.

باید به این نکته توجه کنیم که آرگومان دوم اختیاری است.

مثلا:

import React, {useState, useEffect} from 'react';

const App = () => {
  const [loading, setLoading] = useState(false);
  
  useEffect(() => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, ۲۰۰۰);
  }, []);
  
  return(
    <div>
      // ...
    </div>
  )
}

export default App;

کاربرد هوک ()useMemo چیست؟

هوک useMemo()در functional componentها برای به خاطر سپردن توابعی که پردازش‌های سنگین دارند استفاده می‌شود، به طوری که فقط زمانی فراخوانی می‌شوند که یک مجموعه ورودی به جای رندر شدن تغییر کند. به عنوان مثال:

const result = useMemo(() => expensivesunction(input), [input]);

این شبیه به هوک useCallback است که برای بهینه‌سازی رفتار رندر function componenها استفاده می‌شود. useMemo برای به خاطر سپردن توابع به پردازش‌های سنگین استفاده می‌شود تا مجبور نباشند در هر رندر فراخوانی شوند.

هوک useRefs چیست؟

هوک useRefs()که به عنوان هوک References نیز شناخته می‌شود، برای ذخیره مقادیر قابل تغییر که در زمان به‌روزرسانی نیازی به رندر مجدد ندارند استفاده می‌شود. همچنین برای ذخیره رفرنس به یک المنت یا کامپوننت خاص مورد استفاده قرار می‌گیرد که در مواقعی که به اندازه‌گیری‌های DOM نیاز داریم یا مستقیماً روش‌هایی را به کامپوننت‌ها اضافه می‌کنیم، مفید است.

هنگامی از useRefs استفاده می‌کنیم که باید کارهای زیر را انجام دهیم:

• Focus را تنظیم کنیم و بین پخش text و media یکی را انتخاب کنیم.
• با کتابخانه‌های third-party مربوط به DOM کار کنیم.
• انیمیشن‌های ضروری را ایجاد کنیم.

مثلا:

import React, {useEffect, useRef} from 'react';

const App = () => {
  const inputRef = useRef(null)
  
  useEffect(()=>{
    inputElRef.current.focus()
  }, [])
  
  return(
    <div>
      <input type="text" ref={inputRef} />
    </div>
  )
}

export default App;

Context در React چیست؟

Context برای به اشتراک گذاشتن داده‌های «سراسری» برای درختی از کامپوننت‌های React با اجازه دادن به داده‌ها برای انتقال و استفاده (مصرف) در هر کامپوننتی که در برنامه React خود نیاز داریم، بدون استفاده از props در نظر گرفته شده است. یعنی Context این امکان را به ما می‌دهد تا داده‌ها (state) را راحت‌تر در بین کامپوننت‌های خود به اشتراک بگذاریم.

React Router چیست؟

React Router یک کتابخانه استاندارد است که در برنامه‌های React برای مدیریت مسیریابی و امکان پیمایش بین viewهای کامپوننت‌های مختلف استفاده می‌شود.

نصب این کتابخانه در پروژه React به سادگی با تایپ دستور زیر در ترمینال انجام می‌شود:

npm install – -save react-router-dom