[معرفی کتاب] 📚
🔷 30 Days of React
➕ ری اکت در 30 روز

طبق ادعای این کتاب 304 صفحه‌ای، شما میتونید ری اکت رو توی 30 روز یاد بگیرین! حالا اگر نتونید یاد بگیرین هم قطعا میتونید تا حد زیادی با مفاهیمش آشنا بشین! پس اگر فرانت اند کار میکنید و دوست دارین ری اکت یاد بگیرین، این کتاب برای شروع خیلی مناسبه ❤️

#book #javascript #react

☕️ @CodeExplore

✏️ Stack Overflow Documentation

📝 110 page

#book #react
☕️ @CodeExplore

4 کتابخانه برای ساختن اپلیکیشن‌های قابل سفارشی سازی در React 🌀

1. Radix UI
2. React Aria
3. Base UI
4. Headless UI

توضیحات تکمیلی را در این لینک بخوانید.

#react #developer
〰️〰️〰️〰️〰️〰️〰️
☕️ @CodeExplore

💡چرا باید از ری‌اکت استفاده کنیم؟!

🔹ری‌اکت (که به صورت React.js یا ReactJS نیز خوانده می‌شود)، یک کتابخانه متن‌باز جاوااسکریپت برای ساخت رابط‌های کاربری و اجزای(Component) صفحات وب است.

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

در مقاله زیر میخوانیم که چرا باید از React js استفاده کنیم...👇
+|برای مطالعه مقاله کلیک کنید|+

#react #js
☕️ @CodeExplore

💢 هوک useMemo یکی از hook های مهم React هست که به بهبود عملکرد اپلیکیشن‌های React کمک می‌کنه. موقعی که قصد داریم یک مقدار رو بهینه سازی کنیم تا فقط زمانی محاسبه بشه که لازم باشه، useMemo عمل می‌کنه.

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

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

import React, { useMemo } from 'react';

const PostList = ({ posts }) => {
  const sortedPosts = useMemo(() => {
    return posts.sort((a, b) => a.date - b.date);
  }, [posts]);

  return (
    <ul>
      {sortedPosts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default PostList;

در این مثال، ما از useMemo برای مرتب سازی لیست پست ها بر اساس تاریخ استفاده کردیم. useMemo به ما کمک می‌کنه تا هر بار که posts تغییر می‌کنه، مقدار sortedPosts رو دوباره محاسبه کنیم.

➕ با استفاده از useMemo می‌تونیم از بهینه سازی عملکرد کامپوننت‌های React خودمون بهره مند بشیم و استفاده نادرست از حافظه رو کاهش بدیم.

#پست_پیشنهادی
#javascript #react #usememo
☕️ @CodeExplore

💢 هوک useCallback یکی از hook های مهم React هست که برای بهبود عملکرد و بهینه سازی مصرف حافظه استفاده می‌شه. وقتی یک کامپوننت در React رندر می‌شه، توابع دیگه همیشه مجدداً ایجاد می‌شن. اگه این توابع به عنوان props به کامپوننت های دیگه منتقل بشن، هر بار که کامپوننت والد رندر می‌شه، توابع ایجاد می‌شن. این ممکنه به تکثیر روندهای غیرضروری و هدر رفت حافظه منجر بشه.

اما اینجا useCallback به کمک میاد! وقتی از useCallback استفاده می‌کنیم، یک نمونه از یک تابع ایجاد می‌کنیم و این نمونه تابع تنها زمانی تغییر می‌کنه که ورودی‌هایش تغییر کنن. این به ما این امکان رو می‌ده که از ایجاد مجدد توابع بی‌مورد در هر بار رندر جلوگیری کنیم 😃

حالا یک مثال کاربردی ببینیم. فرض کنید یک کامپوننت داریم که یک دکمه رو ارائه می‌دهد و وقتی کاربر روی اون دکمه کلیک می‌کنه، یک پیام نمایش داده می‌شه. ما می‌توانیم از useCallback برای جلوگیری از ایجاد مجدد تابع handleClick هر بار که کامپوننت رندر می‌شود، استفاده کنیم.

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

const MessageComponent = () => {
  const [message, setMessage] = useState('');

  const handleClick = useCallback(() => {
    setMessage('Hello, World!');
  }, []);

  return (
    <div>
      <button onClick={handleClick}>Show Message</button>
      <p>{message}</p>
    </div>
  );
};

export default MessageComponent;

در اینجا، ما از useCallback استفاده کردیم تا تضمین کنیم که handleClick تنها زمانی تغییر می‌کنه که ورودی‌هاش تغییر کنند، یعنی در این حالت ورودی‌هی ندارد و همیشه همان تابع می‌ماند.

➕ با استفاده از useCallback می‌توانیم بهبود عملکرد کامپوننت‌های React را ببینیم و مصرف حافظه را بهینه کنیم.

#پست_پیشنهادی
#javascript #react #usecallback
☕️ @CodeExplore