coding with LuLu
coding with LuLu
  • 210
  • 39 782
Best React Design Patterns for Beginners; Builder Design Pattern
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 projects
- Real-world examples and practical use cases
- Tips and tricks for optimizing your component design
Whether you're new to React or looking to enhance your design pattern knowledge, this video is perfect for you! Join us as we simplify the concepts and guide you step-by-step through the implementation.
chapters:
00:00 overview
00:35 What is the Builder Design Pattern
01:08 Why Use the Builder Design Pattern?
01:41 Code time
10:37 benefits
Don't forget to like, comment, and subscribe for more insightful content on design patterns and React development!
#React #BuilderPattern #DesignPatterns #WebDevelopment #Programming #FrontendDevelopment #CodingForBeginners
#React #StateManagement #ProviderPattern #WebDevelopment #JavaScript #CodingTutorial
Переглядів: 27

Відео

🔥 Form Handling: useActionState Hook | React 19
Переглядів 1337 годин тому
🚀 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,2 тис.16 годин тому
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🔁
Переглядів 681День тому
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🔁
Переглядів 8214 днів тому
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! 💡
Переглядів 8314 днів тому
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 💡
Переглядів 9114 днів тому
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
Переглядів 11228 днів тому
🎯 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!
Переглядів 59Місяць тому
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!
Переглядів 140Місяць тому
🎯 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! 🎉
Переглядів 113Місяць тому
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 🌟
Переглядів 156Місяць тому
Welcome to "Learn React by Projects," your ultimate guide to mastering React through practical, hands-on projects! In this engaging tutorial series, designed for absolute beginners, we'll build a complete GitHub user search application. Along the way, you'll learn how to set up a project, style it with TailwindCSS, manage state with Context API and Reducers, and write comprehensive unit tests. ...
🚀 Master React: Build & Test Reusable, Responsive Cards from Scratch! 🛠️✨
Переглядів 296Місяць тому
🌟 Welcome to our "Learn React by Projects" series, crafted for absolute beginners! 🎓 In this comprehensive tutorial, you'll learn how to create reusable, responsive, and testable cards in React. Follow along as we break down the project step-by-step: 📌 Timeline: 00:00 Overview 00:38 Understanding the Requirements, Tools & Project Setup 🛠️ 09:16 Adding Fonts to Your Project ✨ 11:54 Creating a Re...
🚀🤖 Build Your Own Chatbot AI with Gemini & React
Переглядів 1,1 тис.2 місяці тому
🚀 Build an AI Chatbot with React & Gemini API! | Step-by-Step Tutorial Welcome to this exciting tutorial where we build a powerful AI Chatbot using React and the Gemini API! 🌟 This video will guide you through every step, from setting up your development environment to deploying your chatbot. Whether you're a beginner or an experienced developer, you'll find valuable insights and tips to enhan...
🚀 Master React Router v6| part 2| | Active Links, 404 Pages, & useNavigate Magic! 🌟
Переглядів 252 місяці тому
Welcome back to Part 2 of our React Router v6 tutorial series! This time, we're taking it up a notch with advanced features and fun explanations. Here's what we'll cover: Styling Active Router Links - Make navigation visually appealing! 🎨 Unit Testing Active Links - Keep your routes rock-solid! 🧪 404 Page Not Found - Handle errors gracefully. 🚫 Index Routes / Default Routes - Simplify your app'...
🚀 Master React Router v6| part 1| From Zero to Dynamic Routes & useParams Hook! 🚀
Переглядів 1152 місяці тому
🚀 Master React Router v6| part 1| From Zero to Dynamic Routes & useParams Hook! 🚀
🔥 React for Beginners Course : Part 4 🚀prevState, useCallback & Custom Hooks! 🚀 | Simplified
Переглядів 273 місяці тому
🔥 React for Beginners Course : Part 4 🚀prevState, useCallback & Custom Hooks! 🚀 | Simplified
🔥 React for Beginners Course : Part 3 🚀 State Management, Performance & Forms! 🚀 | Simplified
Переглядів 203 місяці тому
🔥 React for Beginners Course : Part 3 🚀 State Management, Performance & Forms! 🚀 | Simplified
🔥 React for Beginners Course : Part 2 🚀 Mastering Props, State & More! 🚀 | Simplified
Переглядів 113 місяці тому
🔥 React for Beginners Course : Part 2 🚀 Mastering Props, State & More! 🚀 | Simplified
🔥 React for Beginners Course : Part 1 🚀 Setup, Components & Props Explained
Переглядів 983 місяці тому
🔥 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
Переглядів 203 місяці тому
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
Переглядів 774 місяці тому
⚡️ Master Pagination Unit test Like a Pro: TanStack Query Dynamic Loading
⚡️ Master Pagination Like a Pro: TanStack Query Dynamic Loading
Переглядів 914 місяці тому
⚡️ Master Pagination Like a Pro: TanStack Query Dynamic Loading
TanStack Query | React Query Tutorial: useMutation() Unit test | Part 9
Переглядів 2644 місяці тому
TanStack Query | React Query Tutorial: useMutation() Unit test | Part 9
TanStack Query | React Query Tutorial: useMutation() Hook| Part 8
Переглядів 2284 місяці тому
TanStack Query | React Query Tutorial: useMutation() Hook| Part 8
TanStack Query | React Query Tutorial: useQueries Unit Test| Part 7
Переглядів 2404 місяці тому
TanStack Query | React Query Tutorial: useQueries Unit Test| Part 7
TanStack Query | React Query Tutorial: useQuery unit test | Part 6
Переглядів 5604 місяці тому
TanStack Query | React Query Tutorial: useQuery unit test | Part 6
TanStack Query | React Query Tutorial: useQueries Hook | Part 5
Переглядів 3264 місяці тому
TanStack Query | React Query Tutorial: useQueries Hook | Part 5
TanStack Query | React Query Tutorial: useQuery Status & Fetch Status | Part 4
Переглядів 1364 місяці тому
TanStack Query | React Query Tutorial: useQuery Status & Fetch Status | Part 4
TanStack Query | React Query Tutorial: DevTool | Part 3
Переглядів 2274 місяці тому
TanStack Query | React Query Tutorial: DevTool | Part 3

КОМЕНТАРІ

  • @GoldskinOST
    @GoldskinOST 6 годин тому

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

  • @simohawkins9124
    @simohawkins9124 7 годин тому

    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 5 днів тому

    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 3 дні тому

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

  • @crossmaxish
    @crossmaxish 6 днів тому

    Thank you! The best solution.

  • @pranoysarker6475
    @pranoysarker6475 9 днів тому

    maam please bring next13 tutorial

    • @codingwithlulu
      @codingwithlulu 8 днів тому

      On it, very soon , latest now is 15 😉

  • @simohawkins9124
    @simohawkins9124 9 днів тому

    Very underrated channel ❤

  • @simohawkins9124
    @simohawkins9124 9 днів тому

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

    • @codingwithlulu
      @codingwithlulu 9 днів тому

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

    • @codingwithlulu
      @codingwithlulu 9 днів тому

      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 9 днів тому

      @@codingwithlulu you got this,👍 keep it up

  • @王永庆-w4k
    @王永庆-w4k 15 днів тому

    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 19 днів тому

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

  • @uzochukwuemeka3449
    @uzochukwuemeka3449 19 днів тому

    Thanks

  • @uzochukwuemeka3449
    @uzochukwuemeka3449 19 днів тому

    Nice

  • @sameeralam4640
    @sameeralam4640 20 днів тому

    Good sister

  • @BurritoBrooks
    @BurritoBrooks 23 дні тому

    Nice

  • @benbaron1216
    @benbaron1216 27 днів тому

    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 26 днів тому

      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 28 днів тому

    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 Місяць тому

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

  • @shahabakhavan2769
    @shahabakhavan2769 Місяць тому

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

  • @shahabakhavan2769
    @shahabakhavan2769 Місяць тому

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

  • @kaecio
    @kaecio 2 місяці тому

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

    • @codingwithlulu
      @codingwithlulu 2 місяці тому

      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 3 місяці тому

    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 3 місяці тому

      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

  • @podcastprison
    @podcastprison 4 місяці тому

    Nice❤

  • @haseebahmad4479
    @haseebahmad4479 4 місяці тому

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

    • @codingwithlulu
      @codingwithlulu 4 місяці тому

      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 4 місяці тому

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

    • @codingwithlulu
      @codingwithlulu 4 місяці тому

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

    • @codingwithlulu
      @codingwithlulu 4 місяці тому

      Added

    • @leeuwa1
      @leeuwa1 4 місяці тому

      @@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

  • @joaovictorsilvadejesus1664

    It is was amazing!!!

  • @almnhy
    @almnhy Рік тому

    is this real?

  • @thebrightsideofthesun
    @thebrightsideofthesun Рік тому

    “Later, motherfuckers!” killed me 😭

  • @monke4863
    @monke4863 Рік тому

    Yo bro how did u get that chatbot? Please let me know

  • @CALEB-kt8mn
    @CALEB-kt8mn Рік тому

    😂

  • @خالدحواس-ع2غ
    @خالدحواس-ع2غ Рік тому

    💀

  • @Duncan_racing
    @Duncan_racing Рік тому

    Hey make sure you delete the chat and make a new one so he will forget what you said and he should be able to say 9 + 10 is 21

  • @micahroy1129
    @micahroy1129 Рік тому

    Thanks man big help

  • @dolirdollar8400
    @dolirdollar8400 Рік тому

    I don't see a reason to stop using && or ||. If it's just about rendered "0" then just convert it to Boolean, done. No need to suffer with ternary

  • @MaheshwaranVelusamy
    @MaheshwaranVelusamy Рік тому

    started this journey... lets see where it takes... Thank you though...

  • @chelseamurphy6799
    @chelseamurphy6799 Рік тому

    Very nice channel. YT ranking services = Promo sm .