prashan
prashan
  • 28
  • 34 725
Web Development [18] - React Reusable Snackbar Component for Notifications
Build a Reusable React Snackbar component for notifications:
In this lesson of my Web Development Course, I demonstrate how to develop a simple, yet reusable and reliable Snackbar component using React. I implement this component in Typescript in order to perform type checking on all component props to ensure component reliability and resiliency against type misuse. All CSS styles for this React component are written using a CSS in JS library called Styled Components for it's simplicity. Also in this video, I write component test to test the stability of this React component using an e2e testing tool called Cypress.
This video is part of my UA-cam Web Development Playlist where in one of the previous videos on this playlist, I had demonstrated how to configure a resilient development environment for TypeScript projects. This development environment is configured with today's most popular and widely used languages and technologies including Javascript, Node.js, React, Typescript, Next.js, NPM, Webpack, Babel, EsLint, Prettier, Vitest, React testing library, Cypress, and more.
Timestamps:
0:00 Intro
1:40 Snackbar Component
9:50 Cypress Testing Snackbar Component
Web Development FULL Course: ua-cam.com/play/PLCqt_JZe33mHWnqj5k6gCL0loi479uYpW.html
TypeScript Development Environment Setup: ua-cam.com/video/YK65633NhX4/v-deo.html
About Me:
🌎 My Website: www.fullstackpro.io
GitHub Repo for my UA-cam Videos: github.com/prashan-pudasaini
LinkedIn: www.linkedin.com/in/prashan-pudasaini/
Facebook: fullstackpro.io/
Tags:
#technology #coding #programming #javascript #software #webdevelopment #webdesign #reactjs
Переглядів: 232

Відео

Web Development [17] - Build a Reusable Code Editor in React
Переглядів 5003 місяці тому
Build a Reusable React Code Editor component: In this lesson of my Web Development Course, I demonstrate how to develop a simple, yet reusable and reliable Code Editor component using React. I implement this component in Typescript in order to perform type checking on all component props to ensure component reliability and resiliency against type misuse. All CSS styles for this React component ...
Web Development [16] - React Context API
Переглядів 3003 місяці тому
Understand React Context API and build Reusable React Tooltip component: In this lesson of my Web Development Course, I demonstrate how to develop a simple, yet reusable and reliable Tooltip component using React. I also talk about the concept of React Context API used to solve prop drilling issues. I implement this component in Typescript in order to perform type checking on all component prop...
Web Development [15] - Testing React Components with Cypress Component Testing
Переглядів 1133 місяці тому
React TypeScript Frontend Web Development [Part 15] - In this video, we are going to create React Reusable Button component. We are also going to test this Button component using Cypress component testing. Full Playlist: ua-cam.com/play/PLCqt_JZe33mHWnqj5k6gCL0loi479uYpW.html Github Repo for this Course: github.com/prashan-pudasaini/modjs-youtube Timestamps: 0:00 Button Component 15:14 Cypress ...
Web Development [14] - Open Source React Component Library
Переглядів 1293 місяці тому
In this video, I demonstrate what I have until now for our React Typescript UI components open source UI project - modjs. Please leave your GitHub username in the comment section below if you are interested in contributing to this open source project. Full code for this project: github.com/modjs-org/modjs Full Playlist: ua-cam.com/play/PLCqt_JZe33mHWnqj5k6gCL0loi479uYpW.html 🌎 Find Me Here: Git...
AWS Certified Developer Associate - Practice Exams
Переглядів 1,9 тис.3 місяці тому
AWS Certified Developer Associate Practice Exam Questions 2024: In this video, we'll dive into 65 AWS Certified Developer Associate questions and answers to help you ace your AWS DVA-C02 exam. About Me: 🌎 My Website: www.fullstackpro.io GitHub Repo for my UA-cam Videos: github.com/prashan-pudasaini LinkedIn: www.linkedin.com/in/prashan-pudasaini/ Facebook: fullstackpro.io/ Tags: #a...
Web Development [13] - Reusable SVG Icon as Component
Переглядів 1093 місяці тому
React TypeScript Frontend Web Development [Part 13] - In this video, we are going to create React SVG Icons component. We are also going to test these component using Cypress component testing. Full Playlist: ua-cam.com/play/PLCqt_JZe33mHWnqj5k6gCL0loi479uYpW.html Github Repo for this Course: github.com/prashan-pudasaini/modjs-youtube #coding #technology #frontend #react #typescript #javascript
Web Development [12] - React Foundational Components for Accelerated UI Development
Переглядів 733 місяці тому
React TypeScript Frontend Web Development [Part 12] - In this video, we are going to create React foundational components. We are also going to test these components with Cypress component testing. Full Playlist: ua-cam.com/play/PLCqt_JZe33mHWnqj5k6gCL0loi479uYpW.html Github Repo for this Course: github.com/prashan-pudasaini/modjs-youtube #coding #technology #frontend #react #typescript #javasc...
Web Development [11] - React Container Component
Переглядів 933 місяці тому
React TypeScript Frontend Web Development [Part 11] - In this video, we are going to create a React Container component. We are also going to test this Container component with Cypress component testing. Full Playlist: ua-cam.com/play/PLCqt_JZe33mHWnqj5k6gCL0loi479uYpW.html Github Repo for this Course: github.com/prashan-pudasaini/modjs-youtube #coding #technology #frontend #react #typescript #...
Web Development [10] - React Typography Component
Переглядів 4043 місяці тому
React TypeScript Frontend Web Development Course [Part 10] - In this video, we are going to create a React Typography component that will render HTML text elements based on the provided variant. We are also going to test this Typography component with Cypress Component Testing. Full Playlist: ua-cam.com/play/PLCqt_JZe33mHWnqj5k6gCL0loi479uYpW.html Complete Guide to Testing - Unit Test (Dummy, S...
Web Development [9] - React Layout Component
Переглядів 2,4 тис.3 місяці тому
Building reusable React Layout component: In this lesson of my Web Development Course, I demonstrate how to develop a simple, yet reusable and reliable Layout component using React. I also talk about the ways to theme React Apps and Components. I implement this component in Typescript in order to perform type checking on all component props to ensure component reliability and resiliency against...
Web Development [8] - React forwardRef
Переглядів 1554 місяці тому
React TypeScript Frontend Web Development Course [Part 8] - In this video, we are going to learn about React forwardRef that will wrap all our core and icons component so that the components have access to ref and can use React useRef. Full Playlist: ua-cam.com/play/PLCqt_JZe33mHWnqj5k6gCL0loi479uYpW.html Github Repo for this Course: github.com/prashan-pudasaini/modjs-youtube #coding #technolog...
Web Development [7] - React HOC (Higher Order Component)
Переглядів 2364 місяці тому
React TypeScript Frontend Web Development Course [Part 7] - In this video, we are going to create a React Higher Order Component (HOC) called withSystemProps HOC that will take another React component and return a new React component with additional props. This HOC will be used to wrap all our core and icons component so that all the React core and React icons component have access to the syste...
Web Development [6] - GitHub Repository
Переглядів 744 місяці тому
React TypeScript Frontend Web Development Course [Part 6] - In this video, we are going to push the code we have on our local computer to a GitHub repository. Full Playlist: ua-cam.com/play/PLCqt_JZe33mHWnqj5k6gCL0loi479uYpW.html Github Repo for this Course: github.com/prashan-pudasaini/modjs-youtube #coding #technology #github #frontend #react #typescript #javascript #html #css #nextjs #monore...
Testing Pyramid - Unit Test, Integration Test, and E2E Test
Переглядів 1174 місяці тому
In this video we discuss software testing, mainly E2E test, Integration test, Unit test, Test Doubles Dummies, Stub, Fake, and Mock and we will look at examples of each of the test types' use cases and the advantages and disadvantages of each of these tests. Frontend Web Development Playlist: ua-cam.com/play/PLCqt_JZe33mHWnqj5k6gCL0loi479uYpW.html Timestamps: 00:00 Intro 3:11 Unit Testing 8:12 ...
Web Development [5] - React Themes
Переглядів 2984 місяці тому
Web Development [5] - React Themes
Web Development [4] - NPM Link or SymLInk?
Переглядів 2244 місяці тому
Web Development [4] - NPM Link or SymLInk?
Web Development [3] - Development Environment Setup
Переглядів 1,1 тис.4 місяці тому
Web Development [3] - Development Environment Setup
Web Development [2] - Architecture
Переглядів 5354 місяці тому
Web Development [2] - Architecture
Web Development [1]
Переглядів 9594 місяці тому
Web Development [1]
How Domain Names Work
Переглядів 946 місяців тому
How Domain Names Work
How does SSL Work?
Переглядів 3726 місяців тому
How does SSL Work?
MERN Stack API [2] - Implementation
Переглядів 3,2 тис.Рік тому
MERN Stack API [2] - Implementation
MERN Stack API [1] - Specifications
Переглядів 1 тис.Рік тому
MERN Stack API [1] - Specifications
MongoDB Atlas
Переглядів 4,1 тис.Рік тому
MongoDB Atlas
MongoDB- MongoAPIError
Переглядів 3,8 тис.Рік тому
MongoDB- MongoAPIError
Create React App without Create React App
Переглядів 5 тис.Рік тому
Create React App without Create React App
React Invalid Hook Calls
Переглядів 7 тис.Рік тому
React Invalid Hook Calls

КОМЕНТАРІ

  • @icepicker8528
    @icepicker8528 14 днів тому

    Thanks I passed my exam today, this did help. Thank you.

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

    This video really helped me, thanks for taking the time to make it. In my case it turned out that I was using a stale version of the library somehow, so my updates hadn't been incorporated into the web app, which is ultimately why it wasn't working. I changed the version number and noticed it wasn't increased in the node_modules folder. Going through your video helped me work that out. I liked your novel approach for checking the export matched.

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

    01:13:30 Question 32 01:14:40 Question 33 01:15:37 Question 34 01:17:16 Question 35 01:18:06 Question 36 01:21:26 Question 37 01:22:57 Question 38 01:24:32 Question 39 01:27:06 Question 40 01:29:30 Question 41 01:30:26 Question 42 01:31:10 Question 43 01:32:36 Question 44 01:35:15 Question 45 01:36:15 Question 46 01:37:40 Question 47 01:41:55 Question 48 01:43:39 Question 49 01:44:16 Question 50 01:45:42 Question 51 01:47:13 Question 52 01:49:08 Question 53 01:50:31 Question 54 01:52:54 Question 55 01:53:31 Question 56 01:54:50 Question 57 01:55:47 Question 58 01:57:29 Question 59 01:58:52 Question 60 01:59:35 Question 61 02:00:56 Question 62 02:03:56 Question 63 02:05:11 Question 64 02:06:15 Question 65

  • @Ssttaarr-v8d
    @Ssttaarr-v8d Місяць тому

    Can we access other videos related to developer exam practice?

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

    awesome

  • @TEJ766
    @TEJ766 3 місяці тому

    Pls post part 2 ..I hv scheduled aws developer associate exam. This dumps helped a lot clear the concept

  • @TEJ766
    @TEJ766 3 місяці тому

    Q-40 ,Is the answer correct?..bz invalidate cache gives us latest data..

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

      Q40: I think B is correct. For example if you update product_id 27 in the backend and invalidate the cache for that item then on the next read of the data, it'll get the correct value. The next read could be soon or it could be after many more product update writes happen. Answer D is pretty close but you're updating the backend and the cache for every write regardless of how many reads and cache-misses there are between the writes. Potentially B is better assuming the cache invalidation is faster operation than actually updating the cached value. Full disclosure: I have no idea

  • @nouchance
    @nouchance 3 місяці тому

    Thanks!

  • @k303k
    @k303k 3 місяці тому

    Will you continue upload the cypress videos?

  • @manideepv1370
    @manideepv1370 3 місяці тому

    TQ u sir nice video It will help to certification preparation Can u pls share doc file in link sir 🎉🎉

  • @lolhp._.
    @lolhp._. 3 місяці тому

    are u using vue or react cuz in the inspect the root component is vue's one with the data-v-app attribute

  • @nouchance
    @nouchance 3 місяці тому

    Thanks!

  • @nouchance
    @nouchance 3 місяці тому

    before the video started I wanted to say a huge thank you for helping us learn many things that we didn't know. Health to you and your loved ones! Don't stop, good luck!

  • @nouchance
    @nouchance 3 місяці тому

    You are awesome! Thank you SIR!

  • @mathangik179
    @mathangik179 3 місяці тому

    I think you have to sort ur playlist in the other way and put it in order 1… till the latest one for UA-cam to automatically recommend the next video Right now it recommends the previous one

  • @hendoitechnologies
    @hendoitechnologies 3 місяці тому

    Kindly post project video about "Multi-vendor Ecommerce website by using MERN Stack or React native CLI App".

  • @abdulqaharusman7341
    @abdulqaharusman7341 3 місяці тому

    Gosh your tutorials are really packed with top tier stuff. Thank you.

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

    Thank you it works .

  • @AndualemChanie-k6n
    @AndualemChanie-k6n 4 місяці тому

    It is a great and valuable lesson, 10Q so much Mr. !! Keep it up

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

    thankyouman!

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

    Koi Screen Hi Zoom Kr Lyty Bhai

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

    Hi Full stack pro, I appreciate your work. I am going to follow through the entire course and looking forward to learning a lot from you. I joined a company where these skills are necessary and I believe your course will be fundamental in my career. Quick question. Is there a github repository for this that you can share?

  • @shadowgamer_-yl4kt
    @shadowgamer_-yl4kt 4 місяці тому

    Can you share the diagrams in view only

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

    thankyouu

  • @WARLORD-o7t
    @WARLORD-o7t 4 місяці тому

    Please provide a project video on society management system using mern stack 🙏

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

    Try to zoom the vs code

  • @prashan-dev
    @prashan-dev 4 місяці тому

    Hey Thanks for watching! I have 2024 update on setting up React TypeScript Development Environment using Webpack, Babel, Eslint, Prettier, Styled Components, Cypress Component Testing, Vitest, Unit test, Integrations test, and more. Check it out here: ua-cam.com/video/YK65633NhX4/v-deo.html

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

    Thank Yoy it works, dont know what a wired thing is going in MOngodb

  • @8nokat
    @8nokat 4 місяці тому

    Amazing content, thanks

  • @orangelimesky
    @orangelimesky 5 місяців тому

    It's criminal how you don't have views for this gem of a video. Amazingly explained. Thank you.

  • @haitamghalem8094
    @haitamghalem8094 6 місяців тому

    thank you that helped me

  • @nyan6680
    @nyan6680 6 місяців тому

    Excellent work, please keep it up!

  • @narasimhav_07
    @narasimhav_07 6 місяців тому

    Really insightful! Thanks for the detailed explanation

  • @ExplorewithHafizRasel
    @ExplorewithHafizRasel 6 місяців тому

    ❤awesome Brother. You saved my million of minutes.

  • @cooperasis
    @cooperasis 6 місяців тому

    Thank YOU

  • @vinitkumarparmar1339
    @vinitkumarparmar1339 7 місяців тому

    I tried to solve this problem from 16 hours now I find the solution thanks brother 😊😊

  • @El.primer0
    @El.primer0 8 місяців тому

    saved me a ton of stress and time. Thank you very much

  • @binarybulletin
    @binarybulletin 8 місяців тому

    will be helpful if you zoom your screen 😎

  • @ngaaruhehei1439
    @ngaaruhehei1439 8 місяців тому

    Thanks bro, appreciate you

  • @rpvish9982
    @rpvish9982 9 місяців тому

    Thanks bro really work this tricks 😊😊

  • @danielroyston-lopez3147
    @danielroyston-lopez3147 9 місяців тому

    Hi, I am having this issue and when I link the react version from my external package, it unlinks the actual package and vice versa. I’ve been running around in circles trying to fix this. Any help would be appreciated

    • @prashan-dev
      @prashan-dev 8 місяців тому

      From the package root directory, run "npm link ./path-to/app/node_modules/react. And then in the app root directory, run "npm link @mypackage/pkg". Are you linking multiple packages? If so make sure you link multiple package in the same command. For example, if you want to link @mypackage/pkg1 and @mypackage/pkg2, then make sure you run "npm link @mypackage/pkg1 @mypackage/pkg2" in the app root directory. Hope that helps :)

  • @bhaveshgharat6979
    @bhaveshgharat6979 9 місяців тому

    It's useful

  • @JaquelineKyle
    @JaquelineKyle 10 місяців тому

    Thank you so much!

  • @SPCPerez19Delta
    @SPCPerez19Delta 10 місяців тому

    4 hours? Try 2 weeks lol. There's still something very inconsistent about this solution from react.

  • @raunakkumar6144
    @raunakkumar6144 10 місяців тому

    Thanks man

  • @atlas-brtv
    @atlas-brtv Рік тому

    Big thank you from Brazil my man!!!

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

    Thank you so much, I was pulling my hair out moving from CRA to Babel, Webpack, and TypeScript. I found I had to do addition work to support .env + .env.development + .env.production but I got thru that.

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

    I have exactly the same issue. I'm trying to copme up with an easier solution for this. Does anyone have any idea how this linking process could be made easier?

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

    thank you so much! Im sad to admit how long this took me ( 2 days ) thank you so much again! Also good advice, I do agree the more senior we get the more and more I just skim docs and it always ends up hurting me T-T

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

    Removed the special words from the password and now it says bad auth:authentication failed.What should i do?