تالا شده به این فکر کنید چرا باید تو React از useState استفاده کنیم؟ 🤔
چرا نمیشه همینجوری عادی یه متغیر تعریف کنیم و مقدارش رو تغییر بدیم؟ 🤷‍♂️
یا مثلاً چطور میتونیم یه داده‌ای رو از کامپوننت فرزند به پدر پاس بدیم؟ 🤯

تو این قسمت جواب تمام این سوالات رو میدیم و درک عمیقی از این مفاهیم پیدا می‌کنیم:
🔥 Event Handling
🔥 useState
🔥 Component
🔥 Props

🌐 لیست کامل مباحث رو اینجا ببینید:
https://gist.github.com/BijanProgrammer/3a108b665594d7a2c1f23d5cf329376c

شرکت در این دوره کاملاً رایگانه و فقط کافیه به ازای هر قسمت که مشاهده میکنید یک صلوات بفرستید و ثوابش رو هدیه کنید به شهیدی که در زیرنویس ویدئو یا کپشن نوشته میشه
این قسمت تقدیم به شهید محمدهادی ذوالفقاری ❤️

با لایک و کامنت ازم حمایت کنید تا بتونم آموزش‌های بیشتری درست کنم 🤝

https://www.linkedin.com/posts/bijanprogrammer_react-frontenddevelopment-freebootcamp-activity-7363577374296236033-O9wy

تالا شده به این فکر کنید چطور React یه div خالی رو با محتوای کامپوننت‌ها پر میکنه؟ 🤔
زمانی که یه State تغییر میکنه، از کجا میفهمه دقیقاً چه چیزی رو باید تو DOM آپدیت کنه؟ 🤷‍♂️
یا مثلاً چه احتیاجی به Virtual DOM هست؟ 🤯
اصلاً این Key Prop به چه درد میخوره و آیا جای دیگه‌ای به جز حلقه‌ها استفاده میشه؟ 😳

تو این قسمت جواب تمام این سوالات رو میدیم و درک عمیقی از این مفاهیم پیدا می‌کنیم:
🔥 Single Page Application or SPA
🔥 Root Element
🔥 Rendering
🔥 Triggering
🔥 Committing
🔥 Virtual DOM
🔥 Niche Use Case for Key Prop

🌐 لیست کامل مباحث رو اینجا ببینید:
https://gist.github.com/BijanProgrammer/3a108b665594d7a2c1f23d5cf329376c

شرکت در این دوره کاملاً رایگانه و فقط کافیه به ازای هر قسمت که مشاهده میکنید یک صلوات بفرستید و ثوابش رو هدیه کنید به شهیدی که در زیرنویس ویدئو یا کپشن نوشته میشه
این قسمت تقدیم به شهید محمد بروجردی ❤️

با لایک و کامنت ازم حمایت کنید تا بتونم آموزش‌های بیشتری درست کنم 🤝

https://www.linkedin.com/posts/bijanprogrammer_react-frontenddevelopment-freebootcamp-activity-7363895107269312512-11jh

تالا شده به این فکر کنید چرا از React Router استفاده میکنیم؟ 🤔
چجوریه که فقط یه فایل HTML داریم اما می‌تونیم چند صفحه رو باهاش نمایش بدیم؟ 🤷‍♂️
یا مثلاً چرا باید از Link استفاده کنیم و نمیشه از a معمولی استفاده کرد؟ 🤯
اصلاً مگه میشه جوری CSS نوشت که برای Responsive کردن سایت به مشکل نخوریم؟ 😳

تو این قسمت جواب تمام این سوالات رو میدیم و درک عمیقی از این مفاهیم پیدا می‌کنیم:
🔥 React Router
🔥 Layout and Outlet
🔥 Dynamic Routes
🔥 404 Not Found Page
🔥 Global Error Boundary
🔥 TypeScript Button Component
🔥 Global Styles
🔥 CSS Modules
🔥 Google Fonts
🔥 Easy Responsiveness

🌐 لیست کامل مباحث رو اینجا ببینید:
https://gist.github.com/BijanProgrammer/3a108b665594d7a2c1f23d5cf329376c

شرکت در این دوره کاملاً رایگانه و فقط کافیه به ازای هر قسمت که مشاهده میکنید یک صلوات بفرستید و ثوابش رو هدیه کنید به شهیدی که در زیرنویس ویدئو یا کپشن نوشته میشه
این قسمت تقدیم به شهید فریدون عباسی ❤️

با لایک و کامنت ازم حمایت کنید تا بتونم آموزش‌های بیشتری درست کنم 🤝

https://www.linkedin.com/posts/bijanprogrammer_react-frontenddevelopment-freebootcamp-activity-7364725554299711489-eV8P

پیاده‌سازی Kanban Board - دوره‌ی آموزش رایگان React - قسمت 5

تو این قسمت به این موضوعات می‌پردازیم:
🔥 Board Component
🔥 List Component
🔥 List Item Component
🔥 Icon Button Component
🔥 Prop Types

🌐 لیست کامل مباحث رو اینجا ببینید:
https://gist.github.com/BijanProgrammer/3a108b665594d7a2c1f23d5cf329376c

شرکت در این دوره کاملاً رایگانه و فقط کافیه به ازای هر قسمت که مشاهده میکنید یک صلوات بفرستید و ثوابش رو هدیه کنید به شهیدی که در زیرنویس ویدئو یا کپشن نوشته میشه
این قسمت تقدیم به شهید مصطفی احمدی روشن ❤️

با لایک و کامنت ازم حمایت کنید تا بتونم آموزش‌های بیشتری درست کنم 🤝

https://www.linkedin.com/posts/bijanprogrammer_react-frontenddevelopment-freebootcamp-activity-7366140993861062656-UC_J

تالا شده به این فکر کنید useMemo تو سورس‌کدِ React چطور نوشته شده؟ 🤔
زمانی که Rerender اتفاق میفته، از کجا میفهمه باید از مقدار قبلی استفاده کنه یا مقدار جدید؟ 🤷‍♂️
یا مثلاً چه احتیاجی useCallback هست؟ 🤯
اصلاً این memo به چه درد میخوره و چطور میشه الگوریتم مقایسه‌ش رو تغییر داد؟ 😳

تو این قسمت جواب تمام این سوالات رو میدیم و درک عمیقی از این مفاهیم پیدا می‌کنیم:
🔥 memo
🔥 useMemo
🔥 useCallback
🔥 React DevTools

همچنین سورس‌کدِ React رو دانلود و بررسی می‌کنیم تا فهم کاملی از نحوه‌ی کار Memoization و پشت صحنه‌ی React پیدا کنیم.

علاوه بر این React DevTools رو مفصل توضیح می‌دیم و از فیچرهای مختلفش استفاده می‌کنیم برای اینکه بتونیم دید خوبی از پروژه داشته باشیم و مشکلات Performance احتمالی رو شناسایی کنیم.

🌐 لیست کامل مباحث رو اینجا ببینید:
https://gist.github.com/BijanProgrammer/3a108b665594d7a2c1f23d5cf329376c

شرکت در این دوره کاملاً رایگانه و فقط کافیه به ازای هر قسمت که مشاهده میکنید یک صلوات بفرستید و ثوابش رو هدیه کنید به شهیدی که در زیرنویس ویدئو یا کپشن نوشته میشه
این قسمت تقدیم به شهید سید ابراهیم رئیسی ❤️

با لایک و کامنت ازم حمایت کنید تا بتونم آموزش‌های بیشتری درست کنم 🤝

https://www.linkedin.com/posts/bijanprogrammer_react-frontenddevelopment-freebootcamp-activity-7367111312025321473-S2_-

تالا شده به این فکر کنید چطور میشه تغییرات کاربر رو ذخیره کرد که با Refresh صفحه از بین نره؟ 🤔
چطور می‌تونیم بفهمیم یه State تغییر کرده که بتونیم نسبت بهش واکنش نشون بدیم؟ 🤷‍♂️
یا مثلاً useLayoutEffect چیه و چه تفاوتی با useEffect داره؟ 🤯
اصلاً این StrictMode به چه درد میخوره و چرا باید ازش استفاده کنیم؟ 😳

تو این قسمت جواب تمام این سوالات رو میدیم و درک عمیقی از این مفاهیم پیدا می‌کنیم:
🔥 useEffect
🔥 useLayoutEffect
🔥 StrictMode

همچنین داده‌ی کاربر رو با استفاده از localStorage و useEffect ذخیره می‌کنیم که وقتی صفحه رو Refresh می‌کنه تغییراتش از بین نره.

🌐 لیست کامل مباحث رو اینجا ببینید:
https://gist.github.com/BijanProgrammer/3a108b665594d7a2c1f23d5cf329376c

شرکت در این دوره کاملاً رایگانه و فقط کافیه به ازای هر قسمت که مشاهده میکنید یک صلوات بفرستید و ثوابش رو هدیه کنید به شهیدی که در زیرنویس ویدئو یا کپشن نوشته میشه
این قسمت تقدیم به شهید مسعود علی‌محمدی ❤️

با لایک و کامنت ازم حمایت کنید تا بتونم آموزش‌های بیشتری درست کنم 🤝

https://www.linkedin.com/posts/bijanprogrammer_react-frontenddevelopment-freebootcamp-activity-7367402382432911360-MN5J

تالا اسم Reducer به گوشتون خورده؟ 🤔
لابد فک میکنید فقط تو Redux میشه ازش استفاده کرد؟ 🤷‍♂️
یا مثلاً میدونید Context چیه و به چه درد میخوره؟ 🤯
اصلاً چرا باید از اینا استفاده کرد وقتی کارمون با useState راه میفته؟ 😳

تو این قسمت جواب تمام این سوالات رو میدیم و درک عمیقی از این مفاهیم پیدا می‌کنیم:
🔥 Prop Drilling
🔥 Context API (createContext, useContext and use)
🔥 Reducer and useReducer

همچنین کتابخونه‌ی React-Tostify رو نصب و راه‌اندازی می‌کنیم که بتونیم به کاربر Toast Notification نشون بدیم.

🌐 لیست کامل مباحث رو اینجا ببینید:
https://gist.github.com/BijanProgrammer/3a108b665594d7a2c1f23d5cf329376c

شرکت در این دوره کاملاً رایگانه و فقط کافیه به ازای هر قسمت که مشاهده میکنید یک صلوات بفرستید و ثوابش رو هدیه کنید به شهیدی که در زیرنویس ویدئو یا کپشن نوشته میشه
این قسمت تقدیم به شهید مجید شهریاری ❤️

با لایک و کامنت ازم حمایت کنید تا بتونم آموزش‌های بیشتری درست کنم 🤝

https://www.linkedin.com/posts/bijanprogrammer_react-frontenddevelopment-freebootcamp-activity-7369191637660450816-g_Iz

تالا شده بخواید یه Modal رو تو React پیاده‌سازی کنید؟ 🤔
لابد فک میکنید باید از Portal استفاده کرد؟ 🤷‍♂️
یا مثلاً شده فکر کنید useRef چه کاربرد دیگه‌ای به جز دسترسی به Element داره؟ 🤯
اصلاً چرا باید از useState برای ذخیره‌کردن مقدار Input استفاده کرد؟ 😳
تفاوت onSubmit رو Form و onClick رو Button رو که دیگه میدونید؟ 🙄
تفاوت target و currentTarget رو چطور؟ 😬

تو این قسمت جواب تمام این سوالات رو میدیم و درک عمیقی از این مفاهیم پیدا می‌کنیم:
🔥 Controlled vs Uncontrolled Form
🔥 From Validation
🔥 useRef
🔥 useId
🔥 HTML Dialog Element
🔥 Implementing Modal Component
🔥 Dismiss Modal by Clicking on Backdrop
🔥 Caret and Accent Colors
🔥 Ref Prop vs forwardRef
🔥 target vs currentTarget

🌐 لیست کامل مباحث رو اینجا ببینید:
https://gist.github.com/BijanProgrammer/3a108b665594d7a2c1f23d5cf329376c

شرکت در این دوره کاملاً رایگانه و فقط کافیه به ازای هر قسمت که مشاهده میکنید یک صلوات بفرستید و ثوابش رو هدیه کنید به شهیدی که در زیرنویس ویدئو یا کپشن نوشته میشه
این قسمت تقدیم به شهید داریوش رضایی‌نژاد ❤️

با لایک و کامنت ازم حمایت کنید تا بتونم آموزش‌های بیشتری درست کنم 🤝

https://www.linkedin.com/posts/bijanprogrammer_react-frontenddevelopment-freebootcamp-activity-7370040576919879680-P6Ee

تالا شده بخواید Drag and Drop رو تو React پیاده‌سازی کنید؟ 🤔
لابد فک میکنید خیلی راحت میشه از dnd kit استفاده کرد؟ 🤷‍♂️
خب اگه چند تا Container داشته باشیم که آیتم‌ها بتونن بینشون جابه‌جا بشن چی؟ 🤯
اگه خودِ Containerها هم بتونن جابه‌جا بشن چی؟ 😳

تو این قسمت جواب تمام این سوالات رو میدیم و درک عمیقی از این مفاهیم پیدا می‌کنیم:
🔥 dnd kit (Drag and Drop)
🔥 Immer

در نهایت یه Kanban Board خواهیم داشت که با استفاده از Drag and Drop میشه تمام آیتم‌ها و لیست‌ها رو جابه‌جا کرد.
همچنین از React Compiler استفاده می‌کنیم که همیشه بتونیم 60 فریم در ثانیه به کاربر نمایش بدیم.

🌐 لیست کامل مباحث رو اینجا ببینید:
https://gist.github.com/BijanProgrammer/3a108b665594d7a2c1f23d5cf329376c

شرکت در این دوره کاملاً رایگانه و فقط کافیه به ازای هر قسمت که مشاهده میکنید یک صلوات بفرستید و ثوابش رو هدیه کنید به شهیدی که در زیرنویس ویدئو یا کپشن نوشته میشه
این قسمت تقدیم به شهید حسن طهرانی مقدم ❤️

با لایک و کامنت ازم حمایت کنید تا بتونم آموزش‌های بیشتری درست کنم 🤝

https://www.linkedin.com/posts/bijanprogrammer_react-frontenddevelopment-freebootcamp-activity-7371006955227811840-_ELk

تالا شده بخواید یه Custom Input رو تو React پیاده‌سازی کنید؟ 🤔
چطور میشه کاری کرد مثل یه Input معمولی عمل کنه؟ 🤷‍♂️
یعنی میشه یه جوری FormData بتونه بخوندش؟ 🤯
اگه بخوایم هم به صورت Controlled و هم Uncontrolled بشه ازش استفاده کرد چی؟ 😳

تو این قسمت جواب تمام این سوالات رو میدیم و درک عمیقی از این مفاهیم پیدا می‌کنیم:
🔥 CRUD Operations (Create, Read, Update, Delete)
🔥 Integrated Custom Input Component
🔥 Refactor

در نهایت یه Kanban Board خواهیم داشت که میشه عملیات‌های ساخت، ویرایش و حذف رو روی تمام جدول‌ها، لیست‌ها و آیتم‌ها انجام داد.
همچنین از چندین Context و Provider استفاده می‌کنیم که به هم وابستگی دارن و در کنار هم یه Logic پیچیده رو تشکیل میدن.

🌐 لیست کامل مباحث رو اینجا ببینید:
https://gist.github.com/BijanProgrammer/3a108b665594d7a2c1f23d5cf329376c

شرکت در این دوره کاملاً رایگانه و فقط کافیه به ازای هر قسمت که مشاهده میکنید یک صلوات بفرستید و ثوابش رو هدیه کنید به شهیدی که در زیرنویس ویدئو یا کپشن نوشته میشه
این قسمت تقدیم به شهید علی صیاد شیرازی ❤️

با لایک و کامنت ازم حمایت کنید تا بتونم آموزش‌های بیشتری درست کنم 🤝

https://www.linkedin.com/posts/bijanprogrammer_react-frontenddevelopment-freebootcamp-activity-7372273040426074112-SV7_

آموزش Zod برای اعتبارسنجی فرم - دوره‌ی آموزش رایگان React - قسمت 12

تالا شده بخواید یه Form رو تو React اعتبارسنجی کنید؟ 🤔
چه ابزاری هست که قدرتمنده و در عین حال کار کردن باهاش راحته؟ 🤷‍♂️
اگه بخوایم در حین Validation، داده‌هامون رو تمیز هم کنیم چی؟ 🤯
یا مثلاً اگه نخوایم Validation و Type رو دو بار تعریف کنیم چی؟ 😳

تو این قسمت جواب تمام این سوالات رو میدیم و درک عمیقی از این مفاهیم پیدا می‌کنیم:
🔥 Zod
🔥 Customized Error Message
🔥 Infer Type from Schema
🔥 Coerce
🔥 Transform
🔥 Trim
🔥 Enums

🌐 لیست کامل مباحث رو اینجا ببینید:
https://gist.github.com/BijanProgrammer/3a108b665594d7a2c1f23d5cf329376c

شرکت در این دوره کاملاً رایگانه و فقط کافیه به ازای هر قسمت که مشاهده میکنید یک صلوات بفرستید و ثوابش رو هدیه کنید به شهیدی که در زیرنویس ویدئو یا کپشن نوشته میشه
این قسمت تقدیم به شهید محمد باقری ❤️

با لایک و کامنت ازم حمایت کنید تا بتونم آموزش‌های بیشتری درست کنم 🤝

https://www.linkedin.com/posts/bijanprogrammer_react-frontenddevelopment-freebootcamp-activity-7372335703638130689-r2sP

تالا شده بخواید یه Form پیچیده رو تو React پیاده‌سازی کنید؟ 🤔
لابد به ازای هر فیلد یه State جدا تعریف کردید؟ 🤷‍♂️
واسه Validation و اینکه بفهمید کی باید اجرا بشه، کد اصولی نوشتید؟ 🤯
یا مثلاً تونستید از Renderهای اضافی جلوگیری کنید؟ 😳

تو این قسمت جواب تمام این سوالات رو میدیم و درک عمیقی از این مفاهیم پیدا می‌کنیم:
🔥 React Hook Form
🔥 Register
🔥 Form State
🔥 Form Validation
🔥 Erro Handling
🔥 Control
🔥 Controller

🌐 لیست کامل مباحث رو اینجا ببینید:
https://gist.github.com/BijanProgrammer/3a108b665594d7a2c1f23d5cf329376c

شرکت در این دوره کاملاً رایگانه و فقط کافیه به ازای هر قسمت که مشاهده میکنید یک صلوات بفرستید و ثوابش رو هدیه کنید به شهیدی که در زیرنویس ویدئو یا کپشن نوشته میشه
این قسمت تقدیم به شهید امیرعلی حاجی‌زاده ❤️

با لایک و کامنت ازم حمایت کنید تا بتونم آموزش‌های بیشتری درست کنم 🤝

https://www.linkedin.com/posts/bijanprogrammer_react-frontenddevelopment-freebootcamp-activity-7372457150427721728-EG5_

تالا شده بخواید پروژه‌ای که با React نوشتید رو Deploy کنید؟ 🤔
از کجا دامنه‌ی اختصاصی مثل canban.ir واسش بخریم؟ 🤷‍♂️
اگه وقتی صفحه رو Refresh میکنیم خطای 404 بده چطور برطرفش کنیم؟ 🤯
یا مثلاً چطور یه کاری کنیم هر موقع کد تغییر میکنه، سایت هم آپدیت بشه؟ 😳

تو این قسمت جواب تمام این سوالات رو میدیم و درک عمیقی از این مفاهیم پیدا می‌کنیم:
🔥 Deploy a React Project Using Vercel
🔥 Buy a Personal Domain
🔥 Fix 404 on Production
🔥 Vercel Config File (vercel.json)

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

🌐 لیست کامل مباحث رو اینجا ببینید:
https://gist.github.com/BijanProgrammer/3a108b665594d7a2c1f23d5cf329376c

شرکت در این دوره کاملاً رایگانه و فقط کافیه به ازای هر قسمت که مشاهده میکنید یک صلوات بفرستید و ثوابش رو هدیه کنید به شهیدی که در زیرنویس ویدئو یا کپشن نوشته میشه
این قسمت تقدیم به شهید حاج قاسم سلیمانی ❤️

با لایک و کامنت ازم حمایت کنید تا بتونم آموزش‌های بیشتری درست کنم 🤝

https://www.linkedin.com/posts/bijanprogrammer_react-frontenddevelopment-freebootcamp-activity-7372917044708569089-4Feh

تالا شده تو React یه State داشته باشید که بخواید تو کامپوننت‌های دیگه هم ازش استفاده کنید؟ 🤔
لابد فک میکنید باید از Redux یا Zustand استفاده کنید؟ 🤷‍♂️
خب پس Context به چه درد میخوره؟ 🤯
اصلاً تفاوت اینا با هم چیه و هر کدوم رو کجا باید استفاده کرد؟ 😳

تو این قسمت جواب تمام این سوالات رو میدیم و درک عمیقی از این مفاهیم پیدا می‌کنیم:
🔥 Zustand
🔥 Store
🔥 Slice
🔥 Persist (localStorage)
🔥 Zustand vs Context

با سه مثال کاربردی Zustand رو یاد می‌گیریم:
1. مثال ساده: استفاده برای باز و بسته کردن Sidebar
2. مثال نیمه‌پیشرفته: استفاده برای تغییر Theme
3. مثال پیشرفته: استفاده برای CRUD روی Board و List و Item

تمام داده‌ها رو با Persist تو localStorage ذخیره می‌کنیم تا با Refresh صفحه، داده‌ها از بین نرن.
همچنین از Slice استفاده می‌کنیم تا Store رو به بخش‌های کوچک‌تر بشکنیم و کد تمیزتری داشته باشیم.

🌐 لیست کامل مباحث رو اینجا ببینید:
https://gist.github.com/BijanProgrammer/3a108b665594d7a2c1f23d5cf329376c

شرکت در این دوره کاملاً رایگانه و فقط کافیه به ازای هر قسمت که مشاهده میکنید یک صلوات بفرستید و ثوابش رو هدیه کنید به شهیدی که در زیرنویس ویدئو یا کپشن نوشته میشه
این قسمت تقدیم به شهید محسن فخری‌زاده ❤️

با لایک و کامنت ازم حمایت کنید تا بتونم آموزش‌های بیشتری درست کنم 🤝

https://lnkd.in/p/dP7Vr5Xt

سلام و عرض ادب و احترام خدمت همراهان گرامی

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

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

در هر صورت ممنون که همراه کانال هستید
سعی میکنم زمانی که شرایط مساعد شد آموزش‌ها رو ادامه بدم
ان‌شاءالله

لطفاً برای من و همه‌ی سربازها دعا کنید 🙏

سلام؛ صبح زیبای پاییزی‌تون بخیر

خدا رو شکر دوره‌ی آموزشی سربازی تموم شد
تشکر میکنم بابت تمام پیام‌های محبت‌آمیزی که تو این مدت ارسال کردید
ببخشید که نتونستم تک تک جواب بدم

در مورد ادامه‌ی کار...
احتمالاً دوره‌ی خدمت سربازی رو تو شهر خودم بگذرونم، واسه همین بعد از ظهر یا آخر هفته وقت دارم به تولید محتوا بپردازم
فعلاً اولویت اصلی ادامه‌ی دوره‌ی React ئه که به امید خدا سعی میکنم به زودی قسمت جدید رو تولید و منتشر کنم
در مورد دوره‌های آنلاین و بوت‌کمپ‌ها فعلاً نمیتونم قولی بدم ولی بعد از دوره‌ی React، فعالیت کانال و آموزش‌های رایگان ادامه خواهد داشت
ان‌شاءالله