- 28
- 34 725
prashan
United States
Приєднався 24 лис 2016
The best Software Development and Engineering content on UA-cam. Shine On🤘
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
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 [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
Create React App without Create React App
Переглядів 5 тис.Рік тому
Create React App without Create React App
Thanks I passed my exam today, this did help. Thank you.
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.
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
Can we access other videos related to developer exam practice?
awesome
Pls post part 2 ..I hv scheduled aws developer associate exam. This dumps helped a lot clear the concept
Q-40 ,Is the answer correct?..bz invalidate cache gives us latest data..
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
Thanks!
Will you continue upload the cypress videos?
TQ u sir nice video It will help to certification preparation Can u pls share doc file in link sir 🎉🎉
are u using vue or react cuz in the inspect the root component is vue's one with the data-v-app attribute
Thanks!
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!
You are awesome! Thank you SIR!
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
Kindly post project video about "Multi-vendor Ecommerce website by using MERN Stack or React native CLI App".
Gosh your tutorials are really packed with top tier stuff. Thank you.
Thank you it works .
It is a great and valuable lesson, 10Q so much Mr. !! Keep it up
thankyouman!
Koi Screen Hi Zoom Kr Lyty Bhai
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?
Can you share the diagrams in view only
thankyouu
Please provide a project video on society management system using mern stack 🙏
Try to zoom the vs code
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
Thank Yoy it works, dont know what a wired thing is going in MOngodb
Amazing content, thanks
It's criminal how you don't have views for this gem of a video. Amazingly explained. Thank you.
thank you that helped me
Excellent work, please keep it up!
Really insightful! Thanks for the detailed explanation
❤awesome Brother. You saved my million of minutes.
Thank YOU
I tried to solve this problem from 16 hours now I find the solution thanks brother 😊😊
saved me a ton of stress and time. Thank you very much
will be helpful if you zoom your screen 😎
Thanks bro, appreciate you
Thanks bro really work this tricks 😊😊
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
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 :)
It's useful
Thank you so much!
4 hours? Try 2 weeks lol. There's still something very inconsistent about this solution from react.
Thanks man
Big thank you from Brazil my man!!!
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.
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?
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
Removed the special words from the password and now it says bad auth:authentication failed.What should i do?