coding with LuLu
coding with LuLu
  • 214
  • 44 021
Design Patterns You NEED for React.js Success: Factory Design Pattern
In this video, we dive deep into the design patterns that are essential for achieving success with React.js. Whether you're a beginner looking to solidify your understanding or an experienced developer aiming to refine your skills, this video covers the most effective design patterns that can enhance your React applications.
Learn about:
- The importance of design patterns in software development
- Commonly used patterns in React such as Container/Presentational, Higher-Order Components, Render Props, and Hooks
- Real-world examples to illustrate how these patterns can be applied
- Best practices for implementing these patterns in your projects
Join us as we explore how these design patterns can improve your code's maintainability, scalability, and overall performance. Don't forget to subscribe for more React.js tips and tutorials!
#ReactJS #DesignPatterns #WebDevelopment #JavaScript #CodingTips #Programming #FrontendDevelopment #SoftwareEngineering #WebDesign #TechTutorials
#React #StateManagement #ProviderPattern #WebDevelopment #JavaScript #codingtutorial
#React #TypeScript #TailwindCSS #ReactPatterns #CleanCode #WebDevelopment #PresentationalComponents #ContainerComponents #ReactHooks #FrontendDevelopment #JavaScript #CodeWithMe
มุมมอง: 2

วีดีโอ

🚀 Master Redux Toolkit & Tanstack Query Together in React | 🧑‍💻 Step-by-Step Guide |
มุมมอง 14916 ชั่วโมงที่ผ่านมา
🎯 Are you ready to level up your React development skills? In this tutorial, we’ll take a deep dive into using Redux Toolkit and Tanstack Query (React Query) together, in a real-world project. If you’re looking for the best way to manage both local and server-side state, this video is for you! 🔥 In this step-by-step guide, we’ll cover everything from setting up Redux Toolkit and integrating Rea...
🚀 React like a PRO with Singleton Design Pattern 🔁
มุมมอง 322วันที่ผ่านมา
🎬 Welcome to the Singleton Design Pattern in React.js! In this video, we’ll explore one of the most powerful Creational Design Patterns in software development-the Singleton Pattern! 💻 Don’t worry, this tutorial is crafted for beginners, so you’ll learn how to implement it in a simple way with React and TypeScript. We’ll take you step-by-step from understanding the concept to writing your first...
The ONE Thing That Separates Pro React Devs from Beginners : Presentational & Container Pattern
มุมมอง 1K14 วันที่ผ่านมา
Hey React developers! 👋 In this video, we dive deep into the Presentational and Container Component Design Pattern to help you write cleaner, more maintainable, and scalable code using TypeScript and Tailwind CSS! 🎨 The Presentational and Container Component pattern separates concerns in your React apps, making them easier to test, refactor, and reuse. We'll break down this powerful pattern wit...
Best React Design Patterns for Beginners; Builder Design Pattern
มุมมอง 13914 วันที่ผ่านมา
Unlock the power of the React Builder Design Pattern in this comprehensive tutorial tailored for beginners! 🎨✨ In this video, we break down the Builder Design Pattern, a crucial creational pattern that simplifies the process of constructing complex objects in React applications. 🔍 What you'll learn: - The fundamentals of the Builder Design Pattern - How to implement the pattern in your React pr...
🔥 Form Handling: useActionState Hook | React 19
มุมมอง 15821 วันที่ผ่านมา
🚀 Revolutionize Your React Forms with useActionState! 🎯 Forms are the bread and butter of any web app, but managing form state and submissions can be a headache. Say goodbye to complex, repetitive code and welcome React 19's useActionState hook! 🎉 This powerful new hook simplifies your form logic, allowing you to efficiently handle both client-side and server-side form actions without the chaos...
🚀 React like a PRO with Provider Pattern - Simplify Your State Management with This Design 🔁
มุมมอง 1.5K21 วันที่ผ่านมา
In this video, we dive into the React Provider Pattern, a powerful design pattern that simplifies state management in your React applications. If you're struggling with prop drilling or managing global state in your components, this video is for you! We will cover: - What the React Provider Pattern is and why it's beneficial - How to implement the Provider Pattern step-by-step - Real-world exam...
🚀React like a PRO with HIGHER ORDER COMPONENTS in 2024🔁
มุมมอง 76128 วันที่ผ่านมา
Unlock the power of React with our latest video, "React like a PRO with HIGHER ORDER COMPONENTS in 2024"! In this comprehensive guide, we dive deep into Higher Order Components (HOCs), a powerful pattern that can take your React applications to the next level. Learn how to enhance your components, share logic, and improve code reusability in 2024. In this video, we cover: - What Higher Order Co...
🚀 React like PRO with Recursive Components Pattern🔁
มุมมอง 122หลายเดือนก่อน
Are you ready to take your React skills to the next level? In this tutorial, we dive into the powerful concept of Recursive Components in React, using TypeScript! Learn how to simplify complex, nested data structures like comment threads with ease. I'll walk you through the entire process step-by-step, using simple, beginner-friendly language. By the end of this video, you'll have a solid under...
🚀 Mastering React Design Patterns - LEVEL UP with Compound Components! 💡
มุมมอง 153หลายเดือนก่อน
Unlock the full potential of your React applications with our comprehensive guide on mastering design patterns, specifically focusing on Compound Components! In this video, we dive deep into the concept of Compound Components, showcasing how they can help you write cleaner, more maintainable code. 📌 What You'll Learn: - The fundamentals of Compound Components and their benefits - Step-by-step t...
💡 Compound Components: Elegant React Design Patterns 💡
มุมมอง 124หลายเดือนก่อน
Unlock the full potential of your React applications with our comprehensive guide on mastering design patterns, specifically focusing on Compound Components! In this video, we dive deep into the concept of Compound Components, showcasing how they can help you write cleaner, more maintainable code. 📌 What You'll Learn: - The fundamentals of Compound Components and their benefits - Step-by-step t...
Generic Components: React + TypeScript: A Match Made in Heaven
มุมมอง 128หลายเดือนก่อน
🎯 Dive deep into the magic of React Generic Components with TypeScript! 🚀 In this video, we'll explore how to reduce code redundancy and boost maintainability with TypeScript generics. Learn step-by-step how to refactor messy code into clean, scalable components. Whether you're a beginner or a seasoned developer, this tutorial will transform the way you build React applications. Don't miss out-...
🔄 Master Redux Toolkit: Simplify State Management with Core Principles & Async Thunk!
มุมมอง 63หลายเดือนก่อน
Welcome to our latest episode on mastering state management with Redux Toolkit! 🎯 In this video, we'll guide you through the essentials of Redux, helping you understand why it's a game-changer for managing global state in your React applications. We'll kick off with an overview and dive into Redux's 3 Core Principles, showing you how to refactor your app using the powerful Redux Toolkit. 🚀 You'...
Master React & Redux: Build a Dynamic App from Scratch!
มุมมอง 146หลายเดือนก่อน
🎯 Ready to elevate your React skills? This isn't just another tutorial-it's a journey to mastering React by building a real-world application from the ground up! Whether you're a seasoned developer or just starting out, this project-based approach will transform your understanding of React and its ecosystem. 🔥 What You'll Learn: 🌐 Responsive Design: Make your app beautiful on any device. 💾 Redu...
🚀 Mastering React State Management: useState, useReducer & Context API Explained! 🎉
มุมมอง 1152 หลายเดือนก่อน
Hey React Enthusiasts! 👋 Welcome to the first episode of our exciting new series on React State Management! In this video, we'll dive deep into the essential built-in state management tools that React offers: useState, useReducer, and Context API. 🌟 code resource: github.com/luluCodingWizard/state-management-react/tree/section1-usestate github.com/luluCodingWizard/state-management-react/tree/se...
🚀 Learn React by Projects: Build & Test a GitHub User Search App with TailwindCSS 🌟
มุมมอง 1642 หลายเดือนก่อน
🚀 Learn React by Projects: Build & Test a GitHub User Search App with TailwindCSS 🌟
🚀 Master React: Build & Test Reusable, Responsive Cards from Scratch! 🛠️✨
มุมมอง 2982 หลายเดือนก่อน
🚀 Master React: Build & Test Reusable, Responsive Cards from Scratch! 🛠️✨
🚀🤖 Build Your Own Chatbot AI with Gemini & React
มุมมอง 1.5K2 หลายเดือนก่อน
🚀 Build Your Own Chatbot AI with Gemini & React
🚀 Master React Router v6| part 2| | Active Links, 404 Pages, & useNavigate Magic! 🌟
มุมมอง 263 หลายเดือนก่อน
🚀 Master React Router v6| part 2| | Active Links, 404 Pages, & useNavigate Magic! 🌟
🚀 Master React Router v6| part 1| From Zero to Dynamic Routes & useParams Hook! 🚀
มุมมอง 1233 หลายเดือนก่อน
🚀 Master React Router v6| part 1| From Zero to Dynamic Routes & useParams Hook! 🚀
🔥 React for Beginners Course : Part 4 🚀prevState, useCallback & Custom Hooks! 🚀 | Simplified
มุมมอง 274 หลายเดือนก่อน
🔥 React for Beginners Course : Part 4 🚀prevState, useCallback & Custom Hooks! 🚀 | Simplified
🔥 React for Beginners Course : Part 3 🚀 State Management, Performance & Forms! 🚀 | Simplified
มุมมอง 204 หลายเดือนก่อน
🔥 React for Beginners Course : Part 3 🚀 State Management, Performance & Forms! 🚀 | Simplified
🔥 React for Beginners Course : Part 2 🚀 Mastering Props, State & More! 🚀 | Simplified
มุมมอง 114 หลายเดือนก่อน
🔥 React for Beginners Course : Part 2 🚀 Mastering Props, State & More! 🚀 | Simplified
🔥 React for Beginners Course : Part 1 🚀 Setup, Components & Props Explained
มุมมอง 1024 หลายเดือนก่อน
🔥 React for Beginners Course : Part 1 🚀 Setup, Components & Props Explained
Fixed ✅ Python Was Not Found Run Without Arguments to Install From the Microsoft Store Error
มุมมอง 224 หลายเดือนก่อน
Fixed ✅ Python Was Not Found Run Without Arguments to Install From the Microsoft Store Error
⚡️ Master Pagination Unit test Like a Pro: TanStack Query Dynamic Loading
มุมมอง 914 หลายเดือนก่อน
⚡️ Master Pagination Unit test Like a Pro: TanStack Query Dynamic Loading
⚡️ Master Pagination Like a Pro: TanStack Query Dynamic Loading
มุมมอง 1174 หลายเดือนก่อน
⚡️ Master Pagination Like a Pro: TanStack Query Dynamic Loading
TanStack Query | React Query Tutorial: useMutation() Unit test | Part 9
มุมมอง 3294 หลายเดือนก่อน
TanStack Query | React Query Tutorial: useMutation() Unit test | Part 9
TanStack Query | React Query Tutorial: useMutation() Hook| Part 8
มุมมอง 2984 หลายเดือนก่อน
TanStack Query | React Query Tutorial: useMutation() Hook| Part 8
TanStack Query | React Query Tutorial: useQueries Unit Test| Part 7
มุมมอง 2894 หลายเดือนก่อน
TanStack Query | React Query Tutorial: useQueries Unit Test| Part 7

ความคิดเห็น

  • @ponchorobot6244
    @ponchorobot6244 4 วันที่ผ่านมา

    Awesome

  • @regilearn2138
    @regilearn2138 6 วันที่ผ่านมา

    Audio of This video is very low

    • @codingwithlulu
      @codingwithlulu วันที่ผ่านมา

      Thank you for the feedback, will keep open eye next time on my editor 😀

  • @regilearn2138
    @regilearn2138 6 วันที่ผ่านมา

    Would like to appreciate for you for this. great

  • @rofayel
    @rofayel 8 วันที่ผ่านมา

    I dunno why im watching this video, I have exam tomorrow and i'm not even learning react

    • @sexy_audios
      @sexy_audios 8 วันที่ผ่านมา

      🤣🤣

    • @codingwithlulu
      @codingwithlulu วันที่ผ่านมา

      Hope you enjoyed it and hope your exam went well too 😀

  • @MultiSalvo80
    @MultiSalvo80 8 วันที่ผ่านมา

    Thanks for the video, i use a ProtectedRoute component and wrap my route checking the permissions, is this HOC too right or some other pattern? Simple Example: const ProtectedRoute = ({children}) => { if (permitted) return children; else return <p>Not permitted</p> }

    • @codingwithlulu
      @codingwithlulu วันที่ผ่านมา

      This method is very common to handle protected routes. Of course they are always many different ways to do a thing, as long your method is safe and works, you are good. Will create special video to handle protected routes 😉

    • @MultiSalvo80
      @MultiSalvo80 วันที่ผ่านมา

      @@codingwithlulu thanks!

  • @rahulmaharjan6813
    @rahulmaharjan6813 10 วันที่ผ่านมา

    tanstack infinite scrolling video?

  • @silaskierstein4411
    @silaskierstein4411 11 วันที่ผ่านมา

    Great explanation 💪💪🫃🏿

  • @celestial8610
    @celestial8610 12 วันที่ผ่านมา

    Hai, i like your content. but i think, for this case maybe it would be nice using react useReducer hook :) for the rest of the video, i like the way you explain it.

    • @codingwithlulu
      @codingwithlulu 11 วันที่ผ่านมา

      Thank you so much for the feedback 😊 hope it helped. Yes you are right. For this video, it's purpose it to explain this pattern concept, that is why

  • @douglasnyabasa148
    @douglasnyabasa148 13 วันที่ผ่านมา

    continue with the good works

  • @douglasnyabasa148
    @douglasnyabasa148 13 วันที่ผ่านมา

    this was very helpful thank you very much......

    • @codingwithlulu
      @codingwithlulu 13 วันที่ผ่านมา

      Glad it was helpful!

  • @user-bt8or6pe8u
    @user-bt8or6pe8u 17 วันที่ผ่านมา

    Keep it up👏👏 are you Algerian by any chance?

    • @codingwithlulu
      @codingwithlulu 17 วันที่ผ่านมา

      Thank you. Close, Moroccan 🇲🇦

  • @GoldskinOST
    @GoldskinOST 17 วันที่ผ่านมา

    Hey, you didn't type your context, that's why it was complaining with your typing

  • @simohawkins9124
    @simohawkins9124 17 วันที่ผ่านมา

    this came right on time, i was building a gym dashboard, it got really complicated, i am gonna refactor it now that i got inspired by this, thanks

  • @regilearn2138
    @regilearn2138 23 วันที่ผ่านมา

    hi, can you please provide a video on how to use redux toolkit(not the toolkit query only toolkit) and Tanstack query both in one project

    • @codingwithlulu
      @codingwithlulu 20 วันที่ผ่านมา

      Hi, sure that should come in very soon, make sure you turn your notification On and you will be notified

  • @crossmaxish
    @crossmaxish 23 วันที่ผ่านมา

    Thank you! The best solution.

  • @pranoysarker6475
    @pranoysarker6475 26 วันที่ผ่านมา

    maam please bring next13 tutorial

    • @codingwithlulu
      @codingwithlulu 26 วันที่ผ่านมา

      On it, very soon , latest now is 15 😉

  • @simohawkins9124
    @simohawkins9124 26 วันที่ผ่านมา

    Very underrated channel ❤

  • @simohawkins9124
    @simohawkins9124 27 วันที่ผ่านมา

    Great video, good explanation, thank u The video is duplicated during editing or exporting, make sure u look into the issue

    • @codingwithlulu
      @codingwithlulu 27 วันที่ผ่านมา

      Thank you, maybe miss that out. Will fix that Asap

    • @codingwithlulu
      @codingwithlulu 26 วันที่ผ่านมา

      unfortunately i can't fix this one, luckily just duplicate so it should be fine, but will double check my next ones, thanks for the heads up

    • @simohawkins9124
      @simohawkins9124 26 วันที่ผ่านมา

      @@codingwithlulu you got this,👍 keep it up

  • @王永庆-w4k
    @王永庆-w4k หลายเดือนก่อน

    can also use it :React.FC<Props>: import { FC } from 'react'; const List: FC<ListProps<T>> = ({ items, renderItem }) => { return ( <ul> {items.map((item, index) => ( <li key={index}>{renderItem(item)}</li> ))} </ul> ); };

  • @violakonji9766
    @violakonji9766 หลายเดือนก่อน

    This has helped me so much. Thank you!!!!

  • @uzochukwuemeka3449
    @uzochukwuemeka3449 หลายเดือนก่อน

    Thanks

  • @uzochukwuemeka3449
    @uzochukwuemeka3449 หลายเดือนก่อน

    Nice

  • @sameeralam4640
    @sameeralam4640 หลายเดือนก่อน

    Good sister

  • @BurritoBrooks
    @BurritoBrooks หลายเดือนก่อน

    Nice

  • @benbaron1216
    @benbaron1216 หลายเดือนก่อน

    It's a nice demo, thanks. It would also be cool to see more of a production use case. The problem you talked about with forms sounded interesting but I'm not able to visualize how you'd use generic components in that situation.

    • @codingwithlulu
      @codingwithlulu หลายเดือนก่อน

      Glad you like the demo and hopefully it will be helpful. Production ready examples can only reproduce in real time but will try my best recreate a scenario and share in future videos

  • @marketplacecursos211
    @marketplacecursos211 หลายเดือนก่อน

    excelente video

  • @michaelsolomon6033
    @michaelsolomon6033 หลายเดือนก่อน

    Few minutes into the video and i am already loving this

  • @Oscar4dev
    @Oscar4dev หลายเดือนก่อน

    This is cool

  • @penocrat
    @penocrat หลายเดือนก่อน

    This is great! I'm completely new to unit testing and this is a great headstart for me. I hope you wouldn't mind creating a tutorial on unit testing for beginners or you could point me towards a resource you found helpful?

    • @codingwithlulu
      @codingwithlulu หลายเดือนก่อน

      I got a unit test playlist which is for beginner, and planing to create future one with all latest techs.

    • @penocrat
      @penocrat หลายเดือนก่อน

      @@codingwithlulu Wow! Just saw that now. Thanks so much for putting in the effort. I've turned on notifications for this channel for quick update on your latest releases.

  • @penocrat
    @penocrat หลายเดือนก่อน

    Just 15 minutes into your video and I'm enjoying every bit of it. A huge thanks to you for this, Lulu. I hope to see more of your contents pop on my feeds. BTW, you just earned a new subscriber 💌

    • @codingwithlulu
      @codingwithlulu หลายเดือนก่อน

      Thank you so much and so glad you found the content helpful

  • @shahabakhavan2769
    @shahabakhavan2769 หลายเดือนก่อน

    🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏👏👏👏👏👏👏👏👏👏👏👏👏👏

  • @WebPawn
    @WebPawn หลายเดือนก่อน

    I love Typescript and Next.js

  • @toleenhajkassem6154
    @toleenhajkassem6154 หลายเดือนก่อน

    thank you so much !! ❤

  • @shahabakhavan2769
    @shahabakhavan2769 2 หลายเดือนก่อน

    🙏🙏🙏❤❤❤👏👏👏👏👏👏

  • @shahabakhavan2769
    @shahabakhavan2769 2 หลายเดือนก่อน

    🙏🙏🙏🙏🙏🙏🙏🙏🙏👏👏👏👏👏👏👏👏👏👏

  • @shahabakhavan2769
    @shahabakhavan2769 2 หลายเดือนก่อน

    🙏🙏🙏🙏🙏🙏🙏🙏🙏👏👏👏👏👏👏👏

  • @kaecio
    @kaecio 3 หลายเดือนก่อน

    I am from Brazil and have already watched some of your videos, keep it up.

    • @codingwithlulu
      @codingwithlulu 3 หลายเดือนก่อน

      Olá! Thank you so much for watching my videos and for your kind words. I'm thrilled to have viewers from Brazil! 🌟 Your support means a lot to me and motivates me to keep creating more content. If you have any suggestions or topics you'd like to see covered, feel free to let me know. Keep coding and stay awesome! Abraços,

  • @AliAbdulRahman-ke4cn
    @AliAbdulRahman-ke4cn 4 หลายเดือนก่อน

    Great video! I'm currently working on a project where I have multiple useQuery calls in my component, each fetching different data. I'm wondering how to properly mock these multiple useQuery calls in my unit tests. Could you please provide some guidance on how to handle this scenario? Thanks!

    • @codingwithlulu
      @codingwithlulu 4 หลายเดือนก่อน

      For multiple usequery calls, it is the same way too. If you see the mock, is just to mock result and from which api, we don't define in tests. So you just need add multiple mock results as you need. If this still does not work, please share an example of your scenario and will be able provide exact solution. HAPPY CODING 😊

  • @falasefemi3344
    @falasefemi3344 4 หลายเดือนก่อน

    Great video

    • @codingwithlulu
      @codingwithlulu 4 หลายเดือนก่อน

      Glad you enjoyed it

  • @podcastprison
    @podcastprison 5 หลายเดือนก่อน

    Nice❤

  • @haseebahmad4479
    @haseebahmad4479 5 หลายเดือนก่อน

    May be you can use react-query for better server management.Which will handle all of the logic .

    • @codingwithlulu
      @codingwithlulu 5 หลายเดือนก่อน

      i agree, however this video today is more for tutoring about how build your own custom hooks. Adding to that, in some projects and under certain conditions you are constraints to follow certain patterns so you need to know it all. Watch out for my next video where i do refactor my custom hook to use react-query :)

  • @leeuwa1
    @leeuwa1 5 หลายเดือนก่อน

    I like this hooks serie. Is it possible to share source-code?

    • @codingwithlulu
      @codingwithlulu 5 หลายเดือนก่อน

      Yes, I will upload them in couple of days and add links in the description

    • @codingwithlulu
      @codingwithlulu 5 หลายเดือนก่อน

      Added

    • @leeuwa1
      @leeuwa1 5 หลายเดือนก่อน

      @@codingwithlulu Thanks 👍 You are a good teacher. Good content, you deserve more subscribers.

  • @apofey
    @apofey 5 หลายเดือนก่อน

    hi LuLu,

  • @valueinvestor6715
    @valueinvestor6715 8 หลายเดือนก่อน

    Thank you so much

  • @terrancekuphal
    @terrancekuphal ปีที่แล้ว

    Promo`SM ✌️

  • @danielohayon6505
    @danielohayon6505 ปีที่แล้ว

    Hahaha that's gonna trigger so many people. In fact - use it as much as you can. This is one of the most efficient ways to do conditional rendering in React. The framework actually wants you to do so! 😊

  • @evilchamps7514
    @evilchamps7514 ปีที่แล้ว

    Normally people when they tell you to stop using something, they follow up with an alternative

  • @purpleacecard
    @purpleacecard ปีที่แล้ว

    Nice

  • @RandomLifeClips
    @RandomLifeClips ปีที่แล้ว

    HTML vvv <a href="time line.html" class="button">time line</a> -------------------- CSS vvvvv .button{ text-decoration: none; font-size: 25px; color: white; padding: 20px 50px; border: 3px solid white; position: relative; } .button::before, .button::after{ content: ""; position:absolute; width: 40px; hight: 40px; border: inherit; transition: all .5s; } .button::before{ top: -15px; left: -15px; border-width: 3 0px 0px 3; } .button::after{ bottom: -15px; right: -15px; border-width: 0 3px 3px 0; } .button:hover::before, .button:hover::after{ width: calc(100% + 27px); hight: calc(100% + 27px); }

  • @rotteegher39
    @rotteegher39 ปีที่แล้ว

    Cool and all, but code is too small to see. And move it upper cause the text of the name of the video and buttons block the bottom part of the video.

    • @codingwithlulu
      @codingwithlulu ปีที่แล้ว

      Agree 👍 🙆‍♀️ 💯 actually all shorts are 3rd party, will create full video for it with big font and detailed. Thank you for your feedback