6 - Introduction to Part 1 - Dubbed

دوستان این فصل فقط همین یک قسمت رو داره که در واقع قراره ببینیم که توی پارت اول این دوره قراره چه چیزهایی رو با هم یاد بگیریم

باید بهتون بگم که این پارت شاید بشه گفت مهم ترین پارت هست چون در رابطه با مهم ترین مفهوم ریکت یعنی state صحبت شده 🔥

امشب یکی دو قسمت از فصل بعدی رو هم براتون میزارم ✌️

برای دسترسی به دوبله ها به شکل فصل به فصل توی چنل دوبله هامون عضو بشید:
@DubDev

#React | #Jonas_Schmedtmann | #S02 | #E06 | #Course

Channel | Group | YouTube

8 - Section Overview - Dubbed

تو این سکشن قراره ببینیم که ریکت اصلا چیه و چرا ما باید ازش استفاده کنیم؟ نمیشه از همون جاوااسکریپت خام استفاده کنیم؟

برای دسترسی به دوبله ها به شکل فصل به فصل توی چنل دوبله هامون عضو بشید:
@DubDev

#React | #Jonas_Schmedtmann | #S03 | #E08 | #Course

Channel | Group | YouTube

9 - Why Do Frontend Frameworks Exist - Dubbed

اینم قسمت دوم فصل سوم 🔥

فریمورک هایی مثل ریکت اصلا چرا وجود دارن؟!

برای دسترسی به دوبله ها به شکل فصل به فصل توی چنل دوبله هامون عضو بشید:
@DubDev

#React | #Jonas_Schmedtmann | #S03 | #E09 | #Course

Channel | Group | YouTube

10 - React Vs Vanilla Javascript - Dubbed

تو این ویدیو قراره پیاده سازی همون اپلیکیشن کوچیکی که ساختیم رو با جاوااسکریپت خام ببینیم و واقعا از قدرتی که ریکت به ما میده لذت ببریم 🔥

برای دسترسی به دوبله ها به شکل فصل به فصل توی چنل دوبله هامون عضو بشید:
@DubDev

#React | #Jonas_Schmedtmann | #S03 | #E10 | #Course

Channel | Group | YouTube

32 - Section Overview - Dubbed

آقا فصل چهارم دوره ریکت جوناس تماما مرور جاوااسکریپت مورد نیاز برای ریکت هست و برای همین من این فصل رو دوبله نمیکنم

ولی توی @DubDev که فصل به فصل براتون دوبله ها رو میزارم لیست قسمت هاش رو گذاشتم که بتونید ببینید چه قسمت هایی نیازه که از دوره جاوااسکریپت ببینید اگر بلد نیستید

اما میریم سراغ فصل 5 🔥

کلا این پارت یک (که میشه هشت فصل اول) در رابطه با فیچرهای اصلی و در واقع fundamental های ریکت یعنی state و props و jsx و رندر کردن لیست ها و نحوه استفاده از استیت و ... هستش

خلاصه لذت ببرید ❤️

برای دسترسی به فصل به فصل به دوبله ها داخل چنل دوبله هامون عضو بشید 👌
@DubDev

#React | #Jonas_Schmedtmann | #S05 | #E01 | #Course

Channel | Group | YouTube

56 - Section Overview - Dubbed

و اما دوبله فصل ششم دوره ریکت جوناس رو شروع میکنیم پر قدرت... 🔥🔥

تازه قضیه داره جالب میشه نه 😄؟

تو این فصل قراره ببینیم که چطور میتونیم با ایونت ها کار کنیم و چطور میتونیم از فرم های توی ریکت استفاده بکنیم 👌

دوبله 5 فصل قبلی (و به زودی فصل 6) رو میتونید توی @DubDev پیدا کنید

#React | #Jonas_Schmedtmann | #S06 | #E01 | #Course

Channel | Group | YouTube

94 - Section Overview - Dubbed

و اما بریم سراغ فصل هشتم..
با اتمام این فصل، رسما پارت اول این دوره به اتمام میرسه 👌

آقا این فصل فقط پروژست 🔥🔥
برای اینکه تمام چیزایی که توی پارت یک این دوره یاد گرفتیم رو مرور بکنیم، این فصل قراره یه پروژه داشته باشیم که همه اونارو با هم تمرین بکنیم

واقعا لذت ببرید، دوبله هم که با میکروفون جدید نگم براتون 😁

ریکشن فراموش نشه که به من انرژی میده ❤️🔥

به زودی فایل زیپ فصل هشتم رو براتون توی @DubDev قرار میدم..

#React | #Jonas_Schmedtmann | #S08 | #E01 | #Course

Channel | Group | YouTube

95 - Project Setup - Dubbed

اما بریم ببینیم که این پروژه دقیقا چه فیچرایی داره؟ کل این پروژه فقط و فقط با مفاهیم بسیار پایه ای ریکته، دیگه خودتون قدرت ریکت رو دریابید...

انتشار و ریکشن فراموش نشه رفقا که به ما انرژی میده ❤️🔥

فایل زیپ فصل هشتم فردا کامل توی @DubDev که چنل دوبله های ما هست قرار میگیره، دوبله های جاوااسکریپت و نود جی اس هم اونجا قرار گرفته 👌

#React | #Jonas_Schmedtmann | #S08 | #E02 | #Course

Channel | Group | YouTube

105 - Section Overview - Dubbed

دوبله فصل دهم دوره ریکت جوناس شروع شد رفقا 🔥

به زودی تموم میشه و توی اسپات پلیر برای عزیزانی که تهیه کردن قرار میگیره ❤️

اگرم که میخواین از نه فصل رایگان استفاده بکنید یا از دوبله جاوااسکریپت استفاده بکنید همش داخل چنل دوبله هامونه:
@DubDev

#React | #Jonas_Schmedtmann | #S01 | #E10 | #Course

Channel | Group | YouTube

122 - Section Overview - Dubbed

و اما بریم سراغ فصل جدید از دوبله دوره ریکت جوناس...

آقا این فصل یه فصل سنگین در عین حال جذابه و اگر این فصل رو خوب یاد بگیرید تقریبا میشه گفت سوال استخدامی ای نیست که نتونید جواب بدید 🔥

دوبله کامل این فصل به زودی در اختیار تمام عزیزانی که تهیه کردن قرار خواهد گرفت ✌️

نه فصل اول هم که کاملا رایگانه میتونید توی چنل دوبله هامون پیداشون کنید:
@DubDev

#React | #Jonas_Schmedtmann | #S11 | #E01 | #Course

Channel | Group | YouTube

💢 نکست جی‌اس (Next js) چیست؟
محبوب ترین فریمورک React js هستش که میتوانید سمت سرور و سمت کلاینت را در اون توسعه بدید. این فریمورک قابلیت‌های بسیار بیشتری نسبت به React js در اختیار شما قرار میده و در واقع توسعه یافته React هستش و بسیاری از نواقص React رو نداره. اما توجه داشته باشید که ما در Next.js هنوز هم کد React مینویسیم.
شرکت‌هایی مثل Netflix, Uber, Starbucks یا Twitch از نکست جی‌اس استفاده میکنند چرا که یک فریمورک سریع و کارآمد است.
نکست جامعه برنامه‌نویسی عالی داره و برای یادگیری یا دیباگ کردن به مشکل خاصی برنخواهیم خورد و با آپدیت‌های منظمی که داره روز به روز در حال تکامل هستش

🌐 http://nextjs.org/

🔆 اگر سوالی در مورد نکست جی‌اس دارید میتونید توی گروه بپرسید...
#nextjs #react

Channel | Group | YouTube

#react

مروری بر گذشته ریکت...

کلاس کامپوننت ها در React یکی از دو روش اصلی برای تعریف کامپوننت‌ها هستن. این کامپوننت‌ها به صورت کلاس‌هایی تعریف می‌شن که از کلاس React.Component ارث‌بری می‌کنن و به شما این امکان رو میدن تا از ویژگی‌های مختلفی مانند state و lifecycle methods بهره‌مند بشید 👌

هر چند گذشته ها گذشته و تقریبا میشه گفت کلاس کامپوننت ها به تاریخ پیوستن ولی به نظرم خوبه همچنان یه دیدگاهی نسبت بهشون داشته باشیم چون شاید توی کدبیس های قدیمی همچنان سرو کلشون پیدا بشه 🤝

مثال :

import React from "react";

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increase
        </button>
      </div>
    );
  }
}

export default MyComponent;

Channel | Group | YouTube

#react


🔵ری اکت پرتال (create portal)


ری اکت پرتال یکی از فیچر هاییه که تو نسخه ۱۶ ری اکت اضافه شده و به برنامه نویس ها اجازه میده یه کامپوننت رو در جای مختلفی از دام رندر کنه


ری اکت پرتال دو تا مقدار دریافت میکنه مقدار اول اون jsx هست که میخوایم رندر کنیم و دومین مقدار جایی هست که میخوایم اونو رندر بگیریم


مثال :

import React from 'react';
import ReactDOM from 'react-dom';
const PortalComponent = () => {
  return ReactDOM.createPortal(
    <div>
      {/* Content to render outside the regular DOM hierarchy */}
    </div>,
    document.getElementById('portal-container') 
  );
};

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


🔗Article
🔗Article




Channel | Group | YouTube

📚react.js book
راهنمای مبتدیان برای ساخت برنامه های کاربردی وب با ریکت جی اس
✍️نویسنده: الکس الینگتون

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

#معرفی_کتاب #ریکت #react #react_js

توجه:فایل PDF رو بدید chatgpt براتون ترجمه کنه و لذتش رو ببرید😎😉

Channel | Group | YouTube

✅کتابخانه ای از اجزای متحرک برای ریکت به اسم : React Bits


👈لینک: https://www.reactbits.dev
#react #frontend

Channel | Group | YouTube

🔥 فرانت‌اندکارا آماده اید! 🔥

اگه با ریکت،نکست یا تیلویند کار می‌کنید، shadcn/ui یه جعبه ابزار جادوییه!

🔰مجموعه‌ای از کامپوننت‌های آماده و از پیش ساخته که می‌تونید مستقیماً توی پروژه‌تون کپی کنید:

✅سبک، سریع و انعطاف‌پذیر - بدون نیاز به وابستگی زیاد
✅کاملاً رایگانه! بدون هیچ هزینه‌ای ازش استفاده کنید
✅با Tailwind CSS سازگاره - ۱۰۰٪ قابل تغییر با Tailwind CSS (رنگ،انیمیشن، هرچی دلتون می‌خواد!).
✅وابسته به یه کتابخونه خاص نیست، مثل MUI یا Ant Design که مجبور باشی تو قالب‌های خودشون کار کنی.
✅سازگار با React و Next.js و حتی Radix UI.
✅کامپوننت‌های آماده (دکمه، فرم، مدال، منو و ...) که می‌تونید مستقیم کپی کنید.

🔰چطور استفاده کنیم؟

برو به shadcn/ui و کامپوننت مورد نظرتو انتخاب کن.
توی ترمینال اینو بزن تا راه‌اندازی بشه:
bashCopy codenpx shadcn-ui@latest init

بعد، هر کامپوننتی می‌خوای، با یه دستور اضافه کن:

bashCopy codenpx shadcn-ui@latest add card

حالا کدا مال خودته! می‌تونی هرجور خواستی تغییرش بدی

پیش به سوی پروژه های خفن تر! 😎

#فرانت‌اند #React #NextJS #TailwindCSS #UI
Channel | Group | YouTube

💠کتابخانه Headless UI برای React رو یک سر بهش بزنید 🎉✨

ویژگی‌های هیجان‌انگیز و کاربردی:

🏗 موقعیت‌یابی داخلی انکر: حالا با ادغام Floating UI، دیگه نیازی به تنظیمات دستی نیست!

✅ کامپوننت جدید چک‌باکس: یه چک‌باکس جدید و حسابی کارآمد به مجموعه اضافه شده!

📑 کامپوننت‌های فرم HTML: حالا می‌تونی فرم‌های HTML رو مستقیم و راحت‌تر استفاده کنی.

👀 بهبود تشخیص حالات hover، focus و active: کلی روی این قابلیت کار شده تا عملکردش بهتر و دقیق‌تر باشه.

📜 مجازی‌سازی لیست Combobox: لیست‌های Combobox حالا سریع‌تر و بهینه‌تر اجرا می‌شن.

🌐 وب‌سایت جدید و مستندات ارتقا‌یافته: وب‌سایت جدید کلی اطلاعات مفید داره و مستنداتش حسابی کامل‌تر شده!

📌 دوست داری بیشتر بدونی؟ این هم آدرس سایت 😉

#UI #React #Frontend

Channel | Group | YouTube

#React #Form #Survey #WebDevelopment #JavaScript #ReactHookForm #SurveyJS

💡 کتابخانه‌های React برای ساخت فرم و نظرسنجی ها:
📌اگر تو هم از ساخت فرم‌ها و نظرسنجی‌ها توی React خسته شدی، باید بدونی که تنها نیستی! 😅

🔰اما خبر خوب اینه که کتابخانه‌هایی مثل SurveyJS وReact Hook Form به راحتی می‌تونن این کار رو برات ساده کنن. 🚀

🔗از مدیریت استیت گرفته تا ولیدیشن و حتی طراحی پویا این کتابخانه‌ها تمام مشکلاتت رو با فرم‌ها حل می‌کنن. 💪

🔍 روی این لینک بزن تا مقاله اش رو بخونی😉

Channel | Group | YouTube

📌 ابزار قدرتمند #TanStack_Query_5 برا مدیریت داده‌های فرانت‌اند، که با caching و background refetch تجربه‌ای سریع تر و روان تر ارائه می‌ده! 🚀

🔥 چالش‌های کار با API مثل مدیریت درخواست‌ها و جلوگیری از رندرهای غیرضروری رو باهاش حل کن!

🔗باید بدونی TanStack Query 5 داده‌ها رو کش می‌کنه و با background refetch هوشمندانه، اطلاعات رو بدون اختلال در تجربه‌ی کاربری به‌روز نگه می‌داره! ✨

📊 همچنین، مدیریت حالت‌های درخواست مانند لودینگ، ارور و موفقیت رو ساده‌تر میکنه و برنامه‌ ات بهینه‌ و حرفه‌ای‌تر میشه! 🎯💡

💠 اگر از React استفاده می‌کنی، با یک کانفیگ ساده میتونی تو پروژه‌ات به کار ببریش و از قابلیت‌هاش استفاده کنی! ⚡

🔹 برای داشتن بهترین تجربه‌ی Data Fetching، حتماً TanStack Query 5 رو امتحان کن! 😉

#TanStackQuery #DataFetching #React #Frontend #API

Channel | Group | YouTube