- 214
- 44 021
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
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
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
Awesome
Audio of This video is very low
Thank you for the feedback, will keep open eye next time on my editor 😀
Would like to appreciate for you for this. great
Hope it is helpful
I dunno why im watching this video, I have exam tomorrow and i'm not even learning react
🤣🤣
Hope you enjoyed it and hope your exam went well too 😀
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> }
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 😉
@@codingwithlulu thanks!
tanstack infinite scrolling video?
Coming 😊
Great explanation 💪💪🫃🏿
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.
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
continue with the good works
this was very helpful thank you very much......
Glad it was helpful!
Keep it up👏👏 are you Algerian by any chance?
Thank you. Close, Moroccan 🇲🇦
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