Dipesh Malvia
Dipesh Malvia
  • 138
  • 6 456 578
React Design Pattern : Container Presentational Pattern in React.js
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-to-Hero
⭐️ Support my channel ⭐️
www.buymeacoffee.com/dipeshmalvia
⭐️ Node.js for beginners Playlist ⭐️
czcams.com/play/PLTP3E5bPW796_icZanMqhdg7i0Cl7Y51F.html
⭐️ Related Videos ⭐️
🔗 Learn VITE For Next React - czcams.com/video/-fj1loJfSdA/video.html
🔗 React Firebase CRUD App - czcams.com/video/cXWDQhzC3do/video.html
🔗 React Firebase Auth with Context API - czcams.com/video/6kgitEWTxac/video.html
🔗 React Context API - czcams.com/video/zHYkA1AycPs/video.html
🔗 CSS Crash Course in 1 Hour - czcams.com/video/nYsk_U_A_lc/video.html
⭐️ Crash Courses ⭐️
🔗 Nodejs Crash Course - czcams.com/video/H9M02of22z4/video.html
🔗 React Crash Course - czcams.com/video/0riHps91AzE/video.html
🔗 JavaScript Crash Course - czcams.com/video/sptS-bgg8Ro/video.html
🔗 HTML5 Crash Course in 1 Hour - czcams.com/video/Aj3QFsmsagc/video.html
🔗 CSS Crash Course in 1 Hour - czcams.com/video/nYsk_U_A_lc/video.html
🔗 Social Medias 🔗
Twitter: IMDmalvia
Facebook: programmingwithdipesh
Instagram: dipeshmalvia
LinkedIn: www.linkedin.com/in/dmalvia/
⭐️ Hashtags ⭐️
#react #design #pattern #beginner #tutorial
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.
zhlédnutí: 914

Video

How To Build UI Component Library in React | Learn Shadcn/ui in 20 Minutes
zhlédnutí 1KPřed 21 dnem
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
zhlédnutí 4,4KPřed měsícem
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
zhlédnutí 1,5KPřed 2 měsíci
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
zhlédnutí 8KPřed 2 měsíci
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
zhlédnutí 1,1KPřed 3 měsíci
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
zhlédnutí 688Před 3 měsíci
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
zhlédnutí 1KPřed 4 měsíci
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
zhlédnutí 1,2KPřed 4 měsíci
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
zhlédnutí 3,8KPřed 5 měsíci
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
zhlédnutí 2,6KPřed 5 měsíci
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 : czcams.com/video/sKq-aSrnZog/video.html ⭐️ Episode 2 : czcams.com/video/GOp0gH3zE9s/video.html Node.js: The Complete Guide to ...
Building a URL Shortener MERN Stack App with Node.js, TypeScript, MongoDB & React Ep.1
zhlédnutí 5KPřed 5 měsíci
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
zhlédnutí 2,1KPřed 6 měsíci
⭐️ SquareX: Be Fearless Online ⭐️ Download Free browser extension - sqrx.io/dm_yt If you are an internet user then you are always worried about Cyber Attacks and you prefer to keep your identity safe, anonymous, and private online. But you have to pay a heavy price for it. Today I have a free solution for you and that is SquareX. In this video I will show you how to use SquareX in your browser ...
Learn Vite For Next React TypeScript Project in 2024 | Vite Crash Course in 15 minutes
zhlédnutí 8KPřed 6 měsíci
⭐️ Coding Ninjas ⭐️ Coding ninjas, lately they have undergone a refresh with an objective to help leaners in every possibly way and get you the tech career you deserve faster.. Signup for a free trial today - bit.ly/42gwo6t ⭐️ Node.js: The Complete Guide to Build Backend Projects [2023] ⭐️ www.dipeshmalvia.com/courses/Nodejs-Zero-to-Hero I usually use CRA create-react-app to scaffold react proj...
How to Build a Generic React Skeleton Loading Component with CSS Animation
zhlédnutí 4,1KPřed 7 měsíci
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
zhlédnutí 2KPřed 7 měsíci
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
zhlédnutí 33KPřed 8 měsíci
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 ?
zhlédnutí 7KPřed 8 měsíci
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 ?
zhlédnutí 194KPřed 9 měsíci
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
zhlédnutí 20KPřed 10 měsíci
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]
zhlédnutí 8KPřed 11 měsíci
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
zhlédnutí 11KPřed 11 měsíci
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
zhlédnutí 3,9KPřed rokem
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
zhlédnutí 21KPřed rokem
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
zhlédnutí 188KPřed rokem
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
zhlédnutí 1,6KPřed rokem
UltaHost : Fast, Reasonable & Secure Web Hosting Platform | Cheapest Hosting Platform
What are Microservices ? | Monolith vs Microservices | Microservices communication in Node.js
zhlédnutí 4,5KPřed rokem
What are Microservices ? | Monolith vs Microservices | Microservices communication in Node.js
Course Launch | Nodejs : The Complete Guide to Build Backend Projects [2023]
zhlédnutí 22KPřed rokem
Course Launch | Nodejs : The Complete Guide to Build Backend Projects [2023]
Learn Node.js & Express with Project in 2 Hours
zhlédnutí 512KPřed rokem
Learn Node.js & Express with Project in 2 Hours
How to Improve Performance of React Apps with Code Splitting
zhlédnutí 5KPřed rokem
How to Improve Performance of React Apps with Code Splitting

Komentáře

  • @parantapbhardwaj7057
    @parantapbhardwaj7057 Před 20 hodinami

    how should i change the base url to make the app do the crud operations, because the app is giving error after i closed it after completing the video. the app started giving error after restarting

  • @KLR_OFFICIALS
    @KLR_OFFICIALS Před dnem

    Thank you so much for sharing the knowledge 🎉🎉🎉🎉🎉🎉

  • @aditya17209
    @aditya17209 Před dnem

    I AM GETTING AN ERROR AT USER ROUTES IT SAYS express.router()is not a function .what should I do plz help.

  • @user-se6mi3fe8w
    @user-se6mi3fe8w Před 2 dny

    Why did you say that most of the big companies used minimum external packages and libraries?

    • @DipeshMalvia
      @DipeshMalvia Před 2 dny

      @@user-se6mi3fe8w because that is true, these libraries and package have vulnerabilities and less preferred that doesn’t mean that companies don’t use external packages and libraries

    • @user-se6mi3fe8w
      @user-se6mi3fe8w Před 2 dny

      @@DipeshMalvia I think that there are limitations when using react-hook-form. I'm doing a project using useFieldArray from react-hook-form. However, I find that useFieldArray automatically generates id of type string as key prop for rendering lists. That means we can't use id of type long generating from database as key prop. Do you have experience about this?

  • @someone-on-earth
    @someone-on-earth Před 2 dny

    1:30:53 we are in the what screen now ?, jokes aside, it was a great tutorial!!

  • @nikitakhatri176
    @nikitakhatri176 Před 3 dny

    Overall video is very nice but your commands that are run are not showing properly so it is causing problem using the command it's very important to see all command

  • @ramyaraghunathan6347

    Thank you so much for your node JS course. Works perfectly in VSC. Thank you so much. you are doing a wonderful Work.

  • @p12112
    @p12112 Před 5 dny

    Could we use stack inside the box or would this be unnecessary?

  • @vishalsinghpanwar2972

    31:28

  • @prateekthapliyal6108

    Sir how can we link this with the front end made with react js?

  • @jalluchakri1528
    @jalluchakri1528 Před 6 dny

    Thanks for developing the Application of ReactJS With Firebase Auth & Store

  • @fabioleitedev
    @fabioleitedev Před 7 dny

    Still using this content for helping me in 2024. 👏

  • @rohitdotexe
    @rohitdotexe Před 7 dny

    1:18:57

  • @rituraj1872
    @rituraj1872 Před 7 dny

    Hi Dipesh I am trying to fetch data using the map function but I'm unable to get the output on my web page what are the issues can you please help?

    • @DipeshMalvia
      @DipeshMalvia Před 7 dny

      Unfortunately, it is difficult to understand what you are trying to do and what error you get ? I need a codebase to understand what you are trying to do ?

    • @rituraj1872
      @rituraj1872 Před 6 dny

      @@DipeshMalvia function Contactlist(props){ console.log(props) const renderContact = props.contacts?.map((contact)=>{ return( <div className='ui contactlist'> <div className='content'> <div>{contact.Name}</div> <div>{contact.mail}</div> </div> actually here the map function is not working. it was showing -:TypeError: Cannot read properties of undefined (reading 'map')

    • @sisyphusnot01
      @sisyphusnot01 Před 20 hodinami

      @@rituraj1872 write a check because the contacts array or variable is empty and undefined, when the JS thread reaches this line where you are trying to use the map function which requires an array when it is fed an undefined data type the code breaks. Hence write a check something like this "!contacts? "no contacts found" : same map function". This should work

  • @shadab9857
    @shadab9857 Před 9 dny

    Why you do this to students, making promotion videos in name of review. You should tell the reality don't miss guide the students

  • @ajiteshmishra0005
    @ajiteshmishra0005 Před 9 dny

    While making final component to render We write the code like export default function App(){ return () } OR export function App(){ return () } OR function App(){ return () } export default App; OR const App = ()=> { return () } export default App; What is the difference in these 4 types of "export" in React-JS??

  • @cyberpaimpol
    @cyberpaimpol Před 10 dny

    In this case contexts are the solution no ? Why a Component ?

    • @DipeshMalvia
      @DipeshMalvia Před 7 dny

      If you mean Context API then it is used for the sharing data and creating global data store to share among not so complex applications. This is a pattern that helps you to achieve SOC.

    • @cyberpaimpol
      @cyberpaimpol Před 7 dny

      @@DipeshMalvia Of course !

  • @namebmw8092
    @namebmw8092 Před 10 dny

    Hi! Hidden component is deprecated. How can i change it?

    • @DipeshMalvia
      @DipeshMalvia Před 7 dny

      I don't recall, you can check the documentation.

  • @arujgarg7267
    @arujgarg7267 Před 11 dny

    53:15

  • @samdisilvaashish311
    @samdisilvaashish311 Před 11 dny

    "I'm sorry, but this video is quite confusing. Could you please delete it and create a new one using the latest version of React?

    • @DipeshMalvia
      @DipeshMalvia Před 7 dny

      I can definitely think of creating a new but delete this is not possible.

  • @TheGabrielMoon
    @TheGabrielMoon Před 11 dny

    beginners DO NOT do this in a serious project. We have hooks now, they are enough to separated logic from UI. This pattern is very outdated and makes your project more complex to maintain. You can also use typescript instead proptypes

    • @somnathroy102
      @somnathroy102 Před 9 dny

      Now this comment has put me in jeopardy whether to watch or not

    • @DipeshMalvia
      @DipeshMalvia Před 7 dny

      Yes, I have mentioned the same if you we are using typescript you don't need proptypes for validation of props. However this pattern is still followed in large applications. Hooks is also one of the pattern but that doesn't mean this is outdated.

  • @sakthikousikr
    @sakthikousikr Před 11 dny

    Sir. Can you please say how to host i have tried using vercel but i am getting 404 error for json api

  • @ridho.p2383
    @ridho.p2383 Před 11 dny

    2024 still use proptypes?

    • @DipeshMalvia
      @DipeshMalvia Před 7 dny

      Yes, there are companies and applications I have seen where propstypes are used because they are not using TS.

  • @shubhamgupta-bl1tr
    @shubhamgupta-bl1tr Před 11 dny

    Nice please come up with more react design patterns

  • @user-ds5ey9gc3n
    @user-ds5ey9gc3n Před 11 dny

    Sir please I requested to make Node js express mong db more projects to learn more and more Sir I will wait it and I appreciate your Time and Effort Sir

  • @user-ds5ey9gc3n
    @user-ds5ey9gc3n Před 11 dny

    Welcome back Sir , Amazing Tutorial with clear Explanation Sir Thanks So Much

  • @antonioluizcrisostomoprzeb320

    Thank you, even though i got a problem to get your accent, you'll guys from India makes programming get easier. Have a good week.

  • @umarfarooq6145
    @umarfarooq6145 Před 12 dny

    the upload care part is not explained as the whole project was based upon it

  • @prateekthapliyal6108
    @prateekthapliyal6108 Před 12 dny

    thank you very much

  • @Undertaker1331
    @Undertaker1331 Před 13 dny

    56:28

  • @MamtaG-g2p
    @MamtaG-g2p Před 13 dny

    I am getting below error for editContact, not able to resolve this. it is pointing to "updateContactHandler" function ERROR: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at AsyncFunction.invokeGetter (<anonymous>:3:28) at EditContact.update (localhost:3000/static/js/bundle.js:900:9)😔

  • @jenniferezediuno6305
    @jenniferezediuno6305 Před 14 dny

    The part that shows the links and the delete or copy link icons is not showing in my local host. what could be the problem?

  • @beastuhmodeuhgamingunivers4518

    i am facing this error Firebase: Error (auth/argument-error).

  • @kailashmali8300
    @kailashmali8300 Před 14 dny

    Nice content

  • @_Good_Evening_
    @_Good_Evening_ Před 15 dny

    Thank you man!!!!!!!!

  • @awangandas1700
    @awangandas1700 Před 15 dny

    Sir, your the app which you have deployed isn't working well

  • @aniketbond0072
    @aniketbond0072 Před 15 dny

    Sir can I connect this frontend to backend project you teached us in backend series? Please help me🙏

  • @aniketbond0072
    @aniketbond0072 Před 15 dny

    Sir how can I connect this frontend to the nodejs backend project you teached in backend series. Please help meee🙏

  • @sudhakiran8292
    @sudhakiran8292 Před 15 dny

    I have an swetting, when i am same cide write on my laptop ro as weyas understand

  • @techsavy5669
    @techsavy5669 Před 16 dny

    I play all other videos at 1.25x , but yours 0.75x MM was overwhelming for newbie like me. :) Cheers.

  • @rajatgour9686
    @rajatgour9686 Před 16 dny

    UseMemo is also give same result

  • @leorematika5455
    @leorematika5455 Před 16 dny

    Great video. properly explained in 15 minutes

  • @kikikrish7497
    @kikikrish7497 Před 16 dny

    1. Maximum call stack size exceeded RangeError: Maximum call stack size exceeded 2. Network Error AxiosError: Network Error mee to facing this problem ... i dont know how to resolve this ..... please hepl me to resolve these errors sir

  • @NisargAhir-fd7un
    @NisargAhir-fd7un Před 17 dny

    If I have implemeted clusters to use all the thread then how to implement real singleton design pattern class because if there is a 8 logical thread in my PC then it will create 8 different instance. In c++ they uses mutax to solve this solution. But I don't know how to implement this in nodejs. Can you help me with this?

  • @tejakoncha1816
    @tejakoncha1816 Před 18 dny

    Telling things in a faster way. Not given a proper explanation

  • @34raghulrcse60
    @34raghulrcse60 Před 19 dny

    How to embed this backendcode to frontend to make a working website please a put video on this sir.

  • @programers
    @programers Před 19 dny

    awsome

  • @ujjwalgarg4407
    @ujjwalgarg4407 Před 20 dny

    Thanks for the video, it was very descriptive and really easy to follow.

  • @fathimashamla9053
    @fathimashamla9053 Před 22 dny

    Very explained tutorial ❤ Could you please provide another video for deployment of this project 🙏