- 210
- 39 782
coding with LuLu
Приєднався 5 вер 2022
Welcome to Coding With Lulu, your ultimate source for mastering front-end development! Whether you're a beginner eager to dive into the world of coding or an experienced developer looking to enhance your skills, you've come to the right place.
👩💻 What We Offer:
Our channel provides easy-to-follow tutorials on HTML, CSS, JavaScript, and modern libraries and frameworks like React, Angular, and Vue.js. Each tutorial is designed to be practical and interactive, giving you the skills needed to build beautiful, responsive websites from scratch.
🚀 Why Subscribe?
Stay Updated: Front-end technologies are always evolving, and so are we! Stay on top of the latest trends and updates in the web development world.
Interactive Learning: Our videos include live coding sessions, challenges, and projects that will help you apply what you learn in real-world scenarios.
🔗 Connect With Us:
how.to.develop.fast@gmail.com
👩💻 What We Offer:
Our channel provides easy-to-follow tutorials on HTML, CSS, JavaScript, and modern libraries and frameworks like React, Angular, and Vue.js. Each tutorial is designed to be practical and interactive, giving you the skills needed to build beautiful, responsive websites from scratch.
🚀 Why Subscribe?
Stay Updated: Front-end technologies are always evolving, and so are we! Stay on top of the latest trends and updates in the web development world.
Interactive Learning: Our videos include live coding sessions, challenges, and projects that will help you apply what you learn in real-world scenarios.
🔗 Connect With Us:
how.to.develop.fast@gmail.com
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
🔍 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
Hey, you didn't type your context, that's why it was complaining with your typing
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
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
Hi, sure that should come in very soon, make sure you turn your notification On and you will be notified
Thank you! The best solution.
Welcome!
maam please bring next13 tutorial
On it, very soon , latest now is 15 😉
Very underrated channel ❤
Great video, good explanation, thank u The video is duplicated during editing or exporting, make sure u look into the issue
Thank you, maybe miss that out. Will fix that Asap
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
@@codingwithlulu you got this,👍 keep it up
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> ); };
This has helped me so much. Thank you!!!!
Thanks
Nice
Good sister
Nice
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.
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
excelente video
Few minutes into the video and i am already loving this
This is cool
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?
I got a unit test playlist which is for beginner, and planing to create future one with all latest techs.
@@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.
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 💌
Thank you so much and so glad you found the content helpful
🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏👏👏👏👏👏👏👏👏👏👏👏👏👏
I love Typescript and Next.js
thank you so much !! ❤
🙏🙏🙏❤❤❤👏👏👏👏👏👏
🙏🙏🙏🙏🙏🙏🙏🙏🙏👏👏👏👏👏👏👏👏👏👏
🙏🙏🙏🙏🙏🙏🙏🙏🙏👏👏👏👏👏👏👏
I am from Brazil and have already watched some of your videos, keep it up.
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,
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!
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 😊
Great video
Glad you enjoyed it
Nice❤
May be you can use react-query for better server management.Which will handle all of the logic .
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 :)
I like this hooks serie. Is it possible to share source-code?
Yes, I will upload them in couple of days and add links in the description
Added
@@codingwithlulu Thanks 👍 You are a good teacher. Good content, you deserve more subscribers.
hi LuLu,
Thank you so much
Promo`SM ✌️
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! 😊
Normally people when they tell you to stop using something, they follow up with an alternative
Nice
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); }
That should work
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.
Agree 👍 🙆♀️ 💯 actually all shorts are 3rd party, will create full video for it with big font and detailed. Thank you for your feedback
It is was amazing!!!
Yes 🥰🥰
is this real?
“Later, motherfuckers!” killed me 😭
caught me offguard
Yo bro how did u get that chatbot? Please let me know
It's chat gpt
Bros been livin under a rock💀💀
😂
💀
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
Thanks man big help
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
started this journey... lets see where it takes... Thank you though...
Very nice channel. YT ranking services = Promo sm .