prashan
prashan
  • 28
  • 34 453
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 TH-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: th-cam.com/play/PLCqt_JZe33mHWnqj5k6gCL0loi479uYpW.html
TypeScript Development Environment Setup: th-cam.com/video/YK65633NhX4/w-d-xo.html
About Me:
🌎 My Website: www.fullstackpro.io
GitHub Repo for my TH-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
มุมมอง: 222

วีดีโอ

Web Development [17] - Build a Reusable Code Editor in React
มุมมอง 4972 หลายเดือนก่อน
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
มุมมอง 3002 หลายเดือนก่อน
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
มุมมอง 1083 หลายเดือนก่อน
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: th-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
มุมมอง 1253 หลายเดือนก่อน
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: th-cam.com/play/PLCqt_JZe33mHWnqj5k6gCL0loi479uYpW.html 🌎 Find Me Here: Git...
AWS Certified Developer Associate - Practice Exams
มุมมอง 1.8K3 หลายเดือนก่อน
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 TH-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
มุมมอง 1083 หลายเดือนก่อน
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: th-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: th-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
มุมมอง 923 หลายเดือนก่อน
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: th-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
มุมมอง 4003 หลายเดือนก่อน
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: th-cam.com/play/PLCqt_JZe33mHWnqj5k6gCL0loi479uYpW.html Complete Guide to Testing - Unit Test (Dummy, S...
Web Development [9] - React Layout Component
มุมมอง 2.4K3 หลายเดือนก่อน
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
มุมมอง 1553 หลายเดือนก่อน
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: th-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)
มุมมอง 2353 หลายเดือนก่อน
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
มุมมอง 743 หลายเดือนก่อน
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: th-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
มุมมอง 1124 หลายเดือนก่อน
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: th-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?
มุมมอง 2204 หลายเดือนก่อน
Web Development [4] - NPM Link or SymLInk?
Web Development [3] - Development Environment Setup
มุมมอง 1.1K4 หลายเดือนก่อน
Web Development [3] - Development Environment Setup
Web Development [2] - Architecture
มุมมอง 5354 หลายเดือนก่อน
Web Development [2] - Architecture
Web Development [1]
มุมมอง 9564 หลายเดือนก่อน
Web Development [1]
How Domain Names Work
มุมมอง 946 หลายเดือนก่อน
How Domain Names Work
How does SSL Work?
มุมมอง 3706 หลายเดือนก่อน
How does SSL Work?
MERN Stack API [2] - Implementation
มุมมอง 3.2Kปีที่แล้ว
MERN Stack API [2] - Implementation
MERN Stack API [1] - Specifications
มุมมอง 1Kปีที่แล้ว
MERN Stack API [1] - Specifications
MongoDB Atlas
มุมมอง 4.1Kปีที่แล้ว
MongoDB Atlas
MongoDB- MongoAPIError
มุมมอง 3.7Kปีที่แล้ว
MongoDB- MongoAPIError
Create React App without Create React App
มุมมอง 5Kปีที่แล้ว
Create React App without Create React App
React Invalid Hook Calls
มุมมอง 7Kปีที่แล้ว
React Invalid Hook Calls

ความคิดเห็น

  • @icepicker8528
    @icepicker8528 8 วันที่ผ่านมา

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

  • @merefield2585
    @merefield2585 10 วันที่ผ่านมา

    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 16 วันที่ผ่านมา

    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 2 หลายเดือนก่อน

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

  • @TEJ766
    @TEJ766 2 หลายเดือนก่อน

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

    • @icepicker8528
      @icepicker8528 9 วันที่ผ่านมา

      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 2 หลายเดือนก่อน

    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 TH-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 3 หลายเดือนก่อน

    Thank you it works .

  • @AndualemChanie-k6n
    @AndualemChanie-k6n 3 หลายเดือนก่อน

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

  • @SheranBuckman
    @SheranBuckman 3 หลายเดือนก่อน

    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: th-cam.com/video/YK65633NhX4/w-d-xo.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 7 หลายเดือนก่อน

    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 8 หลายเดือนก่อน

    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?