جامع ترین لیست سوالات استخدامی react

در این مقاله تمام سعی و تلاش خود را میکنیم تا جامع ترین لیست سوالات استخدامی react را برای شما دانشجویان جویای کار قرار دهیم.

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

مخصوصا آنجایی که برای مصاحبه وقت دارید و استرس شدیدی را تحمل میکنید!

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

در نظر داشته باشید عموما در مصاحبه ها یکسری سوالات از مفاهیم REACT پرسیده میشود و بعد یک قسمت LIVE TRAINING . به این معنا که هرچقدر هم مفاهیم را خوب بلد باشید، باید توانایی حل مسئله را داشته باشید!

به همین دلیل این مقاله جامع ترین لیست سوالات استخدامی react میتواند کمک شایان توجهی به شما کند. آن را خوانده و برای دوستانتان نیز ارسال نمایید.

خوب…بریم سراغ سوالات…♥

ابتدا تغییرات کلی در ورژن 19 ری اکت

React 19 ویژگی‌ها و بهبودهای جدیدی را ارائه کرده است که به بهینه‌سازی عملکرد و تجربه توسعه‌دهنده کمک می‌کنند. در اینجا به برخی از تغییرات کلیدی در این نسخه اشاره می‌کنیم:

1. کامپایلر جدید React
   یکی از بزرگترین تغییرات در React 19 معرفی کامپایلر جدیدی است که به طور خودکار بهینه‌سازی کد را انجام می‌دهد. این کامپایلر وظیفه دارد تا فرآیند رندرینگ کامپوننت‌ها را بهینه کرده و فقط بخش‌هایی از UI که نیاز به رندر مجدد دارند را بروزرسانی کند. این قابلیت باعث می‌شود که دیگر نیازی به استفاده دستی از تکنیک‌های useMemo و useCallback برای جلوگیری از رندرهای غیرضروری نباشد. این بهبودها به طور قابل توجهی عملکرد برنامه‌ها را افزایش می‌دهند و تجربه‌ی کاربری را روان‌تر می‌کنند.

2. کامپوننت‌های سرور (Server Components)

از مهم‌ترین قابلیت‌های جدید در React 19 هستند. این کامپوننت‌ها بر روی سرور اجرا می‌شوند و محتوای پردازش شده را به کلاینت ارسال می‌کنند.

این ویژگی مزایای زیادی از جمله بهبود SEO و کاهش زمان بارگذاری اولیه صفحات را به همراه دارد.

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

استفاده از کامپوننت‌های سرور به ویژه برای برنامه‌های پیچیده و محتوایی که نیاز به بارگذاری سریع دارند، توصیه می‌شود.

3. ه​مچنین هوک‌های جدیدی را معرفی کرده است که توسعه‌دهندگان را قادر می‌سازد تا به راحتی و با کد کمتری به اهداف خود برسند:
   useOptimistic(): این هوک به توسعه‌دهندگان اجازه می‌دهد که به‌صورت خوش‌بینانه UI را بروزرسانی کنند، در حالی که منتظر پاسخ‌های غیرهمزمان هستند. این ویژگی باعث می‌شود که کاربران تجربه‌ی سریعتری داشته باشند و تغییرات را به سرعت مشاهده کنند.
   اکشن‌ها به شکلی ساده‌تر طراحی شده است و به توسعه‌دهندگان کمک می‌کند تا به راحتی و بدون نیاز به مدیریت دستی، حالت‌ها و خطاها را کنترل کنند.
   use(): این هوک به توسعه‌دهندگان اجازه می‌دهد که مستقیماً از Promise یا Context درون کامپوننت‌ها استفاده کنند، بدون نیاز به استفاده از useEffect یا useState.
4. بهبود بارگذاری منابع و متادیتا​ در نحوه بارگذاری منابع ارائه می‌دهد که به بهبود زمان بارگذاری صفحات کمک می‌کند. همچنین کامپوننت جدیدی به نام معرفی شده است که مدیریت متادیتاها مانند عنوان‌ها و تگ‌های متا را آسان‌تر می‌کند، که این امر به بهبود SEO کمک می‌کند.

ReactJS چیست؟

ری اکت یک کتابخانه متن باز یا open source جاوا اسکریپتی است که برای ایجاد رابط کاربری (user interface) به ویژه برای وب اپلیکیشن های تک صفحه ای (SPA: Single-Page-Application) بکار می رود.

در واقع از کتابخانه ری اکت برای مدیریت و کنترل لایه View در وب اپلیکیشن ها و برنامه های موبایل استفاده می شود. ReactJS توسط آقای Jordan Walke در شرکت فیسبوک راه اندازی و توسعه داده شد و در ماه May سال 2013 اولین نسخه ری اکت به بازار وب عرضه شد .

آیا با ری اکت فقط سایت های تک صفحه میسازند؟

پاسخ منفیست و میتوان با افزودن پکیج های REACT ROUTR و یا NEXT.js سایت های چند صفحه ای هم ساخت.

تفاوت DOM و Virtual DOM

DOM مخفف Document Object Model است. این یک نام fancy به معنای تفننی و خیالی ، برای نحوه نمایش HTML در حافظه است. مدل های مختلف و متفاوتی برای دسترسی به عناصر در اچ تی ام ال دارد. مانند getElementById و…

با توجه به افزایش اندازه و پیچیدگی نشانه گذاری های HTML، هر بار که ما DOM را تغییر میدهیم باید کل این درخت بزرگ را طی کنیم که باعث کاهش عملکرد و سرعت می شود.

اما مفهوم Virtual DOM

virtual DOM یک نمونه از همان DOM است که native(محلی – بومی – فرزند – جزو و…) برای React است.

همانطور که میدانید با setState شما حداقل تعداد یک re-render برای کامپوننت ها و فرزندانشون رو می تونید تصور کنید. این تغییرات فقط بخاط بروزشدن state رخ می دهد.

بعد از بروزرسانی های مورد نیاز کامپوننت ها در virtual DOM، یک مقایسه با DOM انجام می شود و تغییرات مورد نیاز روی DOM اعمال می شود.

این کار باعث می شود تا تمام ساختار درخت طی نشود و فقط گره هایی که مورد نیاز است بروز شود.یکی از دلایلی که باعث سرعت بالای React در لود شدن صفحات است، virtual DOM میباشد.

مفهوم Shadow DOM

همین ابتدا بگوییم shadow DOM ربطی به ری اکت ندارد، ولی بخاطر شباهت با virtual DOM در اینجا آورده شده است تا تفاوت آنها را خوب بدانید!

shadow DOM یه تکنولوژی مرورگره که در ابتدا برای تعیین متغیر‌ها و ایزوله‌سازی css دروب کامپوننت(Web component) طراحی شده بود.

Shadow DOM یک ویژگی CSS است که به توسعه دهندگان اجازه می دهد تا یک درخت DOM جداگانه ایجاد کنند که از درخت DOM اصلی جدا است. این درخت DOM جداگانه به عنوان Shadow DOM شناخته می شود.

Shadow DOM مزایای زیادی برای توسعه دهندگان دارد، از جمله:

• کنترل بیشتر بر ظاهر و رفتار عناصر: Shadow DOM به توسعه دهندگان اجازه می دهد تا ظاهر و رفتار عناصر را بدون تأثیرگذاری بر سایر عناصر در صفحه کنترل کنند.
• بهبود عملکرد: Shadow DOM می تواند عملکرد را بهبود بخشد زیرا عناصر Shadow DOM از درخت DOM اصلی جدا هستند.
• ایجاد عناصر قابل استفاده مجدد: Shadow DOM می تواند برای ایجاد عناصر قابل استفاده مجدد استفاده شود که می توانند در چندین صفحه استفاده شوند.

برای ایجاد یک Shadow DOM، باید از ویژگی ::shadow استفاده کنید. ویژگی ::shadow به شما امکان می دهد یک درخت DOM جداگانه برای یک عنصر ایجاد کنید.

<div id="my-element">
  <h1>This is my element</h1>
  <p>This is a paragraph</p>
</div>

<style>
  #my-element::shadow {
    color: red;
  }
</style>

فرض کنید شما می‌خواهید یک دکمه با طراحی خاص بسازید که استایل آن فقط بر روی خود دکمه اعمال شود و تأثیری بر سایر قسمت‌های صفحه نداشته باشد. به‌جای اینکه استایل‌ها را در سراسر صفحه اعمال کنید، می‌توانید از Shadow DOM استفاده کنید تا طراحی دکمه را به‌طور مجزا و ایزوله کنید.

<div id="my-element"></div>
<script>
  const element = document.querySelector('#my-element');
  const shadow = element.attachShadow({ mode: 'open' });
  shadow.innerHTML = `<style>p { color: red; }</style><p>Hello Shadow DOM!</p>`;
</script>

آیا میدانید مدرسه پرنیان، دوره آموزش فرانت اند حرفه ای بصورت حضوری و مجازی برگزار میکند؟

مقایسه STATE و PROPS

Props ها داده هایی هستند که از طریق والد می آیند و میتوانند دیتا را بین کامپوننت ها منتقل نمایند.

در حالی که state ها داده هایی در سطح کامپوننت هستند (اگر از کلاس استفاده میکنید، در حالت کلی همراه متد SUPER میتوانید سطح دسترسی داده را در کل کامپوننت آزاد کنید)

مقایسه کنید هوک useMemo و useCallback

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

کاربرد هوک useCallback در React این است که در هر render از ایجاد مجدد توابعی که در بدنه کامپوننت تعریف شده‌اند، جلوگیری کند.

این کار می‌تواند منجر به مشکلات عملکرد غیرضروری شود، به خصوص برای توابع callback که به کامپوننت‌های child نیز منتقل می‌شوند.

از طرف دیگر useMemo فرایندهایی که پردازش‌های سنگین دارند را به خاطر می‌سپارد.

Memoization یک اصطلاح فنی برای توابعی است که اگر آرگومان‌هایشان تغییر نکرده باشد، می‌توانند مقادیر گذشته را که محاسبه کرده‌اند “به خاطر بیاورند”. در این صورت، تابع مقدار “یادآوری شده” را برمی‌گرداند.

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

در این صورت، از هوک useMemo استفاده می‌کنیم که با هوک useCallback تفاوت دارد زیرا یک مقدار برمی‌گرداند، نه یک تابع.

هم useMemo و هم useCallback یک تابع و یک آرایه از وابستگی‌ها را می‌پذیرند.

اساسا تنها تفاوت بین این هوک‌ها این است که یکی نوع مقدار را در حافظه نگه می‌دارد و دیگری تابع را در حافظه ذخیره می‌کند.

مثال از callback:

import React, { useState, useEffect, useCallback } from "react";
// import "./styles.css";
  
export default function App() {
  const [num, setNum] = useState(0);
  const [light, setLight] = useState(true);
  const plusFive = useCallback(() => {
    console.log("I was called!");
    return num + 5;
  }, [num]);
  return (
    <div className={light ? "light" : "dark"}>
      <div>
        <h1>With useCallback</h1>
        <h2>
          Current number: {num},
          <SomeComp someFunc={plusFive} />
        </h2>
        <div className="button-container">
          <button
            onClick={() => {
              setNum(num + 1);
            }}
          >
            Update Number{" "}
          </button>
          <button
            onClick={() => {
              setLight(!light);
            }}
          >
            {" "}
            Toggle the light{" "}
          </button>
        </div>
      </div>
    </div>
  );
}
  
const SomeComp = ({ someFunc }) => {
  const [calcNum, setCalcNum] = useState(0);
  useEffect(() => {
    setCalcNum(someFunc());
  }, [someFunc]);
  
  return <span> Plus five: {calcNum}</span>;
};

اما بهترین مثال برای درک درست تفاوت این دو هوک :

import React, { useState, useEffect, useCallback } from "react";
// import "./styles.css";
const App = () => {
const fooFunction = () => {
return 'Foo is just Food without D'
}
  
const useMemoResult = React.useMemo(fooFunction, [])
const useCallbackResult = React.useCallback(fooFunction, [])
  
console.log('useMemoResult: ', useMemoResult)
console.log('useCallbackResult: ', useCallbackResult)
  
return <p>Foo is just food without D</p>
}
export default App

استفاده از <DocumentHead> در React 19

<DocumentHead> یک کامپوننت جدید در React 19 است که به شما امکان می‌دهد به سادگی متادیتاها را در سطح اسناد مدیریت کنید.

این روش به ویژه برای بهبود SEO و کنترل بهتر روی اطلاعاتی که به مرورگرها و موتورهای جستجو ارسال می‌شود، مفید است.

import React from 'react';
import { DocumentHead } from 'react';

function MyComponent() {
  return (
    <div>
      <DocumentHead>
        <title>عنوان صفحه من</title>
        <meta name="description" content="توضیحات مربوط به صفحه من" />
        <meta name="keywords" content="React, SEO, meta tags" />
      </DocumentHead>
      <h1>صفحه من</h1>
      <p>محتوای صفحه من در اینجا قرار می‌گیرد.</p>
    </div>
  );
}

export default MyComponent;

React Query را با مثال توضیح دهید

React Query یک کتابخانه قدرتمند برای مدیریت فچ داده‌ها در اپلیکیشن‌های React است.

این کتابخانه به شما کمک می‌کند تا درخواست‌های HTTP را به صورت آسان مدیریت کنید، داده‌ها را در حافظه کش کنید و همچنین حالت‌های مختلفی مانند بارگذاری، موفقیت و خطا را به خوبی مدیریت کنید.

چرا از React Query استفاده کنیم؟

• سادگی استفاده: با استفاده از هوک‌های ساده‌ای مانند useQuery و useMutation می‌توانید به راحتی درخواست‌های HTTP را انجام داده و داده‌ها را مدیریت کنید.
• مدیریت خودکار حالت: React Query به طور خودکار حالت‌های مختلف یک درخواست (بارگذاری، موفقیت، خطا) را مدیریت می‌کند.
• کش کردن داده‌ها: داده‌های دریافت شده به صورت خودکار کش می‌شوند تا از درخواست‌های تکراری جلوگیری شود و عملکرد اپلیکیشن بهبود یابد.
• بهبود عملکرد: با استفاده از React Query، عملکرد اپلیکیشن شما بهبود می‌یابد.
• انعطاف‌پذیری: React Query به شما امکان می‌دهد تا درخواست‌های پیچیده‌تری را با استفاده از ویژگی‌هایی مانند staleTime, cacheTime و refetchOnWindowFocus

مثال زیر:

import React from 'react';
import { useQuery } from 'react-query';
import { QueryClient, QueryClientProvider } from 'react-query';
function PostList() {
  const { isLoading, error, data } = useQuery('posts', () =>
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
  );
  return (
    <div>
      {isLoading && <p>در حال بارگذاری پست‌ها...</p>}
      {error && <p>خطایی رخ داده است: {error.message}</p>}
      {data && (
        <ul>
          {data.map(post => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default function App() {
  const queryClient = new QueryClient();   
  return (
    <QueryClientProvider client={queryClient}>   
      <PostList />
    </QueryClientProvider>
  );
}

مفهوم React Server Components (RSC) چیست با مثال

اجزای سرور در React (React Server Components یا RSC) یک روش جدید برای رندر کردن کامپوننت‌های React است که در آن بخش بزرگی از کار رندر کردن بر روی سرور انجام می‌شود و نتیجه آن به صورت HTML به مرورگر ارسال می‌شود.

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

چگونه RSC کار می‌کند؟

1. رندر کردن بر روی سرور: هنگامی که یک درخواست به سرور ارسال می‌شود، کامپوننت‌های RSC در سمت سرور رندر می‌شوند و خروجی HTML آنها تولید می‌شود.
2. ارسال HTML به کلاینت: HTML تولید شده به همراه داده‌های لازم برای هیدراتاسیون به مرورگر ارسال می‌شود.
3. هیدراتاسیون در کلاینت: در مرورگر، React این HTML را دریافت کرده و آن را به یک درخت کامپوننت تبدیل می‌کند. این فرآیند را هیدراتاسیون می‌نامند.

مزایای RSC

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

برای نوشتن RSC، ابتدا یک فایل BlogPosts.server.jsx بسازید

function BlogPosts() {
  return (
    <div>
      <h1>Blog Posts</h1>
      <p>aslmammmmmmmmmmmmmm</p>
    </div>
  );
}

export default BlogPosts;

استفاده از کامپوننت سمت سرور

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

 import BlogPosts from './BlogPosts.server';

function App() {
  return (
    <div>
      <h1>Welcome to My Blog</h1>
      <BlogPosts />
    </div>
  );
}

export default App; 

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

const ComponentC = dynamic(() => import(`../components/C`), { ssr: false });

مفهوم هوک useOptimistic را بیان کنید(جدید در ری اکت19)

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

مثال ساده از استفاده useOptimistic

لیست وظایف با افزودن خوش‌بینانه (Optimistic UI)

import { useState, useOptimistic } from "react";

export default function TodoList() {
  const [todos, setTodos] = useState(["Learn React", "Build a project"]);
  
  // مقدار اولیه و تابع برای تغییر خوش‌بینانه
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(todos, (currentTodos, newTodo) => [
    ...currentTodos,
    newTodo,
  ]);

  const handleAddTodo = async () => {
    const newTodo = "New Task";
    addOptimisticTodo(newTodo); // ابتدا وظیفه را در لیست نمایش می‌دهیم

    // شبیه‌سازی درخواست سرور با تأخیر
    await new Promise((resolve) => setTimeout(resolve, 2000));

    // پس از دریافت پاسخ از سرور، داده واقعی را ذخیره می‌کنیم
    setTodos((prev) => [...prev, newTodo]);
  };

  return (
    <div>
      <h3>Todo List</h3>
      <ul>
        {optimisticTodos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <button onClick={handleAddTodo}>Add Todo</button>
    </div>
  );
}

هوک useActionState در ری اکت به چه معناست؟ (از ویژگی های نسخه جدید19)

هوک useActionState یک ابزار قدرتمند در ری اکت است که به شما امکان می‌دهد حالت (state) یک کامپوننت را در طول عملیات‌های ناهمزمان(مانند درخواست‌های API، عملیات‌های ذخیره‌سازی و …) به طور موثر مدیریت کنید.

این هوک در حال حاضر آزمایشی است.به چارچوبی نیاز دارد که از React Server Components پشتیبانی کند.آرایه‌ای را با وضعیت فعلی و یک اقدام جدید برمی‌گرداند.

کد زیر نمونه از این هوک که البته فعلا خوب کار نمیکند!

import { useActionState } from "react";

async function increment(previousState, formData) {
  return previousState + 1;
}

function StatefulForm({}) {
  const [state, formAction] = useActionState(increment, 0);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  )
}

Portal در ری اکت به چه معناست؟

در React، پورتال‌ها (Portals) به شما امکان می‌دهند که یک کامپوننت را خارج از سلسله مراتب DOM والد خود رندر کنید. این ویژگی به ویژه در مواقعی مفید است که می‌خواهید محتوایی مانند مودال‌ها، توست‌ها، یا منوهای شناور را رندر کنید، زیرا این عناصر معمولاً باید در لایه‌ای بالاتر از سایر محتویات صفحه ظاهر شوند، بدون اینکه توسط استایل‌های والد تحت تاثیر قرار بگیرند.

پورتال‌ها با استفاده از تابع ReactDOM.createPortal ایجاد می‌شوند. این تابع دو آرگومان می‌پذیرد:

1. محتوایی که می‌خواهید رندر کنید (عنصر React).
2. عنصری از DOM که محتوای رندر شده باید به آن متصل شود.

مثال ساده از استفاده پورتال

فرض کنید می‌خواهید یک مودال ساده بسازید که در بالای سایر محتویات صفحه نمایش داده شود.

HTML

ابتدا باید یک عنصر در HTML خود داشته باشید که به عنوان ریشه مودال‌ها استفاده شود:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Portal Example</title>
</head>
<body>
  <div id="root"></div>
  <div id="modal-root"></div> <!-- این عنصر برای رندر مودال‌ها استفاده می‌شود -->
</body>
</html>

حال، یک کامپوننت React برای مودال ایجاد می‌کنیم:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Modal({ isOpen, onClose }) {
  if (!isOpen) {
    return null;
  }

  return ReactDOM.createPortal(
    <div style={modalStyles}>
      <div style={modalContentStyles}>
        <h2>Modal Title</h2>
        <p>This is a modal content.</p>
        <button onClick={onClose}>Close Modal</button>
      </div>
    </div>,
    document.getElementById('modal-root')
  );
}

const modalStyles = {
  position: 'fixed',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  backgroundColor: 'rgba(0,0,0,0.5)',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
};

const modalContentStyles = {
  backgroundColor: '#fff',
  padding: '20px',
  borderRadius: '5px',
  boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
};

function App() {
  const [isModalOpen, setModalOpen] = useState(false);

  const handleOpenModal = () => setModalOpen(true);
  const handleCloseModal = () => setModalOpen(false);

  return (
    <div>
      <h1>React Portal Example</h1>
      <button onClick={handleOpenModal}>Open Modal</button>
      <Modal isOpen={isModalOpen} onClose={handleCloseModal} />
    </div>
  );
}

export default App;

در ری اکت preconnect به چه معناست؟

در React یا به طور کلی در توسعه وب، preconnect یک تکنیک بهینه‌سازی است که به مرورگرها کمک می‌کند تا زمان بارگذاری صفحات وب را کاهش دهند. این تکنیک به مرورگر می‌گوید که به سرورهایی که ممکن است به آن‌ها نیاز داشته باشد، پیش‌اتصال برقرار کند. این کار باعث کاهش زمان تأخیر هنگام برقراری اتصال به این سرورها می‌شود.

نحوه عملکرد preconnect

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- Preconnect to a third-party domain -->
  <link rel="preconnect" href="https://example.com">
</head>
<body>
  <div id="root"></div>
</body>
</html>

ویا سینتکس ری اکتی آن:

import { preconnect } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preconnect('http://example.com');
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}

مهمترین آپدیت ری اکت از چه ورژنی بود و چه چیزهایی اضافه شد؟

مهمترین آپدیت را میتوان نسخه 16.8 و بالاتر دانست، زیرا مفهوم هوک های REACT به آن اضافه شد و دیگر توانستیم با کد کمتر، تمیز تر ، آسان تر و قابل فهم تر از function ها بجای class استفاده کرده و از تمامی امکانات آن بهره مند شویم.

در ری اکت preload به چه معناست؟

در React و به طور کلی در توسعه وب، preload به تکنیک‌های بهینه‌سازی بارگذاری منابع اشاره دارد که به مرورگرها کمک می‌کند تا منابع را به طور بهینه بارگذاری کنند. این تکنیک باعث می‌شود که مرورگر بتواند منابع مورد نیاز را پیش از اینکه واقعاً به آن‌ها نیاز پیدا کنید، بارگذاری کند و در نتیجه تجربه کاربری بهتری ارائه دهد.

مفهوم preload

تگ <link rel="preload"> یکی از روش‌های استفاده از preload است که به مرورگر دستور می‌دهد تا منابع خاصی (مانند اسکریپت‌ها، استایل‌ها، تصاویر، فونت‌ها و غیره) را قبل از نیاز به آن‌ها بارگذاری کند. این کار به مرورگر کمک می‌کند تا منابع مورد نیاز را سریع‌تر آماده کند و از زمان تأخیر در بارگذاری جلوگیری کند.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- Preload a CSS file -->
  <link rel="preload" href="/styles/main.css" as="style">
  <!-- Preload a JavaScript file -->
  <link rel="preload" href="/scripts/main.js" as="script">
  <!-- Preload an image -->
  <link rel="preload" href="/images/logo.png" as="image">
</head>
<body>
  <div id="root"></div>
</body>
</html>

و مثال ری اکتی آن:

import { preload } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preload("https://example.com/wizardStyles.css", {as: "style"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}

کامپوننت های کنترل شده و کنترل نشده

در ری اکت، کامپوننت های کنترل شده و کنترل نشده دو نوع کامپوننت هستند که برای مدیریت داده های فرم استفاده می شوند.

کامپوننت های کنترل شده

در یک کامپوننت کنترل شده، داده های فرم توسط کامپوننت ری اکت مدیریت می شوند. این بدان معناست که کامپوننت ری اکت مسئول دریافت تغییرات داده ها از کاربر و اعمال آن تغییرات است.

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

در اینجا یک مثال ساده از یک کامپوننت کنترل شده آورده شده است:

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        type="text"
        placeholder="Your name"
        value={name}
        onChange={(event) => setName(event.target.value)}
      />
      <p>Your name is: {name}</p>
    </div>
  );
}

export default App;

در این مثال، ما از ویژگی value برای ذخیره مقدار فعلی نام کاربر استفاده می کنیم. سپس از یک متد رویداد onChange برای دریافت تغییرات داده ها از کاربر استفاده می کنیم.

کامپوننت های کنترل نشده

در یک کامپوننت کنترل نشده، داده های فرم توسط DOM مدیریت می شوند. این بدان معناست که کامپوننت ری اکت مسئولیت دریافت تغییرات داده ها از کاربر را ندارد.

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

در اینجا یک مثال ساده از یک کامپوننت کنترل نشده آورده شده است:

import React, { useRef } from "react";

function App() {
  const inputRef = useRef(null);

  return (
    <div>
      <input
        type="text"
        placeholder="Your name"
        ref={inputRef}
      />
      <p>Your name is: {inputRef.current.value}</p>
    </div>
  );
}

export default App;

در این مثال، ما از ویژگی ref برای ذخیره یک شی DOM برای عنصر ورودی استفاده می کنیم. سپس از شی DOM برای دسترسی به مقدار فعلی نام کاربر استفاده می کنیم.

تفاوت بین کامپوننت های کنترل شده و کنترل نشده

تفاوت اصلی بین کامپوننت های کنترل شده و کنترل نشده در این است که در یک کامپوننت کنترل شده، کامپوننت ری اکت مسئولیت دریافت تغییرات داده ها از کاربر را دارد، در حالی که در یک کامپوننت کنترل نشده، DOM مسئولیت دریافت تغییرات داده ها از کاربر را دارد.

مزایا و معایب کامپوننت های کنترل شده و کنترل نشده

کامپوننت های کنترل شده مزایای زیر را دارند:

• کنترل بیشتر بر داده های فرم: کامپوننت ری اکت مسئول دریافت تغییرات داده ها از کاربر است، بنابراین شما کنترل بیشتری بر نحوه مدیریت داده های فرم دارید.
• جلوگیری از خطاها: کامپوننت ری اکت می تواند از خطاهای ورودی کاربر جلوگیری کند، مانند ارسال فرم با داده های ناقص.

کامپوننت های کنترل نشده مزایای زیر را دارند:

• سادگی: کامپوننت های کنترل نشده ساده تر از کامپوننت های کنترل شده هستند.
• انعطاف پذیری: کامپوننت های کنترل نشده انعطاف پذیرتر از کامپوننت های کنترل شده هستند.

کدام نوع کامپوننت را باید استفاده کنید؟

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

ویژگی های اصلی کتابخانه ری اکت چیست؟

از Virtual-DOM بجای Real-DOM استفاده می کند. به این دلیل که دستکاری و تغییر DOM اصلی سنگین و هزینه بر است.
از رندر سمت سرور (SSR: Server-Side-Rendering) پشتیبانی می کند ولی بصورت دیفالت CSR هست.
در عملیات اتصال داده (Data-Binding) بصورت یک طرفه (Unidirectional) کار می کند.
از کامپوننت های قابل استفاده مجدد (reusable/composable) برای توسعه UI اپلیکیشن استفاده می کند.

عملیات اتصال داده در ری اکت به چه معناست؟

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

اتصال داده دستی

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

در اینجا یک مثال ساده از اتصال داده دستی آورده شده است:

import React, { useState } from "react";
function App() {
  const [users, setUsers] = useState([]);
  const fetchUsers = async () => {
    const response = await fetch("https://api.example.com/users");
    const data = await response.json();
    setUsers(data);
  };
  useEffect(() => {
    fetchUsers();
  }, []);
  return (
    <div>
      {users.map((user) => (
        <div key={user.id}>
          {user.name}
        </div>
      ))}
    </div>
  );
}

در این مثال، ما از یک API HTTP برای دریافت داده‌های کاربران از یک سرور خارجی استفاده می‌کنیم. سپس داده‌ها را به کامپوننت ری اکت منتقل می‌کنیم و آن را در یک آرایه ذخیره می‌کنیم.

اتصال داده خودکار

در اتصال داده خودکار، ری اکت به طور خودکار داده‌ها را از منبع داده خارجی به کامپوننت ری اکت منتقل می‌کند. این کار معمولاً با استفاده از کتابخانه‌های اتصال داده مانند react-query یا urql انجام می‌شود.

در اینجا یک مثال ساده از اتصال داده خودکار آورده شده است:

import React, { useQuery } from "react";
function App() {
  const { data, isLoading } = useQuery("users", () =>
    fetch("https://api.example.com/users").then((response) => response.json())
  );
  return (
    <div>
      {isLoading ? "Loading..." : (
        <div>
          {data.map((user) => (
            <div key={user.id}>
              {user.name}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

در این مثال، ما از کتابخانه react-query برای اتصال داده‌های کاربران از یک سرور خارجی استفاده می‌کنیم. react-query به طور خودکار داده‌ها را از سرور دریافت می‌کند و آن را در یک آرایه ذخیره می‌کند.

مزایا و معایب عملیات اتصال داده

عملیات اتصال داده مزایای زیر را دارد:

• سادگی: عملیات اتصال داده می‌تواند به ساده‌سازی کد ری اکت کمک کند.
• بهبود عملکرد: عملیات اتصال داده می‌تواند عملکرد ری اکت را بهبود بخشد.
• قابلیت تکرارپذیری: عملیات اتصال داده می‌تواند قابلیت تکرارپذیری ری اکت را بهبود بخشد.

عملیات اتصال داده معایب زیر را نیز دارد:

• وابستگی به منبع داده خارجی: عملیات اتصال داده به یک منبع داده خارجی وابسته است.
• پیچیدگی: عملیات اتصال داده می‌تواند پیچیده باشد.

نتیجه‌گیری

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

SSR چیست

بیایید با تعریف «رندر» شروع کنیم. رندر فرآیند بازیابی یک صفحه وب، راه اندازی کد، و ارزیابی ساختار و طراحی یک صفحه است. رندرینگ می تواند به روش های مختلفی رخ دهد: سمت کلاینت، سمت سرور و پویا.

 رندر سمت سرور یا همان SSR فرآیند رندر کردن صفحات وب شما از طریق سرور های سایت شما است. در رندر سمت مشتری (CSR)، این فرآیند از طریق مرورگر کاربر تکمیل می شود. همچنین فرآیند رندر پویا از طریق یک سرور شخص ثالث انجام می شود.

دو نسخه از صفحه وب شما با SSR وجود دارد که شما را مجاب می کند بدانید SSR چیست و چه مشکلاتی به همراه دارد: HTML اولیه و HTML ارائه شده، معروف به DOM (مدل شی مستقیم).

گوگل فقط می تواند به HTML ارائه شده دسترسی داشته باشد. این بدان معناست که برای دریافت “اعتبار” از موتور جستجو بسیار مهم است که عناصر و محتواهای کلیدی ارائه شوند.

رندر سمت سرور به معنای تولید HTML برای یک صفحه وب در سمت سرور است.

بوسیله فریم ورک نکست جی اس (NextJS) می توان رندر شدن اپلیکیشن ری اکت را در سمت سرور (SSR) پیاده سازی کرد. 

JSX چیست؟

ساختاری است شبیه XML که در اکما اسکریپت (ECMAscript) بکار می رود. JSX امکان نوشتن کدهای html در بین کدهای جاوا اسکریپت و در تابع React.createElement را برای توسعه دهندگان فراهم می کند.

پیشنهاد میکنیم مقاله مفهوم و قواعد jsx در javascript را در وبلاگ پرنیان حتما مطالعه فرمایید

چه زمانی باید از Class Component و کی از function Component استفاده کنیم

میشه گفت هیچ لزومی به این‌کار نیست و از ورژن 16.8 ری‌اکت به بعد و با اضافه شدن هوک‌ها به فانکشن کامپوننت‌ها، شما می‌توانید از state یا lifecycle methodها یا تمامی فیچرهایی که قبلا فقط در کلاس کامپوننت ‌ها قابل استفاده بود، در فانکشن کامپوننت‌هاتون استفاده کنید.

البته امروزه برنامه نویسان بیشتر از فانکشن کامپوننت برای کد نویسی استفاده میکنند.

از دلایل این کار که در سایت ری اکت نوشته شده است میتوان به موارد زیر اشاره کرد:

• کدنویس راحت تر
• فهم و ادیت راحتتر
• عدم گیج شدن و خطا دادن سیستم

تفاوت Component و PureComponent

Component و PureComponent دو کلاس پایه هستند که می‌توان از آنها برای ایجاد کامپوننت‌های ری اکت استفاده کرد. انتخاب کلاس مناسب برای کامپوننت به نیازهای خاص شما بستگی دارد. اگر می‌خواهید عملکرد را بهبود ببخشید، باید از PureComponent استفاده کنید. اگر می‌خواهید اطمینان حاصل کنید که کامپوننت در هر بار تغییر state یا props مجدداً رندر می‌شود، باید از Component استفاده کنید.

مثال :

import React, { PureComponent } from 'react';
class HelloWorld extends React.PureComponent {
 render() {
    return (
        Hello World
    );
   }
}
export default HelloWorld;

تفاوت careatRoot و hydrateRoot در ری اکت

در React، createRoot و hydrateRoot دو متد متفاوت برای رندر کردن کامپوننت‌های React به کار می‌روند که هر کدام برای سناریوهای خاصی طراحی شده‌اند. این متدها بخشی از API جدید ReactDOM هستند که با React 18 معرفی شدند. بیایید تفاوت‌های کلیدی این دو متد را بررسی کنیم:

createRoot

• هدف: createRoot برای رندر کردن یک اپلیکیشن React از صفر (یا برای ایجاد رندرینگ کامل) استفاده می‌شود.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);

root.render(<App />);

hydrateRoot

• هدف: hydrateRoot برای “هیدراته کردن” اپلیکیشن‌های React استفاده می‌شود که قبلاً توسط سرور رندر شده‌اند.
• این متد برای اپلیکیشن‌هایی که به صورت SSR (Server-Side Rendering) رندر شده‌اند و سپس به سمت کلاینت ارسال می‌شوند، استفاده می‌شود.هدف از هیدراته کردن، مطابقت دادن HTML پیش‌ساخته با نسخه‌ای از React است که در سمت کلاینت بارگذاری می‌شود.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const rootElement = document.getElementById('root');
const root = ReactDOM.hydrateRoot(rootElement, <App />);

تفاوت Functional Component با Class Component در چیست

خوب میدانید که اگر با فانکشن بنویسیم میشود Functional و اگر با کلاس بنویسیم میشود Class.

این نکته را هم میدانید که با افزودن هوک ها، دیگر ویژگی های مشترکی دارند.

اما مهمترین ویژگی خروجی آنهاست. یک کد یکسان را در دو خروجی نشان میدهیم. خودتان قضاوت کنید.

DEV – function component:

import React from 'react';
const HelloWorld = () =>
Hello World;
export default HelloWorld;

DEV – class component:

import React, { PureComponent } from 'react';
class HelloWorld extends React.PureComponent {
render() {
return (
Hello World
);
}
}
export default HelloWorld;

تفاوت بین Element و Component

یک المنت یک آبجکت ساده (plain object) است که بیانگر چیزی است که قرار است بعنوان یک گره (node) در DOM نمایش یابد.(مانند تگ h1)

در حالیکه یک Component می تواند به روش های مختلفی تعریف شود. می تواند یک class ، function با متد render باشد.

چرا نباید state را مستقیما آپدیت کنیم؟

اگه یه بار تلاش کنید که مستقیما state را آپدیت کنید متوجه می‌شوید که کامپوننت شما مجددا render نمیشود.

به جای اینکه مستقیما state را آپدیت کنیم باید از متد setState در Class Component و از useState در Function Components استفاده کنیم.

این متدها یک آپدیت در شی state را برنامه ریزی و مدیریت می‌کنند و وقتی تغییر انجام شد ، کامپوننت شما re-render خواهد شد.

آیا میتواند متد setState کال بک داشته باشد؟

تابع callback درون setState زمانی صدا زده می شود که مقدار state تغییر کرده باشد و کامپوننت re-render شده باشد.

از آنجائیکه متد setState بصورت ناهمگام یا asynchronous اجرا می شود، تابع کال بک می تواند در تمام اکشن های post صدا زده شود.

setState({ name: ‘John’ }, () => console.log(‘changed!’))

مدیریت کننده پکیج یا Packge Manager چیست؟

در مرحله اول شما باید بدانید مدیریت کننده پکیج ها یا Package Manager چیست؟

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

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

برخی از محبوب‌ترین مدیریت‌کنندگان پکیج عبارتند از:

• npm برای JavaScript و Node.js
• pip برای Python
• gem برای Ruby
• maven برای Java
• gradle برای Java

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

مدیریت کننده پکیج کاربردهای مختلفی دارد، از جمله:

• نصب بسته‌های نرم‌افزاری: مدیریت کننده پکیج می‌تواند بسته‌های نرم‌افزاری را از یک مخزن مرکزی دانلود و نصب کند.
• مدیریت نسخه‌های بسته‌های نرم‌افزاری: مدیریت کننده پکیج می‌تواند به توسعه‌دهندگان کمک کند تا نسخه‌های بسته‌های نرم‌افزاری مورد نیاز خود را مدیریت کنند.
• ساخت پروژه‌های نرم‌افزاری: مدیریت کننده پکیج می‌تواند به توسعه‌دهندگان کمک کند تا پروژه‌های نرم‌افزاری خود را با استفاده از بسته‌های نرم‌افزاری موجود ایجاد کنند.
• توزیع بسته‌های نرم‌افزاری: مدیریت کننده پکیج می‌تواند به توسعه‌دهندگان کمک کند تا بسته‌های نرم‌افزاری خود را به اشتراک بگذارند.

npm چیست؟

npm یا node package manager مدیریت کننده پکیج های nodejs به صورت پیش فرض می باشد. چون همانطوری که می دانید برای کار با React.js باید حتما نود جی اس روی سیستم شما نصب باشد.

کار کردن با npm به صورت Command-line یا خط فرمان می باشد و از طریق آن به هزاران پکیج مختلف دسترسی دارید. بعد از نصب nodejs نرم افزار مدیریت کننده پکیج یا همان npm هم به صورت خودکار نصب می شود.

تفاوت بسته های npm و yarn در ری اکت چیست ؟

npm کاستی هایی داشت که شرکت فیس بوک تلاش کرد این کاستی ها را برطرف سازد. به همین جهت فیس بوک yarn را ارائه داد.

در واقع yarn جایگزین یا رقیب npm نیست بلکه یک installer می باشد که در کنار npm هست و از همان ساختار npm و رجیستری استفاده می کند.

npm و yarn در عمل تفاوت خاصی ندارند و yarn سریعتر هم هست.

نصب yarn:

npm install yarn –global

رویداد synthetic در ری اکت

SyntheticEvent یک wrapper در اطراف رویدادهای نیتیو مرورگر است. در واقع API آنها مشترک است. مانند رویدادهای stopPropagation و preventDefault.

در ری اکت، رویدادهای synthetic رویدادهایی هستند که توسط ری اکت ساخته می‌شوند. این رویدادها بر رویدادهای DOM اصلی مانند click، change، و submit سوار می‌شوند.

رویدادهای synthetic مزایای مختلفی نسبت به رویدادهای DOM اصلی دارند، از جمله:

• سازگاری: رویدادهای synthetic با مرورگرهای مختلف سازگار هستند.
• قابلیت تکرارپذیری: رویدادهای synthetic را می‌توان به راحتی در محیط آزمایشی تکرار کرد.
• قابلیت تست: رویدادهای synthetic را می‌توان به راحتی با استفاده از کتابخانه‌های تست ری اکت تست کرد.

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

در اینجا یک مثال ساده از استفاده از رویداد synthetic آورده شده است:

import React, { useState } from "react";
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <p>Count: {count}</p>
    </div>
  );
}
export default App;

در این مثال، ما از یک دکمه برای افزایش شمارنده استفاده می‌کنیم. رویداد onClick کامپوننت بر رویداد click سوار می‌شود.

اگر این مثال را با استفاده از react-dom اجرا کنید، خواهید دید که شمارنده هر بار که دکمه کلیک شود، افزایش می‌یابد.

تفاوت بین رویدادهای synthetic و رویدادهای DOM اصلی

تفاوت اصلی بین رویدادهای synthetic و رویدادهای DOM اصلی در این است که رویدادهای synthetic توسط ری اکت ساخته می‌شوند، در حالی که رویدادهای DOM اصلی توسط مرورگر ایجاد می‌شوند.

رویدادهای synthetic مزایای مختلفی نسبت به رویدادهای DOM اصلی دارند، اما معایبی نیز دارند. یکی از معایب رویدادهای synthetic این است که آنها کمی کندتر از رویدادهای DOM اصلی هستند.

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

اتریبیوت “key” در آرایه ها چیست؟

وقتی در ری اکت می خواهیم یک لیستی از آیتم ها تعریف کنیم، باید حتما اتریبیوت key را نیز برای آنها بیاوریم. در واقع این key به ری اکت می گوید کدام آیتم تغییر پیدا کرده یا حذف و یا اضافه شده. معمولا با عنوان id آن را می شناسیم.

استایل دهی به روش مستیم در react.js چگونه است؟

بایستی حتما به اتریبیوت style ورودی آبجکت باشد.

<p style={{color:'blue', fontWeight:'bold'}}>Hello World !!!</p>
</kbd></code></pre>

Forward ref چیست؟

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

برای استفاده از forward ref، از تابع forwardRef() استفاده می‌شود. تابع forwardRef() یک کامپوننت را به عنوان آرگومان می‌گیرد و یک ref را به عنوان مقدار برمی‌گرداند.

در اینجا یک مثال ساده از استفاده از forward ref آورده شده است:

import React, { forwardRef } from "react";

function App() {
  const ref = useRef(null);

  return (
    <div>
      <MyComponent ref={ref} />
    </div>
  );
}

function MyComponent(props, ref) {
  // ref.current حاوی عنصر DOM فرزند است
  return (
    <div ref={ref}>
      This is MyComponent
    </div>
  );
}

export default App;

در این مثال، ما از یک کامپوننت MyComponent استفاده می‌کنیم که از یک ref برای نگهداری از عنصر DOM فرزند خود استفاده می‌کند. ما از ویژگی ref در کامپوننت App برای انتقال ref به کامپوننت MyComponent استفاده می‌کنیم.

اگر این مثال را با استفاده از react-dom اجرا کنید، خواهید دید که کامپوننت MyComponent به عنصر DOM فرزند خود دسترسی دارد.

مزایای استفاده از forward ref

استفاده از forward ref مزایای مختلفی دارد، از جمله:

• سادگی: forward ref کار را برای دسترسی به عنصر DOM فرزند از داخل کامپوننت والد ساده می‌کند.
• قابلیت تکرارپذیری: forward ref کد را قابل تکرارپذیری می‌کند.
• قابلیت تست: forward ref کد را قابل تست‌تر می‌کند.

معایب استفاده از forward ref

استفاده از forward ref معایبی نیز دارد، از جمله:

• وابستگی: forward ref به کامپوننت فرزند وابسته است.
• اضافه کردن پیچیدگی: forward ref می‌تواند کد را پیچیده‌تر کند.

forward ref یک ابزار قدرتمند است که می‌تواند به توسعه‌دهندگان ری اکت کمک کند تا کد خود را ساده‌تر، قابل تکرارپذیری و قابل تست‌تر کنند.

مدیریت رویدادها یا Handling Events چیست؟

مدیریت رویدادها (Handling Events) در المنت‌های ری‌اکت بسیار شبیه به مدیریت رویدادها در المنت‌های DOM است. بعضی تفاوت‌های نحوی وجود دارد:

رویدادهای ری‌اکت به جای حروف کوچک از نامگذاری camelCase استفاده می‌کنند.
با JSX، به جای یک رشته متنی یک تابع به عنوان event handler پاس می‌دهید.

تفاوت دیگر این است که برای جلوگیری از رفتار پیش فرض در React، نمی توانید false را برگردانید. شما باید صراحتا preventDefault را فراخوانی کنید. به عنوان مثال ، با HTML ساده ، برای جلوگیری از رفتار پیش‌فرض ارسال فرم، می توانید بنویسید:

function Form() {
function handleSubmit(e) {
e.preventDefault();
console.log('You clicked submit.');
}
return (
<form onSubmit={handleSubmit}>
    <button type="submit">Submit</button>
</form>
);
}

پاس دادن آرگومان‌ها به Event Handlers ها

در یک حلقه، این که بخواهیم یک پارامتر اضافه به یک event handler پاس بدهیم رایج است. برای مثال، اگر id، شناسه سطر باشد، هر دو کد زیر کار خواهند کرد:

button onClick={(e) => this.deleteRow(id, e)}>Delete Row
button onClick={this.deleteRow.bind(this, id)}>Delete Row

رندر کردن شرطی یا Conditional Rendering در ری اکت چیست؟

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

(همان مثال لاگین و لاگ اوت با پراپس در کلاس☻)

Lifting State Up یا انتقال state به بالا به چه معناست؟

در ری اکت، lifting state up یا انتقال state به بالا به فرآیندی گفته می‌شود که در آن state از کامپوننت‌های فرزند به کامپوننت‌های والد منتقل می‌شود. این کار می‌تواند برای بهبود عملکرد و قابلیت تکرارپذیری کد استفاده شود.

چرا باید state را به بالا منتقل کنیم؟

state را می‌توان در کامپوننت‌های فرزند ذخیره کرد. با این حال، این کار می‌تواند منجر به مشکلاتی از جمله:

• عملکرد: کامپوننت‌های فرزند می‌توانند به طور مکرر رندر شوند، حتی اگر state تغییری نکرده باشد.
• قابلیت تکرارپذیری: کامپوننت‌های فرزند می‌توانند به طور محکم به state وابسته باشند، که می‌تواند آنها را برای استفاده مجدد دشوار کند.

چگونه state را به بالا منتقل کنیم؟

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

در اینجا یک مثال ساده از انتقال state به بالا آورده شده است:

import React, { useState } from "react";
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <Child count={count} />
    </div>
  );
}
function Child({ count }) {
  return (
    <div>
      Current count: {count}
    </div>
  );
}
export default App;

در این مثال، ما از یک کامپوننت App استفاده می‌کنیم که state را مدیریت می‌کند. ما از ویژگی props در کامپوننت Child برای انتقال state به کامپوننت Child استفاده می‌کنیم.

اگر این مثال را با استفاده از react-dom اجرا کنید، خواهید دید که کامپوننت Child فقط زمانی رندر می‌شود که state تغییر کند.

مزایای انتقال state به بالا

انتقال state به بالا مزایای مختلفی دارد، از جمله:

• عملکرد: کامپوننت‌های فرزند فقط زمانی رندر می‌شوند که state تغییر کند.
• قابلیت تکرارپذیری: کامپوننت‌های فرزند دیگر به state وابسته نیستند، که آنها را برای استفاده مجدد آسان‌تر می‌کند.

معایب انتقال state به بالا

انتقال state به بالا معایبی نیز دارد، از جمله:

• پیچیدگی: انتقال state به بالا می‌تواند کد را پیچیده‌تر کند.
• وابستگی: کامپوننت‌های فرزند به کامپوننت‌های والد وابسته‌تر می‌شوند.

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

Code-Splitting یا تکه تکه کردن کد چیست؟

فایل‌های بیشتر برنامه‌های ری‌اکت با کمک ابزار‌هایی مانند Webpack، Rollup یا Browserify بسته‌بندی (bundle) می‌شود.

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

Fragment ها چه کاربردی دارند؟

یک الگوی رایج در React این است که یک کامپوننت چندین عنصر را برمی گرداند. قطعات به شما امکان می دهند لیستی از فرزندان را بدون اضافه کردن گره های اضافی به DOM گروه بندی کنید.

higher-order component (HOC) به چه معناست؟

یک higher-order component (HOC) در ری اکت یک تابع است که یک کامپوننت دیگر را می گیرد و یک کامپوننت جدید را برمی گرداند. HOC ها یک روش قدرتمند برای استفاده مجدد از منطق کامپوننت در ری اکت هستند.

HOC ها به خودی خود بخشی از API ری اکت نیستند، بلکه یک الگوی کد هستند که از ماهیت ترکیبی ری اکت پدید آمده است.

در اینجا یک مثال ساده از یک HOC آورده شده است:

// یک HOC که یک کامپوننت را با یک کلاس CSS تزئین می کند
const withClass = props => (
  <div className={props.classes}>
    {props.children}
  </div>
);

// یک کامپوننت ساده
const MyComponent = props => (
  <h1>{props.data}</h1>
);

// استفاده از HOC برای تزئین کامپوننت ساده
const MyClassedComponent = withClass({ classes: "my-class" })(MyComponent);

// خروجی:
// <div class="my-class">
//   <h1>My data</h1>
// </div>

در این مثال، HOC withClass یک کامپوننت جدید را برمی گرداند که یک کلاس CSS به آن اضافه شده است. کامپوننت ساده MyComponent با HOC تزئین می شود و خروجی یک div با کلاس CSS “my-class” است.

Context در ری اکت چیست؟

مفهوم context در ری اکت این امکان را برای توسعه دهنده گان فراهم می کند تا بدون نیاز به ارسال داده های موردنظر به شکل props به تمام سطوح کامپوننت ها، آنها را در کامپونت های دلخواه خود استفاده کنند.

Context در ری اکت یک API است که به شما امکان می دهد داده ها را بین کامپوننت ها بدون نیاز به استفاده از props منتقل کنید. Context برای به اشتراک گذاری داده هایی که برای بسیاری از کامپوننت ها در یک برنامه مشترک است، ایده آل است.

برای استفاده از Context، ابتدا باید یک context ایجاد کنید. یک context یک شیء است که مقدار داده را ذخیره می کند. برای ایجاد یک context، از تابع React.createContext() استفاده می کنید.

const ThemeContext = React.createContext({
  theme: "light",
});

const App = () => (
  <ThemeContext.Provider value={theme}>
    <MyComponent />
    <AnotherComponent />
  </ThemeContext.Provider>
);

const MyComponent = () => {
  const theme = useContext(ThemeContext);
  return (
    <div>
      The theme is {theme}
    </div>
  );
};

در این مثال، کامپوننت MyComponent از تابع Context.Consumer برای دسترسی به داده context ThemeContext استفاده می کند. این بدان معناست که خروجی کامپوننت MyComponent همیشه مقدار داده context ThemeContext را نشان می دهد.

Children Prop به چه معناست؟

children یک props است که امکان ارسال یک کامپوننت را به شکل props به کامپوننت دیگر فراهم می کند.

هر چیزی که در بین تگ باز و بسته کامپوننت قرار بگیرد، بعنوان فرزند یا children آن کامپوننت محسوب می شود و می توان آن را به صورت props در یک کامپوننت دیگر مورد استفاده قرار داد.

const MyDiv = React.createClass({
render: function() {
return <div>{this.props.children}</div>
}
})
ReactDOM.render(
<MyDiv>
<span>{'Hello'}</span>
<span>{'World'}</span>
</MyDiv>,
node
)

rafce در ری اکت چه کار میکند؟

React arrowfunction Export component این همان شورت کاتس که هم ری اکت رو ایمپورت میکند و هم اکسپورت دیفالت هم و ارروفانکشن میسازد. برای این کار اکستنشن ES7 + REACT/REDUX/REACT-NATIVE SNIPPETS را نصب کنید.

کامپوننت stateful چیست؟

در صورتی که یک کامپوننت نیاز به state داشته باشد، به اصطلاح به آن stateful component گفته می شود.

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

CRA چیست و چه مزایایی دارد؟

دستور کامندلاین create-react-app به توسعه دهندگان این امکان را می دهد که بدون هیچگونه کانفیگ خاصی، یک اپلیکیشن ری اکت را ایجاد کرده و اجرا کنند.

چرا باید نام کامپوننت ها در ری اکت با حروف بزرگ تعریف شود؟

در ری اکت، اگر می خواهید کامپوننت موردنظر خود را در JSX رندر کنید، باید حرف اول نام کامپوننت بصورت Capital یا UpperCase باشد.

در غیر اینصورت، ری اکت قبل از اجرای برنامه، ارور می دهد و اجازه تعریف این کامپوننت را نخواهد داد. دلیل این روش نام گذاری اینست که تنها المان های HTML و تگ های SVG می توانند در ری اکت با حروف کوچک تعریف شوند.

تفاوت بین متدهای getInitialState و constructor در ری اکت چیست؟

وقتی از کلاس های ES6 برای تعریف کامپوننت استفاده می کنید باید در متد constructor آبجکت state را مقداردهی اولیه (initialize) کنید.

اما وقتی از متد React.createClass برای ایجاد کامپوننت استفاده می کنید باید از متد getInitialState برای مقداردهی اولیه state استفاده کنید.

class MyComponent extends React.Component {
constructor(props) {
super(props)
this.state = { /* initial state */ }
}
}

const MyComponent = React.createClass({
getInitialState() {
return { /* initial state */ }
}
})

هوک useState در ری اکت به چه معناست؟

همان state در کلاس های ری اکت میباشد.

import { useState } from "react";
 
function FavoriteColor() {
  const [color, setColor] = useState("");
}

هوک useEffect در ری اکت به چه معناست؟

این هوک کاری را شبیه lifeCycle های کلاس ها در ری اکت انجام میدهد.

هوک useEffect در ری اکت یک هوک است که برای مدیریت وابستگی‌ها استفاده می‌شود. این هوک به شما امکان می‌دهد تا زمانی که وابستگی‌های یک تابع تغییر می‌کنند، کدی را اجرا کنید.

شبیه componentdidMount , componentdidUpdate , ComponentWillUnMount

همانطور که میبینید دو آرگومان میپذیرد و دومی اختیاریست:

useEffect(() => {
  // کدی که می‌خواهید زمانی که وابستگی‌ها تغییر می‌کنند اجرا شود
}, [وابستگی1, وابستگی2, ...]);

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

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

• دریافت داده‌های جدید از سرور
• محاسبه مجدد مقادیر
• مدیریت حالت

در نظر داشته باشید کد های داخل این هوک onLoad میباشد و دایما تکرار میشود. ما همیشه باید پارامتر دوم را که یک آرایه را می پذیرد، وارد کنیم. ما می توانیم به صورت اختیاری وابستگی ها را به useEffect در این آرایه ارسال کنیم.

import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";
 
function Timer() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  });
 
  return <h1>I've rendered {count} times!</h1>;
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Timer />);

با کد زیر فقط یکبار تکرار میشود :

useEffect(() => {
  //Runs only on the first render
}, []);

همچنین میتواند این وابستگی ها مقادیری باشداز جنس پراپ و استیت و متغیر، با تغییر آنها مجدد فراخوانی مشود:

useEffect(() => {
  //Runs on the first render
  //And any time any dependency value changes
}, [prop, state]);

هوک useLayoutEffect در ری اکت به چه معناست؟

اجرای همزمان با رندر: هوک useLayoutEffect بلافاصله پس از به‌روزرسانی DOM و قبل از نقاشی صفحه توسط مرورگر اجرا می‌شود. این ویژگی به این معناست که اثرات جانبی تعریف شده در useLayoutEffect قبل از اینکه کاربر تغییرات را ببیند، اعمال می‌شوند. این هوک برای اثرات جانبی‌ای مناسب است که نیاز به هماهنگی با تغییرات DOM دارند، مانند:

• محاسبات اندازه‌گیری‌های DOM (مانند عرض یا ارتفاع یک عنصر)
• تنظیم اسکرول یا موقعیت یک عنصر
• تغییر مستقیم DOM که باید بلافاصله منعکس شود

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

function Example() {
  const boxRef = useRef();

  useLayoutEffect(() => {
    const box = boxRef.current;
    box.style.width = '200px';
    box.style.height = '200px';
  }, []);

  return <div ref={boxRef} style={{ backgroundColor: 'lightblue' }}>Box</div>;
}

هوک useTransition در ری اکت به چه معناست؟

هوک useTransition در ری اکت یک هوک است که برای مدیریت انتقال‌ها استفاده می‌شود. این هوک به شما امکان می‌دهد تا تغییرات یک مقدار را به صورت روان و با کنترل بیشتر از حالت عادی اجرا کنید.

const [state, transition] = useTransition(
  initialState,
  (state, action) => {
    // کدی که می‌خواهید برای مدیریت انتقال اجرا شود
  },
  options
);

در این ساختار، initialState مقدار اولیه state است. action مقدار جدیدی است که به state داده می‌شود. options یک شیء اختیاری است که می‌تواند برای تنظیم رفتار انتقال استفاده شود.

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

• نمایش یک انیمیشن
• تغییر سبک یک عنصر
• تغییر محتوای یک عنصر

در اینجا چند نمونه از نحوه استفاده از useTransition آورده شده است:

// نمایش یک انیمیشن
const [opacity, transition] = useTransition(
  0,
  (opacity, action) => {
    if (action === 'show') {
      return opacity + 0.1;
    } else if (action === 'hide') {
      return opacity - 0.1;
    }
    return opacity;
  },
  {
    duration: 1000,
    easing: 'ease-in-out',
  }
);

// تغییر سبک یک عنصر
const [size, transition] = useTransition(
  100,
  (size, action) => {
    if (action === 'increase') {
      return size + 10;
    } else if (action === 'decrease') {
      return size - 10;
    }
    return size;
  },
  {
    duration: 500,
  }
);

// تغییر محتوای یک عنصر
const [text, transition] = useTransition(
  'Hello, world!',
  (text, action) => {
    if (action === 'change') {
      return 'Goodbye, world!';
    }
    return text;
  },
  {
    duration: 300,
  }
);

هوک useImperativeHandle در ری اکت به چه معناست؟

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

const [handle, ref] = useImperativeHandle(
  () => {
    // کدی که می‌خواهید برای مدیریت عنصر DOM اجرا شود
  },
  [dependencies]
);

در این ساختار، handle یک مقدار قابل دستکاری است که می‌توانید از آن برای دسترسی به عنصر DOM استفاده کنید. ref یک شیء است که می‌توانید از آن برای مدیریت عمر عنصر DOM استفاده کنید. dependencies آرایه‌ای از مقادیری هستند که می‌خواهید از آنها برای تعیین اینکه آیا handle باید دوباره ایجاد شود یا خیر استفاده کنید.

"use client"
import React, { useRef, useImperativeHandle } from "react";

function CustomButton(props, ref) {
  useImperativeHandle(ref, () => ({
    alertMessage: () => {
      alert("Hello!");
    }
  }));

  return <button>Click outside to alert</button>;
}

const ForwardedButton = React.forwardRef(CustomButton);

export default function App() {
  const buttonRef = useRef();

  return (
    <div>
      <ForwardedButton ref={buttonRef} />
      <button onClick={() => buttonRef.current.alertMessage()}>
        Trigger Alert
      </button>
    </div>
  );
}

هوک useInsertionEffect

هوک useInsertionEffect در React برای انجام تغییرات سریع و قبل از رندر DOM استفاده می‌شود. این هوک در واقع مشابه useEffect است، با این تفاوت که اجرای آن قبل از اعمال تغییرات در DOM و در مرحله‌ای که هنوز ساختار DOM تغییر نکرده است، انجام می‌شود.

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

از کاربرد های این هوک میتوان برای اضافه کردن استایل‌ها یا تغییرات CSS و جاوا اسکریپت‌ها در زمانی که هنوز صفحه در حال رندر است و یا معمولاً برای کارهایی مثل تغییر استایل‌ها قبل از رندر شدن یا مدیریت منابع خارجی پیش از اینکه صفحه نمایش داده شود، استفاده کرد.

"use client"
import React, { useInsertionEffect } from 'react';

function App() {
  useInsertionEffect(() => {
    // تغییرات استایل یا دستورات قبل از رندر DOM
    const style = document.createElement('style');
    style.innerHTML = 'body { background-color: lightblue; }';
    document.head.appendChild(style);

    // پاکسازی (اختیاری)
    return () => {
      document.head.removeChild(style);
    };
  }, []);

  return <div>Welcome to the App!</div>;
}

export default App;

هوک useDebugValue چه کار میکند؟

برای دیباگ کردن هوک های دستی استفاده میشود.

هوک useDebugValue در ری اکت یک هوک است که به شما امکان می‌دهد تا مقدار یک تابع یا یک مقدار حالت را در حالت توسعه نمایش دهید. این هوک به شما کمک می‌کند تا اشکالات را در کد خود پیدا کنید و نحوه عملکرد کامپوننت‌های خود را درک کنید.

useDebugValue(value, [options]);

در این ساختار، value مقداری است که می‌خواهید در حالت توسعه نمایش دهید. options یک شیء اختیاری است که می‌تواند برای تنظیم نحوه نمایش مقدار استفاده شود.

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

• نمایش مقدار یک تابع یا یک مقدار حالت در حالت توسعه
• نمایش مقدار یک آرایه یا یک شیء
• نمایش مقدار یک مقدار عددی یا یک مقدار رشته‌ای

// نمایش مقدار یک تابع در حالت توسعه
const [count, setCount] = useState(0);

useDebugValue(
  () => {
    return count;
  },
  {
    label: 'Count',
  }
);

// نمایش مقدار یک آرایه در حالت توسعه
const todos = [
  { text: 'Todo 1' },
  { text: 'Todo 2' },
];

useDebugValue(todos);

// نمایش مقدار یک شیء در حالت توسعه
const user = {
  name: 'John Doe',
  age: 30,
};

useDebugValue(user);

// نمایش مقدار یک مقدار عددی در حالت توسعه
const number = 10;

useDebugValue(number);

// نمایش مقدار یک مقدار رشته‌ای در حالت توسعه
const string = 'Hello, world!';

useDebugValue(string);

هوک useDeferredValue چه کار میکند؟

به شما اجازه میدهد که آپدیت بخشی از ui خود را به تعویق بیندازید.

هوک useDeferredValue در ری اکت یک هوک است که به شما امکان می‌دهد تا مقداری را به صورت غیر همگامانه دریافت کنید. این هوک به شما کمک می‌کند تا تأخیر در بارگذاری مقادیر را کاهش دهید.

ساختار کلی useDeferredValue به صورت زیر است:

useDeferredValue(
  () => {
    // کدی که مقدار را به صورت غیر همگامانه دریافت می‌کند
  },
  [dependencies]
);

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

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

• دریافت داده‌های جدید از سرور
• محاسبه مقداری که نیاز به پردازش زیادی دارد
• دریافت مقداری که به مقادیر دیگر وابسته است

در اینجا چند نمونه از نحوه استفاده از useDeferredValue آورده شده است:

// دریافت داده‌های جدید از سرور
const [todos, setTodos] = useState([]);

useDeferredValue(() => {
  return fetch('/todos').then(response => response.json());
}, []);

// محاسبه مقداری که نیاز به پردازش زیادی دارد
const [count, setCount] = useState(0);

useDeferredValue(() => {
  return Math.pow(100, count);
}, []);

// دریافت مقداری که به مقادیر دیگر وابسته است
const [user, setUser] = useState(null);

useDeferredValue(() => {
  return fetch(`/users/${user.id}`).then(response => response.json());
}, [user]);

تفاوت useDeferredValue با useTransition

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

useTransition برای مدیریت بروزرسانی‌های UI که ممکن است زمان‌بر باشند و به طور همزمان رندر فوری را مختل کنند، طراحی شده است.

هوک useId به چه معناست؟

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

// ایجاد شناسه‌های منحصر به فرد برای اجزای خود
const MyComponent = () => {
  const id = useId();

  return (
    <div id={id}>
      این یک کامپوننت است با شناسه {id}.
    </div>
  );
};

// جلوگیری از تصادم سبک‌ها و رویدادهای DOM
const MyComponent = () => {
  const id = useId();

  return (
    <div id={id}>
      <style>
        div[data-id={id}] {
          background-color: red;
        }
      </style>

      <button onClick={() => {
        console.log('رویداد کلیک با شناسه', id);
      }}>کلیک کنید</button>
    </div>
  );
};

// استفاده از شناسه‌ها برای اهداف امنیتی
const MyComponent = () => {
  const id = useId();

  return (
    <div id={id}>
      <img src="/image.jpg" alt={id} />
    </div>
  );
};

هوک useContext در ری اکت به چه معناست؟

میدانید که معمولا دیتا ها را در کامپوننت سطح بالا و پرنت ذخیره کرده و سپس توسط propها بین کامپوننت ها پاسکاری میکنند که به “prop drilling” مشهور است.

اما سینتکس جدیدتر (هوک) و حرفه ای تر بدون پاسکاری پراپس در کامپوننت ها ، کانتکس نام دارد. مانند مثال زیر:

import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";
 
const UserContext = createContext();
 
function Component1() {
  const [user, setUser] = useState("arsam ghorbanian");
 
  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 />
    </UserContext.Provider>
  );
}
 
function Component2() {
  return (
    <>
      <h1>Component 2</h1>
      <Component3 />
    </>
  );
}
 
function Component3() {
  return (
    <>
      <h1>Component 3</h1>
      <Component4 />
    </>
  );
}
 
function Component4() {
  return (
    <>
      <h1>Component 4</h1>
      <Component5 />
    </>
  );
}
 
function Component5() {
  const user = useContext(UserContext);
 
  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);

هوک useTransition دقیقا به چه معناست؟

هوک useTransition یکی از هوک‌های جدید در React 18 است که به توسعه‌دهندگان کمک می‌کند تا به صورت نرم و بهینه انتقالات حالت (state) را مدیریت کنند. این هوک مخصوصاً زمانی مفید است که یک تغییر حالت باعث رندر شدن یک بخش بزرگ و سنگین از رابط کاربری می‌شود. useTransition به شما اجازه می‌دهد تا اولویت‌های رندرینگ را مدیریت کنید و به کاربر اطلاع دهید که یک عملیات “انتقالی” در حال انجام است.

اگر تغییرات بیشتری داشته باشیم یا محاسبات پیچیده‌تری در جریان باشد، این هوک می‌تواند به ما کمک کند تا رابط کاربری بهتری ارائه دهیم.

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

const [isPending, startTransition] = useTransition();

isPending: یک مقدار بولی که نشان می‌دهد آیا انتقالی در حال انجام است یا خیر.

startTransition: یک تابع که به شما اجازه می‌دهد تا تغییرات حالت را به عنوان یک انتقال نشانه‌گذاری کنید. این تابع به React می‌گوید که این تغییر حالت کمتر بحرانی است و می‌تواند به صورت غیر همزمان و بهینه انجام شود.

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

function SimpleExample() {
  const [text, setText] = useState('parsa ghorbanian');
  const [isPending, startTransition] = useTransition();

  const handleChangeText = () => {
    startTransition(() => {
      setText('arsam ghorbanian');
    });
  };

  return (
    <div>
      <p>{text}</p>
      {isPending && <p>Updating...</p>}
      <button onClick={handleChangeText}>Change Text</button>
    </div>
  );
}

export default SimpleExample;

هوک useReducer در ری اکت به چه معناست؟

UseReducer Hook مشابه useState Hook است. این امکان را برای منطق استیت (state) سفارشی فراهم می کند.

useReducer Hook دو آرگومان را می پذیرد.

useReducer(<reducer>، <initialState>)

useReducer بازمیگرداند وضعیت فعلی یک state و dispatchمتد را. مثال:

import { useReducer } from "react";
import ReactDOM from "react-dom/client";
 
const initialTodos = [
  {
    id: 1,
    title: "Todo 1",
    complete: false,
  },
  {
    id: 2,
    title: "Todo 2",
    complete: false,
  },
];
 
const reducer = (state, action) => {
  switch (action.type) {
    case "COMPLETE":
      return state.map((todo) => {
        if (todo.id === action.id) {
          return { ...todo, complete: !todo.complete };
        } else {
          return todo;
        }
      });
    default:
      return state;
  }
};
 
function Todos() {
  const [todos, dispatch] = useReducer(reducer, initialTodos);
 
  const handleComplete = (todo) => {
    dispatch({ type: "COMPLETE", id: todo.id });
  };
 
  return (
    <>
      {todos.map((todo) => (
        <div key={todo.id}>
          <label>
            <input
              type="checkbox"
              checked={todo.complete}
              onChange={() => handleComplete(todo)}
            />
            {todo.title}
          </label>
        </div>
      ))}
    </>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Todos />);

هوک useRef در ری اکت

هوک useRef یک هوک ری اکت است که به شما امکان می‌دهد تا به یک مقدار قابل دستکاری در DOM دسترسی داشته باشید. مقدار قابل دستکاری یک مقدار است که می‌توانید آن را در طول عمر یک کامپوننت تغییر دهید.

const ref = useRef(initialValue);

در این ساختار، initialValue مقدار اولیه مقدار قابل دستکاری است.

خروجی useRef یک شیء است که دارای دو خاصیت است:

• current: مقدار فعلی مقدار قابل دستکاری است.
• ref: یک تابع است که می‌توانید از آن برای تغییر مقدار قابل دستکاری استفاده کنید.

در اینجا یک مثال ساده از نحوه استفاده از useRef آورده شده است:

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

  const ref = useRef(null);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => {
        count++;
        // تغییر مقدار قابل دستکاری با استفاده از تابع ref
        ref.current.textContent = count;
      }}>افزایش</button>
      <div ref={ref}>
        این یک عنصر DOM است که می‌توان آن را با استفاده از useRef تغییر داد.
      </div>
    </div>
  );
};

در این مثال، از useRef برای تغییر محتوای یک عنصر DOM استفاده می‌کنیم. هنگامی که دکمه “افزایش” کلیک می‌شود، مقدار count افزایش می‌یابد و تابع ref.current.textContent مقدار جدید count را به عنصر DOM تنظیم می‌کند.

Custom Hooks در ری اکت

هوک ها، فانکشن های قابل استفاده مجدد هستند.

وقتی یک منطق در قالب یک کامپوننت دارید که باید توسط چندین مؤلفه استفاده شود، می‌توانیم آن را به یک Hook سفارشی تبدیل کنیم. این هوک های همیشه با کلمه use شروع میشوند.

مانند توابع، کدی که قرار است چندین مرتبه تکرار شود را با آرگومان ورودی داینامیک در داخل هوک دستی قرار دهید.

Custom hook در React یک تابع است که می‌تواند از قابلیت‌های داخلی React (مثل useState، useEffect، useContext و …) استفاده کرده و عملکردهایی را که نیاز به اشتراک‌گذاری یا استفاده مکرر دارند، مجدداً استفاده کند. این کار کمک می‌کند کد شما تمیزتر و قابل استفاده مجددتر باشد.

در اینجا یک مثال ساده از یک custom hook برای شمارش تعداد دفعاتی که یک دکمه کلیک شده است آورده شده است:

import { useState } from 'react';

function useCounter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const reset = () => setCount(0);

  return {
    count,
    increment,
    reset
  };
}

function CounterComponent() {
  const { count, increment, reset } = useCounter();

  return (
    <div>
      <p>کلیک‌ها: {count}</p>
      <button onClick={increment}>کلیک کن</button>
      <button onClick={reset}>ریست کن</button>
    </div>
  );
}

export default CounterComponent;

برای فهم بیشتر موضوع مثال Fetch را در نظر بگیرید.

همیشه بصورت دستی و داخل کد این کار را انجام میدادیم. اما این دفعه بایستی ابتدا یک صفحه جدا بسازیم مانند useFetch.js و کد عملیات FETCH را با ورودی داینامیک داخل آن قرار دهیم مانند کد زیر:

import { useState, useEffect } from "react";
 
const useFetch = (url) => {
  const [data, setData] = useState(null);
 
  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);
 
  return [data];
};
 
export default useFetch;

همانطور که در کد بالا میبینید، url حکم همان ورودی داینامیک ما را دارد. پس با هر آدرسی که در جای آن قرار گیرد ، کار یکسانی را انجام خواهد داد.

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

import ReactDOM from "react-dom/client";
import useFetch from "./useFetch";
 
const Home = () => {
  const [data] = useFetch("https://jsonplaceholder.typicode.com/todos");
 
  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Home />);

Profiler در ری اکت به چه معناست؟

Profiler در ری اکت یک ابزار است که می‌تواند برای اندازه‌گیری عملکرد یک برنامه ری اکت استفاده شود. این ابزار می‌تواند به شما کمک کند تا مشکلات عملکردی را در برنامه خود شناسایی و رفع کنید.

Profiler در ری اکت دو نوع اندازه‌گیری را ارائه می‌دهد:

• زمان رندر: این اندازه‌گیری زمان صرف شده برای رندر کردن یک کامپوننت را اندازه‌گیری می‌کند.
• هزینه رندر: این اندازه‌گیری هزینه محاسباتی رندر کردن یک کامپوننت را اندازه‌گیری می‌کند.

import React, { Profiler } from 'react';

function onRenderCallback(
  id, // id of the Profiler tree
  phase, // either "mount" or "update"
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // interactions tracked during this update
) {
  console.log(`Profiler ${id} (${phase} phase):`);
  console.log(`Actual duration: ${actualDuration}ms`);
  console.log(`Base duration: ${baseDuration}ms`);
  console.log(`Start time: ${startTime}`);
  console.log(`Commit time: ${commitTime}`);
  console.log(`Interactions: ${interactions}`);
}

function App() {
  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <MyComponent />
    </Profiler>
  );
}

function MyComponent() {
  // Your component logic here
  return <div>محتوای کامپوننت من</div>;
}

export default App;

پس از ایجاد build، می‌توانید از Profiler برای اندازه‌گیری عملکرد برنامه خود استفاده کنید. برای این کار، باید از DevTools مرورگر خود استفاده کنید. در DevTools، به بخش Performance بروید و روی دکمه Record کلیک کنید. سپس، برنامه خود را اجرا کنید. پس از اتمام اجرای برنامه، روی دکمه Stop کلیک کنید.

در بخش Performance، می‌توانید نموداری از زمان و هزینه رندر کردن کامپوننت‌ها را مشاهده کنید.

در اینجا چند نکته برای استفاده از Profiler در ری اکت آورده شده است:

• از Profiler برای شناسایی کامپوننت‌هایی که زمان یا هزینه رندر زیادی دارند استفاده کنید.
• برای بهبود عملکرد کامپوننت‌های مشکل‌دار، تغییراتی را در کد خود ایجاد کنید.
• از Profiler برای بررسی تأثیر تغییرات عملکردی خود استفاده کنید.

Profiler یک ابزار قدرتمند است که می‌تواند به شما کمک کند تا عملکرد برنامه ری اکت خود را بهبود بخشید.

StrictMode در ری اکت به چه معناست؟

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

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

lazy در ری اکت به چه معناست؟

در React، React.lazy یک تابع برای بارگذاری تنبل (lazy loading) کامپوننت‌ها است. این تابع به شما امکان می‌دهد تا کامپوننت‌ها را به صورت پویا بارگذاری کنید، یعنی تنها زمانی که نیاز است آن‌ها را دریافت کنید. این می‌تواند باعث بهبود عملکرد برنامه و کاهش حجم اولیه باندل شود.

مثال در تیتر پایین

Suspense در ری اکت به چه معناست؟

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

Suspense در دو حالت کار می‌کند:

• حالت انتظار: در این حالت، کامپوننت در حال بارگذاری است و هیچ محتوایی را رندر نمی‌کند.
• حالت رندر: در این حالت، کامپوننت آماده رندر شدن است و محتوای آن را رندر می‌کند.

برای استفاده از Suspense، باید از یک کامپوننت Suspense استفاده کنید. کامپوننت Suspense یک کامپوننت فرزند دارد که کامپوننت مورد نظر شما است.

در اینجا یک مثال ساده از نحوه استفاده از Suspense آورده شده است:

import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>برنامه من</h1>
      <Suspense fallback={<div>در حال بارگذاری...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

در این مثال، از Suspense برای بارگزاری کامپوننت Todos استفاده می‌کنیم. هنگامی که کامپوننت Suspense بارگزاری می‌شود، محتوای کامپوننت Todos را رندر می‌کند.

اگر کامپوننت Todos هنوز آماده رندر شدن نباشد، Suspense محتوای fallback را رندر می‌کند.

use API در ری اکت به چه معناست؟(ویژگی جدید نسخه 19)

در React، use یک API جدید است که به شما اجازه می‌دهد تا مقادیر منابعی مانند Promise یا context را درون یک کامپوننت بخوانید. برخلاف سایر هوک‌ها، use می‌تواند داخل حلقه‌ها و شرط‌ها (مانند if) استفاده شود. اگر یک Promise به use داده شود و در حالت معلق باشد، کامپوننت به حالت معلق (suspended) می‌رود تا Promise حل شود، و از Suspense برای نمایش جایگزین استفاده می‌شود.

import React, { createContext, use } from 'react';

const myContext = React.createContext()

export default function Main(){
  return(
    <div>
      <myContext.Provider value='arsam'>
        <Para />
      </myContext.Provider>
    </div>
  )
}
 

function Para(){
  const txt = use(myContext)
  return(
    <h1>salam {txt}</h1>
  )
}

act در ری اکت به چه معناست؟

در React، act یک تابع کمکی برای تست‌ها است که به شما کمک می‌کند تا تمامی به‌روزرسانی‌های مرتبط با رندرینگ و افکت‌ها را با همدیگر گروه‌بندی کنید. این تابع تضمین می‌کند که وضعیت کامپوننت‌های شما به طور کامل به‌روزرسانی شده و تمامی اثرات جانبی (side effects) اعمال شده‌اند قبل از اینکه تست‌های شما بررسی شوند.

هوک useFormStatus در ری اکت به چه معناست؟ (ویژگی نسخه جدید19)

useFormStatus یک هوک است که اطلاعات وضعیت آخرین فرم ارسالی را به شما می دهد.

import { useFormStatus } from "react-dom";
import { submitForm } from "./actions.js";

function Submit() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Submitting..." : "Submit"}
    </button>
  );
}

function Form({ action }) {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

export default function App() {
  return <Form action={submitForm} />;
}

cloneElement در ری اکت به چه معناست؟

cloneElement در ری اکت یک تابع است که به شما امکان می‌دهد تا یک عنصر DOM را به صورت پویا کپی کنید.

این تابع می‌تواند برای تغییر ویژگی‌ها یا فرزندان یک عنصر DOM استفاده شود.

در این ساختار، element عنصر DOM مورد نظر شما است. props یک شیء است که ویژگی‌های جدیدی را برای عنصر DOM تعیین می‌کند.

children یک آرایه از عناصر DOM است که فرزندان عنصر DOM را تعیین می‌کند.

در اینجا یک مثال ساده از نحوه استفاده از cloneElement آورده شده است:

import { cloneElement } from 'react';

// ...
const clonedElement = cloneElement(
  <Row title="Cabbage">
    Hello
  </Row>,
  { isHighlighted: true },
  'Goodbye'
);

console.log(clonedElement); // <Row title="Cabbage">Goodbye</Row>

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

ایجاد و استفاده از فایل‌های .env در ری‌اکت به چه صورت است؟

استفاده از فایل‌های .env در ری‌اکت برای مدیریت متغیرهای محیطی بسیار مفید است. این متغیرها به شما امکان می‌دهند تا اطلاعاتی که نباید در کدهای عمومی قرار گیرند (مثل کلیدهای API، URLهای سرور و غیره) را به صورت ایمن مدیریت کنید.

فقط با npx ری اکت رو نصب کنید تا کار کنه. در نصب با VITE کار نمیکند!

1. نصب dotenv اگر از Create React App استفاده می‌کنید، پشتیبانی از فایل‌های .env به صورت پیش‌فرض وجود دارد و نیاز به نصب کتابخانه اضافی نیست. اما اگر به هر دلیل نیاز به نصب دستی داشته باشید، می‌توانید از dotenv استفاده کنید:

npm install dotenv

ایجاد فایل .env در ریشه پروژه خود یک فایل به نام .env ایجاد کنید و متغیرهای محیطی خود را در آن تعریف کنید. توجه داشته باشید که نام متغیرها باید با REACT_APP_ شروع شوند تا توسط Create React App شناسایی شوند.

REACT_APP_API_URL=https://api.example.com
REACT_APP_API_KEY=your_api_key_here

استفاده از متغیرهای محیطی در کد برای دسترسی به این متغیرها در کد ری‌اکت خود، از process.env استفاده کنید.

مثال:

const apiUrl = process.env.REACT_APP_API_URL;
const apiKey = process.env.REACT_APP_API_KEY;

console.log('API URL:', apiUrl);
console.log('API Key:', apiKey);

fetch(`${apiUrl}/data?key=${apiKey}`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

مدیریت فایل‌های .env در محیط‌های مختلف

شما می‌توانید چندین فایل .env برای محیط‌های مختلف (توسعه، آزمایش، تولید) ایجاد کنید:

• .env: این فایل برای تنظیمات پیش‌فرض است که برای همه محیط‌ها اعمال می‌شود.
• .env.local: این فایل برای تنظیمات محلی استفاده می‌شود و در محیط‌های دیگر نادیده گرفته می‌شود.
• .env.development: این فایل برای محیط توسعه استفاده می‌شود.
• .env.test: این فایل برای محیط تست استفاده می‌شود.
• .env.production: این فایل برای محیط تولید استفاده می‌شود.

امنیت فایل‌های .env

توجه داشته باشید که فایل‌های .env نباید در سیستم کنترل نسخه (مانند Git) قرار گیرند. برای این کار، مطمئن شوید که فایل .gitignore شما شامل این خطوط باشد:

# متغیرهای محیطی
.env
.env.local
.env.development
.env.test
.env.production

isValidElement در ری اکت به چه معناست؟

isValidElement بررسی می کند که آیا یک مقدار عنصر React است یا خیر.

import { isValidElement, createElement } from 'react';

// ✅ React elements

console.log(isValidElement(<p />)); // true

console.log(isValidElement(createElement('p'))); // true


// ❌ Not React elements

console.log(isValidElement(25)); // false

console.log(isValidElement('Hello')); // false

console.log(isValidElement({ age: 42 })); // false

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

• به دنبال سوالات متداول باشید: در اکثر مصاحبه های استخدامی React، سوالات متعددی وجود دارد که به طور مکرر پرسیده می شوند. با تمرکز بر روی این سوالات، می توانید شانس موفقیت خود را در مصاحبه افزایش دهید.
• به پاسخ های خود دقت کنید: در پاسخ به سوالات، سعی کنید به طور واضح و مختصر توضیح دهید که چگونه می توانید مشکل را حل کنید.
• تمرین کنید: قبل از مصاحبه، حتماً با پاسخ دادن به سوالات متداول، خود را آماده کنید.

در انتها پیشنهاد میکنیم حتما در آزمون آنلاین 100 سواله ری اکت که توسط مهندس ریحانه قلمبر کدنویسی شده است شرکت کرده و خود را محک بزنید. ورود به آزمون

و این داستان همچنان ادامه دارد و نمیتوان گفت که به تمام موارد اشاره کردیم. شما هم میتوانید در قسمت نظرات این پست با ما را در تکمیل این مقاله جامع ترین لیست سوالات استخدامی react همیاری کنید.

امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.