Dipesh Malvia
Dipesh Malvia
  • 141
  • 6 579 166
React Design Pattern : Higher Order Function Component | React Higher Order Components Tutorial
In this video we will understand another powerful react design pattern and that is Higher order components. HOC enables the reuse of logic across multiple components, which keeps your code clean, promotes modularity and provides separation of concerns.
⭐️ Giveinternet.org⭐️
At GiveInternet.org, you can sponsor Internet fees and laptops for students from some of the most underserved communities.
Giveaway Form : forms.gle/PmJUuGGDq4XEcbrM7
Donation Link : giveinternet.org/DipeshMalvia
⭐️ Github ⭐️
github.com/dmalvia/React_Design_Patterns/
⭐️ Container Presentational Pattern ⭐️
ua-cam.com/video/nbuJF_i_wcc/v-deo.html
⭐️ Custom Hooks Pattern in React.js⭐️
hua-cam.com/video/66mmj-gN0AQ/v-deo.html
Node.js: The Complete Guide to Build Backend Projects🔥
Link - www.dipeshmalvia.com/courses/Nodejs-Zero-to-Hero
⭐️ Support my channel ⭐️
www.buymeacoffee.com/dipeshmalvia
⭐️ Node.js for beginners Playlist ⭐️
ua-cam.com/play/PLTP3E5bPW796_icZanMqhdg7i0Cl7Y51F.html
⭐️ Related Videos ⭐️
🔗 Learn VITE For Next React - ua-cam.com/video/-fj1loJfSdA/v-deo.html
🔗 React Firebase CRUD App - ua-cam.com/video/cXWDQhzC3do/v-deo.html
🔗 React Firebase Auth with Context API - ua-cam.com/video/6kgitEWTxac/v-deo.html
🔗 React Context API - ua-cam.com/video/zHYkA1AycPs/v-deo.html
🔗 CSS Crash Course in 1 Hour - ua-cam.com/video/nYsk_U_A_lc/v-deo.html
⭐️ Crash Courses ⭐️
🔗 Nodejs Crash Course - ua-cam.com/video/H9M02of22z4/v-deo.html
🔗 React Crash Course - ua-cam.com/video/0riHps91AzE/v-deo.html
🔗 JavaScript Crash Course - ua-cam.com/video/sptS-bgg8Ro/v-deo.html
🔗 HTML5 Crash Course in 1 Hour - ua-cam.com/video/Aj3QFsmsagc/v-deo.html
🔗 CSS Crash Course in 1 Hour - ua-cam.com/video/nYsk_U_A_lc/v-deo.html
🔗 Social Medias 🔗
Twitter: IMDmalvia
Facebook: programmingwithdipesh
Instagram: dipeshmalvia
LinkedIn: www.linkedin.com/in/dmalvia/
⭐️ Hashtags ⭐️
#react #design #pattern
Disclaimer:
It doesn't feel good to have a disclaimer in every video but this is how the world is right now. All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.
Переглядів: 762

Відео

Learn Node.js Streams in 25 minutes | NodeJS Tutorials for Beginners
Переглядів 59714 днів тому
In this video we will understand what are streams, types of streams and their uses in Node.js ? You will learn how to create Readable, Writable, and Transform streams to efficiently handle large files in Node.js. ⭐️ Support my channel⭐️ www.buymeacoffee.com/dipeshmalvia ⭐️ GitHub link for Reference ⭐️ github.com/dmalvia/NodeJS_Streams ⭐️Node.js: The Complete Guide to Build Backend Projects⭐️ Li...
React Design Pattern : Custom Hooks Pattern in React.js
Переглядів 732Місяць тому
In this video we'll explore the Custom Hook pattern in React. This pattern allows you to encapsulate complex logic and reuse it across different components, enabling more modular and reusable code. ⭐️ Github ⭐️ github.com/dmalvia/React_Design_Patterns/ ⭐️ Container Presentational Pattern ⭐️ ua-cam.com/video/nbuJF_i_wcc/v-deo.html Node.js: The Complete Guide to Build Backend Projects🔥 Link - www...
React Design Pattern : Container Presentational Pattern in React.js
Переглядів 1,2 тис.Місяць тому
In this video we'll explore the Container/Presentational pattern in React. Whether you're just starting out with React or looking to improve your code architecture, this pattern is essential for creating clean and efficient applications. ⭐️ Github ⭐️ github.com/dmalvia/React_Design_Patterns/ Node.js: The Complete Guide to Build Backend Projects🔥 Link - www.dipeshmalvia.com/courses/Nodejs-Zero-t...
How To Build UI Component Library in React | Learn Shadcn/ui in 20 Minutes
Переглядів 1,8 тис.Місяць тому
In this video we will see how to build our own reusable component library using Shadcn UI to build modern react apps faster. ⭐️ Giveinternet.org⭐️ At GiveInternet.org, you can sponsor Internet fees and laptops for students from some of the most underserved communities. Giveaway Form : forms.gle/PmJUuGGDq4XEcbrM7 Donation Link : giveinternet.org/DipeshMalvia 🔥 Video contents... ENJOY 👇 0:00:00 -...
Learn React, TypeScript & Firebase with project | React Firebase Crash Course in 4 Hours
Переглядів 6 тис.3 місяці тому
This video is a complete FullStack (React, TypeScript & Firebase) Crash Course for beginners. The video covers different topics like React , Typescript, Firebase Authentication, Firestore Database, Hosting, ShadcnUI and Tailwindcss implementation in one single project. The video showcase the Full Stack concepts and their use in practical project. The Project also help us to learn how we connect...
Scheduling Tasks in Node.js | Cron Jobs in Real Projects
Переглядів 2,3 тис.3 місяці тому
In this video we will understand about the automation & task scheduling in Node.js. Here are the topics along with timestamps that we are going to cover :- 0:00:00 - Intro 0:00:58 - Nodejs node-cron npm package 0:02:42 - Create a simple cron task? 0:03:43 - Cron expression ? 0:05:59 - Schedular for archival of records 0:15:38 - Schedular for data housekeeping. 0:22:01 - Outro Node.js: The Compl...
Learn MERN Stack with Project in 2 Hours | MERN Stack Crash Course for Beginners
Переглядів 10 тис.3 місяці тому
This video is a complete MERN STACK (React, Nodejs & Express) Crash Course for beginners. The video covers different Nodejs, Express, MongoDB, TypeScript, Tailwindcss and React implementation in one single project. The video showcase the MERN Stack concepts and their use in practical project. The Project also help us to learn how we connect the frontend and backend app. How is the project struc...
How to Implement Singleton Design Pattern in Node.js | Node.js Design Patterns Explained
Переглядів 1,3 тис.4 місяці тому
Kick Start your career with OdinSchool React Web Development Bootcamp: hubs.la/Q02qGZz00 In this video we will understand about the Singleton design pattern in Node.js. I will cover the following topics :- 1. Class and Class Instance. 2. What is Module caching and how does it fail ? 3. Do you really need to write Singleton classes in Node.js ? 4. Singleton class use cases in Node.js 5. Best pra...
5 Reasons to use Tailwind CSS | Tailwind CSS Core Concepts
Переглядів 7984 місяці тому
The videos highlights top 5 reasons to use tailwind css over traditional css for faster development and writing more maintainable code with examples. Node.js: The Complete Guide to Build Backend Projects [2023]🔥 Link - www.dipeshmalvia.com/courses/Nodejs-Zero-to-Hero ⭐️ Support my channel⭐️ www.buymeacoffee.com/dipeshmalvia 🔥 Video contents... ENJOY 👇 0:00:00 - Intro 0:00:33 - Utility First-App...
Build & Deploy React, TypeScript & Firebase Full Stack Social Media App | Ep. 3
Переглядів 1,1 тис.5 місяців тому
Kick Start your career with OdinSchool Web Development Demo: hubs.la/Q02qGZz00 Hey what’s going on guys, Welcome back to another exciting episode in our Full Stack development series where we are building a Social Media App similar to instagram from scratch using React, Typescript, Firebase and Uploadcare. For styling our app we will use Tailwind CSS and Shadcn/UI components. We will cover Reac...
Build a Full Stack Social Media App | React, Firebase, Uploadcare, Tailwind CSS & Shadcn/UI | Ep.2
Переглядів 1,3 тис.5 місяців тому
Hey what’s going on guys, Welcome back to another exciting episode in our Full Stack development series where we are building a Social Media App similar to instagram from scratch using React, Typescript, Firebase and Uploadcare. For styling our app we will use Tailwind CSS and Shadcn/UI components. We will cover React concepts, Route setup, Project Structure, Firebase Authentication, Firestore ...
Build a Full Stack Social Media App | React, Firebase, Uploadcare, Tailwind CSS & Shadcn/UI | Ep.1
Переглядів 4,2 тис.6 місяців тому
Hey what’s going on guys, Welcome back to another exciting project in our Full Stack development series. In this video we will build a Social Media App similar to instagram from scratch using React, Typescript, Firebase and Uploadcare. For styling our app we will use Tailwind CSS and Shadcn/UI components. We will cover React concepts, Route setup, Project Structure, Firebase Authentication, Fir...
Building a URL Shortener MERN Stack App with React TypeScript & Tailwind CSS Ep.2
Переглядів 3 тис.6 місяців тому
In this episode we will build our the Frontend part of our URL shortener app using React, Typescript and Tailwind css. We will do the API integration which we built in the previous episode so if you have missed that then I recommend you to check that out. ⭐️ Episode 1 : ua-cam.com/video/sKq-aSrnZog/v-deo.html ⭐️ Episode 2 : ua-cam.com/video/GOp0gH3zE9s/v-deo.html Node.js: The Complete Guide to ...
Building a URL Shortener MERN Stack App with Node.js, TypeScript, MongoDB & React Ep.1
Переглядів 6 тис.7 місяців тому
Get ZEGOCLOUD SDK for 10,000 free mins: bit.ly/49jporL Pre-built UIKits in low codes: bit.ly/4963jwC Create documentations with AI now: bit.ly/3SiTXGY ZEGOCLOUD SDK &API allows you to easily build video call apps/voice call apps/live streaming apps/chat apps in low code within minutes. #zegocloud #api #sdk #lowcode #react #appdevelopment I am starting a new series on MERN stack and Full stack d...
SquareX : The future of web browsing | Browser Security and Privacy Extension
Переглядів 2,4 тис.7 місяців тому
SquareX : The future of web browsing | Browser Security and Privacy Extension
Learn Vite For Next React TypeScript Project in 2024 | Vite Crash Course in 15 minutes
Переглядів 8 тис.7 місяців тому
Learn Vite For Next React TypeScript Project in 2024 | Vite Crash Course in 15 minutes
How to Build a Generic React Skeleton Loading Component with CSS Animation
Переглядів 4,6 тис.8 місяців тому
How to Build a Generic React Skeleton Loading Component with CSS Animation
React and Material UI Login Form Using Mightymeld Prefabs | React Future Dev Tool Tutorial
Переглядів 2,1 тис.8 місяців тому
React and Material UI Login Form Using Mightymeld Prefabs | React Future Dev Tool Tutorial
Learn React, Typescript & Material UI With One Project | Build a Movie App in 90 Minutes
Переглядів 37 тис.9 місяців тому
Learn React, Typescript & Material UI With One Project | Build a Movie App in 90 Minutes
React Component Unit Testing For Beginners | How To Test React Data Fetching, Snapshot Testing ?
Переглядів 8 тис.10 місяців тому
React Component Unit Testing For Beginners | How To Test React Data Fetching, Snapshot Testing ?
How to speed up your React Development skills ? Learn How To Build React Apps Quickly ?
Переглядів 194 тис.10 місяців тому
How to speed up your React Development skills ? Learn How To Build React Apps Quickly ?
Build & Deploy Full Stack E-Commerce App using Next.js 13 and Payloadcms in 45 Minutes
Переглядів 21 тис.Рік тому
Build & Deploy Full Stack E-Commerce App using Next.js 13 and Payloadcms in 45 Minutes
Node.js Complete Course | Course Overview | Learn Node.js to Build Backend Projects [2023]
Переглядів 8 тис.Рік тому
Node.js Complete Course | Course Overview | Learn Node.js to Build Backend Projects [2023]
Build Node.js Serverless E-commerce App Rest API Project | Shopping API With JWT, MongoDB & Stripe
Переглядів 11 тис.Рік тому
Build Node.js Serverless E-commerce App Rest API Project | Shopping API With JWT, MongoDB & Stripe
Coding Ninjas Web Development Course | Honest Review | Java Spring Boot Complete Course
Переглядів 4,1 тис.Рік тому
Coding Ninjas Web Development Course | Honest Review | Java Spring Boot Complete Course
How to Build Node.js Apps with Docker | Dockerize Node.js and Express Apps
Переглядів 22 тис.Рік тому
How to Build Node.js Apps with Docker | Dockerize Node.js and Express Apps
Node.js and Express.js - Complete Course for Beginners | Learn Node.js in 6 Hours
Переглядів 199 тис.Рік тому
Node.js and Express.js - Complete Course for Beginners | Learn Node.js in 6 Hours
UltaHost : Fast, Reasonable & Secure Web Hosting Platform | Cheapest Hosting Platform
Переглядів 1,6 тис.Рік тому
UltaHost : Fast, Reasonable & Secure Web Hosting Platform | Cheapest Hosting Platform
What are Microservices ? | Monolith vs Microservices | Microservices communication in Node.js
Переглядів 4,6 тис.Рік тому
What are Microservices ? | Monolith vs Microservices | Microservices communication in Node.js

КОМЕНТАРІ

  • @vinaychhabra5561
    @vinaychhabra5561 День тому

    You are great, please upload more content , soon 100K

  • @dhirajaryaa
    @dhirajaryaa День тому

    Best useful video for me. View lotof video but your explaining this best❤

  • @googleuser1408
    @googleuser1408 3 дні тому

    You earned a subscriber 🎉

  • @RavindraSingh-lp9pl
    @RavindraSingh-lp9pl 3 дні тому

    react k liye best job portal ?

  • @tanishsharma5967
    @tanishsharma5967 3 дні тому

    Basical this guy is not teaching wrong things to someone he is little bit advance for those who don't know about node js, express and mongodb you may have to few knowledge for this video. not to much but just a little bit . for example what is routes how it works and what is mvc what is jwt you read it thoughery part you can understand very well and properly Or rahi baat line wgera samajh nahi aa rahi to bhai use dhyan se aaram se suno sab damjh aa jae ga 😊

  • @user-yg7qy7ut7l
    @user-yg7qy7ut7l 3 дні тому

    thanks brother

  • @omniman8912
    @omniman8912 4 дні тому

    Chat, before i watch it, how good and helpful was it? honestly

  • @MohammedHusainmobikira
    @MohammedHusainmobikira 5 днів тому

    Really you gave very good example, thank you

  • @HughAmos-n3h
    @HughAmos-n3h 5 днів тому

    Jackson George Lewis Christopher Davis Helen

  • @FlexDenser
    @FlexDenser 5 днів тому

    How does the user data goes excatly to user collection in mongodb

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

    Just a quick update... the Switch component was removed in react-router-dom v6 and replaced with the Routes and Route components. To fix this, you'll need to update your code to be compatible with react-router-dom v6. - Replace Switch with Routes. - Update the Route components to use the element prop instead of component.

  • @hritikrathod6696
    @hritikrathod6696 7 днів тому

    thank you

  • @labnol
    @labnol 7 днів тому

    You explained it really well.

  • @m7mdMAH5
    @m7mdMAH5 7 днів тому

    If there's something I learned from seeing too many express tutorials and copying them, is that there are maybe 10 syntaxes for the same code.

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

    Thank You so much. I found the best Firebase tutorial video on youtube ❤

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

    Niceeeeeeeeee

  • @Mrtheshort
    @Mrtheshort 11 днів тому

    reminder for new people use deleteOne() instead of remove()

  • @kunalgulati3358
    @kunalgulati3358 11 днів тому

    1:03:00

  • @debasisdash1263
    @debasisdash1263 11 днів тому

    Hi thanks for the explainig the concept crisply...hope that you will share more awesome videos

  • @NayanaHegde-r1j
    @NayanaHegde-r1j 11 днів тому

    U r explaining very fast..we can't get anything

  • @ShettySushmitaRajeeva-zn4oe
    @ShettySushmitaRajeeva-zn4oe 12 днів тому

    I got connection error @38:11

  • @user-vi2mp4vv4s
    @user-vi2mp4vv4s 12 днів тому

    This has helped me a lot

  • @rhythmverma6641
    @rhythmverma6641 15 днів тому

    the correct way to import uuid is import { v4 as uuidv4 } from 'uuid';

  • @rhythmverma6641
    @rhythmverma6641 15 днів тому

    @ 38.03 when you will try to retrive data it wont get retrived as the order is incorrect of the useEffect but when you change the order it will work so the order is this useEffect(() => { const retrieveContacts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)); if (retrieveContacts) setContacts(retrieveContacts); }, []); // Then, save contacts whenever they change (only after retrieval) useEffect(() => { if (contacts.length > 0) { localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts)); } }, [contacts]); happy coding !!!

  • @pranavv8071
    @pranavv8071 15 днів тому

    Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client at ServerResponse.setHeader (node:_http_outgoing:659:11) at ServerResponse.header (C:\Users\Pranav\Desktop\RealProjects\Backend_Projects\Contact_App ode_modules\express\lib esponse.js:795:10) at ServerResponse.send (C:\Users\Pranav\Desktop\RealProjects\Backend_Projects\Contact_App ode_modules\express\lib esponse.js:175:12) at ServerResponse.json (C:\Users\Pranav\Desktop\RealProjects\Backend_Projects\Contact_App ode_modules\express\lib esponse.js:279:15) at errorHandler (C:\Users\Pranav\Desktop\RealProjects\Backend_Projects\Contact_App\middleware\errorHandler.js:44:7) at Layer.handle_error (C:\Users\Pranav\Desktop\RealProjects\Backend_Projects\Contact_App ode_modules\express\lib outer\layer.js:71:5) at trim_prefix (C:\Users\Pranav\Desktop\RealProjects\Backend_Projects\Contact_App ode_modules\express\lib outer\index.js:326:13) at C:\Users\Pranav\Desktop\RealProjects\Backend_Projects\Contact_App ode_modules\express\lib outer\index.js:286:9 at Function.process_params (C:\Users\Pranav\Desktop\RealProjects\Backend_Projects\Contact_App ode_modules\express\lib outer\index.js:346:12) at Immediate.next (C:\Users\Pranav\Desktop\RealProjects\Backend_Projects\Contact_App ode_modules\express\lib outer\index.js:280:10) why this error

    • @RakeshSingh-vl2mz
      @RakeshSingh-vl2mz 13 днів тому

      use return and u can only return one res.end not 2

  • @hetpatel1772
    @hetpatel1772 16 днів тому

    Oh man can you increase the video content frequency to 3-4 videos every week. They are a lot of informative.

  • @muhammadtayyab012
    @muhammadtayyab012 16 днів тому

    sir i need this project presentation structure slides kindly give me this link

  • @MohammadSadiqu
    @MohammadSadiqu 16 днів тому

    not statisfied with your video, you don't give the proper infomration

  • @shubhamgupta-bl1tr
    @shubhamgupta-bl1tr 17 днів тому

    I want to understand both the components have thire own state ( second, isactive) or they are sharing the same state ?

  • @mahendra.bana78
    @mahendra.bana78 17 днів тому

    👍

  • @regilearn2138
    @regilearn2138 17 днів тому

    cant we do this using functions instead of class

    • @gngamestudio
      @gngamestudio 12 днів тому

      Nodejs, expressjs, docker, graphql, typescript and more: www.udemy.com/course/express-typescript-nodejs-mongodb-more-the-real-path/?referralCode=D4440486EE17A1F4D41A

  • @AfzalAnsari-hz5ck
    @AfzalAnsari-hz5ck 17 днів тому

    I was waiting for it.👍

  • @abdullahahmadsiddiqui2653
    @abdullahahmadsiddiqui2653 17 днів тому

    Let's study❤

  • @josephmdrgbzr
    @josephmdrgbzr 17 днів тому

    use indexing in userModel to improve the database retrieval like this userSchema.index({ email : 1}), I experienced a slow response when it comes to identifying if the email is already in the database so I do a research and found out the indexing method.

  • @amitluthra9563
    @amitluthra9563 17 днів тому

    This is Awesome video. So much covered in just 2 hours. Really helpful and very well explained.

  • @hamudxd9497
    @hamudxd9497 18 днів тому

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

    Thanks brev I love ya mate. you seriously helped me out. Thanks a lot mate.

  • @yogendrarajput-k3n
    @yogendrarajput-k3n 19 днів тому

    upload care ui is not visible perfectly all the items inside it will saw extra large how to resolve this

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

    the github code for the Build User Signup Feature part is not the same

  • @itsayesha4440
    @itsayesha4440 22 дні тому

    I had started this video at 11 am today and now i had completed this project. I was begineer web-developer and starting my full-stack journey for 3 month as a intern in a software house. there were a lot of bugs and error through out the coding process on my side but i try my best to overcome those issues. Thank you for this video.

  • @Sneaky-jn8ji
    @Sneaky-jn8ji 22 дні тому

    Bro not working in mobile

  • @muneebahmad4378
    @muneebahmad4378 24 дні тому

    Bhai how do I get package jason file?????

  • @elusiveadrameleck9057
    @elusiveadrameleck9057 25 днів тому

    uploadCare has changed, from the time of following this tutorial i cannot tell what is what from uploadcare

  • @DevHive-wy3in
    @DevHive-wy3in 25 днів тому

    bro i have suggesion change the file name idex.ts to index.d.ts. then we do not need to export the interfaces we can only decalre it's imported automatically.

    • @DipeshMalvia
      @DipeshMalvia 24 дні тому

      That's a good suggestion thanks.

  • @GfoxSim
    @GfoxSim 25 днів тому

    Perfection! This video just made the concept behind Redux simpler to understand. Thank you.

  • @dupladupa-gl8lo
    @dupladupa-gl8lo 27 днів тому

    idk node can i watch it?

    • @DipeshMalvia
      @DipeshMalvia 24 дні тому

      Yes, If you know Javascript then you can jump to this video or you can also start from this playlist - ua-cam.com/play/PLTP3E5bPW796_icZanMqhdg7i0Cl7Y51F.html

  • @altaf.ahmed.youtube
    @altaf.ahmed.youtube 28 днів тому

    Awesome Video, built my interest in node js, Thanks Man.

  • @ak_ros
    @ak_ros 28 днів тому

    i really learned a lot, Thanks

  • @user-ei1ym1lq6h
    @user-ei1ym1lq6h 28 днів тому

    Hi Dipnesh. Is it possible to add a sub-object into another sub-object by a unique key?

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

    hats off man, what a video for a fresher like me - just thought this can be the game changer from fresher to experienced.