Codective

مهلت ثبت‌نام تا پایان امروزه

مرحله‌ی مصاحبه تموم شد و به تمام کسانی که پذیرفته شدن پیام دادم اگه پیامی دریافت نکردید به این معناست که متاسفانه پذیرفته نشدید. امیدوارم در آینده بتونم در خدمتتون باشم 🙏

جلسه‌ی اول دوره‌ی آموزش رایگان React منتشر شد 🚀 تو این دوره قراره یه پروژه‌ی کامل شبیه Trello رو از صفر بیاریم بالا 😎 اگر میخوای React رو از پایه و به‌صورت عمیق یاد بگیری، این دوره مخصوص خودته! ویژگی‌های دوره: 💰 کاملاً رایگان ⚡️ از صفر تا نیمه‌پیشرفته 💪 پروژه‌محور + نمونه‌کار قوی 📦 پکیج‌های معروف و کاربردی برخی از مباحث دوره: 🔥 بررسی عمیق JSX و نحوه‌ی کار React در پشت صحنه 🔥 انواع Hookها؛ از useState تا useCallback و useReducer 🔥 کامپوننت‌های متنوع و متعدد؛ از Button تا Modal 🔥 پکیج‌های کاربردی؛ از dnd kit تا Zustand 🔥 کار با Formها؛ از Zod تا React Hook Form 🔥 کار با APIها؛ از React Query تا احراز هویت 🔥 کاملاً Responsive و دو زبانه با i18next 🔥 دیپلوی با Vercel و دامنه‌ی شخصی 🌐 لیست کامل مباحث رو اینجا ببینید: https://gist.github.com/BijanProgrammer/3a108b665594d7a2c1f23d5cf329376c شرکت در این دوره کاملاً رایگانه و فقط کافیه به ازای هر قسمت که مشاهده میکنید یک صلوات بفرستید و ثوابش رو هدیه کنید به شهیدی که در زیرنویس ویدئو یا کپشن نوشته میشه این قسمت تقدیم به امام حسین علیه‌السلام ❤️ با لایک و کامنت ازم حمایت کنید تا بتونم آموزش‌های بیشتری درست کنم 🤝 https://www.linkedin.com/posts/bijanprogrammer_nextjs-react-frontenddevelopment-activity-7362188860191100929-P1Gu

تالا شده به این فکر کنید چرا باید تو 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_-

تالا شده بخواید یه 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

تالا شده بخواید یه 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، فعالیت کانال و آموزش‌های رایگان ادامه خواهد داشت ان‌شاءالله

تالا شده به این فکر کنید Frontend و Backend چطور باهم ارتباط برقرار میکنن؟ 🤔 احتمالاً اسم Server رو شنیدید ولی میدونید دقیقاً چی کار میکنه؟ 🤷‍♂️ این API که هی میگن چیه و به چه درد میخوره؟ 🤯 اصلاً تفاوت HTTP و Rest با هم چیه و هر کدوم رو کجا باید استفاده کرد؟ 😳 تو این قسمت جواب تمام این سوالات رو میدیم و درک عمیقی از این مفاهیم پیدا می‌کنیم: 🔥 How the Web Works 🔥 Network (PAN, LAN, MAN, WAN, Internet) 🔥 API (IP, DNS, Server and Clients) 🔥 HTTP (Methods, Headers, Status Codes, URL, Request, Response) 🔥 HTTP vs WebSocket 🔥 Postman همچنین پروژه‌ی Backend رو معرفی می‌کنیم و یاد میگیریم چطور با Postman باهاش ارتباط برقرار کنیم. 🌐 لیست کامل مباحث رو اینجا ببینید: https://gist.github.com/BijanProgrammer/3a108b665594d7a2c1f23d5cf329376c شرکت در این دوره کاملاً رایگانه و فقط کافیه به ازای هر قسمت که مشاهده میکنید یک صلوات بفرستید و ثوابش رو هدیه کنید به شهیدی که در زیرنویس ویدئو یا کپشن نوشته میشه این قسمت تقدیم به شهید حسین سلامی ❤️ با لایک و کامنت ازم حمایت کنید تا بتونم آموزش‌های بیشتری درست کنم 🤝 https://www.linkedin.com/posts/bijanprogrammer_react-frontenddevelopment-freebootcamp-activity-7425463315369287680-Wf7D

پیاده‌سازی کامل احراز هویت یا Authentication - دوره‌ی آموزش رایگان React - قسمت 17 تالا شده بخواید سیستم ثبت‌نام و ورود برای سایتتون درست کنید؟ 🤔 احتمالاً اسم SSO رو شنیدید ولی میدونید دقیقاً چطور کار میکنه؟ 🤷‍♂️ این JWT که هی میگن چیه و به چه درد میخوره؟ 🤯 اصلاً تفاوت Authentication و Authorization با هم چیه و هر کدوم رو کجا باید استفاده کرد؟ 😳 تو این قسمت جواب تمام این سوالات رو میدیم و درک عمیقی از این مفاهیم پیدا می‌کنیم: 🔥 Authentication 🔥 Cookies 🔥 JSON Web Token (JWT) 🔥 Fetch API 🔥 Route Guards همچنین یاد میگیریم چطور تو React با API ارتباط برقرار کنیم. 🌐 لیست کامل مباحث رو اینجا ببینید: https://gist.github.com/BijanProgrammer/3a108b665594d7a2c1f23d5cf329376c شرکت در این دوره کاملاً رایگانه و فقط کافیه به ازای هر قسمت که مشاهده میکنید یک صلوات بفرستید و ثوابش رو هدیه کنید به شهیدی که در زیرنویس ویدئو یا کپشن نوشته میشه این قسمت تقدیم به شهید ابراهیم هادی ❤️ با لایک و کامنت تو LinkedIn باعث میشید کانال بیشتر دیده بشه و از من حمایت کنید 🤝 https://www.linkedin.com/posts/bijanprogrammer_react-frontenddevelopment-freebootcamp-activity-7498733565652754433-sjjO