- 10
- 67 367
Frontend Interview Pro
India
เข้าร่วมเมื่อ 27 ส.ค. 2019
I make videos on Web Technologies such as React, TypeScript, JavaScript, NodeJS, MongoDB, Docker and much more.
The new React “use()” hook in 15mins
In this video, I'll teach you how to use the brand new use() hook in React. The use() hook can be used to read data from promises and context. Additionally, while the promise is being resolved by the use() hook, you can show loaders using the Suspense component and error messages using the ErrorBoundary component. The hook can also be called inside if-else statements and loops, making it extra special.
Timestamps -
0:00 Introduction
1:00 Actual tutorial starts
1:16 use hook with promises
3:10 Using suspense to show a loading screen while use hook resolves our promise
4:24 Using error boundary to show error screen when the promise fails to resolve
5:50 Caching of promise to prevent errors
10:25 Using use hook conditionally
12:25 Using use hook with loops
13:30 use hook cannot be used with try/catch
14:19 use hook with context
------------------
Follow me -
⚪ Instagram ➡ manish_boro
⚪ LinkedIn ➡ www.linkedin.com/in/manish-boro-692b16198/
------------------
My PC Specifications -
⚪ Graphic Card ➡ GALAX RTX 2060 amzn.to/3hmSsCZ
⚪ RAM ➡ HyperX Fury 8GB 3200MHz * 2 amzn.to/3k3Pc17
⚪ Processor ➡ Ryzen 5 3600 amzn.to/2FkQzd0
⚪ CPU Cooler ➡ CoolerMaster H410R amzn.to/3hql7rb
⚪ Motherboard ➡ MSI B450 Tomahawk Max amzn.to/2Fq10f6
⚪ Webcam ➡ Lenovo 300 FHD - FHD 1080P 2.1 Megapixel CMOS Camera, Ultra-Wide 95° Lens, 360 ° Rotation amzn.to/3JX4OkZ
⚪ Gaming Chair ➡ Green Soul Monster Ultimate Series (T) Multi Functional Ergonomic Gaming Chair with Premium & Soft Fabric amzn.to/3q9UCOe
** All the above mentioned links are affiliate links **
#React19 #ReactHooks #UseHook #JavascriptPromises #ReactContextApi #WebDevelopment #JavaScript #ReactJS
Timestamps -
0:00 Introduction
1:00 Actual tutorial starts
1:16 use hook with promises
3:10 Using suspense to show a loading screen while use hook resolves our promise
4:24 Using error boundary to show error screen when the promise fails to resolve
5:50 Caching of promise to prevent errors
10:25 Using use hook conditionally
12:25 Using use hook with loops
13:30 use hook cannot be used with try/catch
14:19 use hook with context
------------------
Follow me -
⚪ Instagram ➡ manish_boro
⚪ LinkedIn ➡ www.linkedin.com/in/manish-boro-692b16198/
------------------
My PC Specifications -
⚪ Graphic Card ➡ GALAX RTX 2060 amzn.to/3hmSsCZ
⚪ RAM ➡ HyperX Fury 8GB 3200MHz * 2 amzn.to/3k3Pc17
⚪ Processor ➡ Ryzen 5 3600 amzn.to/2FkQzd0
⚪ CPU Cooler ➡ CoolerMaster H410R amzn.to/3hql7rb
⚪ Motherboard ➡ MSI B450 Tomahawk Max amzn.to/2Fq10f6
⚪ Webcam ➡ Lenovo 300 FHD - FHD 1080P 2.1 Megapixel CMOS Camera, Ultra-Wide 95° Lens, 360 ° Rotation amzn.to/3JX4OkZ
⚪ Gaming Chair ➡ Green Soul Monster Ultimate Series (T) Multi Functional Ergonomic Gaming Chair with Premium & Soft Fabric amzn.to/3q9UCOe
** All the above mentioned links are affiliate links **
#React19 #ReactHooks #UseHook #JavascriptPromises #ReactContextApi #WebDevelopment #JavaScript #ReactJS
มุมมอง: 277
วีดีโอ
React 19 Hooks - useTransition, useActionState, useFormStatus, useOptimistic in 20 mins
มุมมอง 1K3 หลายเดือนก่อน
Learn the Latest React 19 Features: Async Functions in transitions using useTransition, useActionState, useFormStatus, and useOptimistic Hooks! In this video, you’ll learn: 1. How to implement async functions inside transitions using useTransition hook. 2. How to use the useActionState hook. 3. How to use the useFormStatus hook. 4. How to use the useOptimistic hook. Timestamps - useTransition 0...
Forget memo, useMemo, useCallback - Use the React 19 Compiler 🚀
มุมมอง 2414 หลายเดือนก่อน
With the introduction of the new React compiler, it's no longer mandatory to use memo, useMemo, or useCallback for memoizing components, values, and functions respectively. In this video, we'll explore how memo and useCallback can prevent unnecessary re-renders, demonstrate the installation of the React compiler, configure it with a Vite application, and showcase how the compiler optimizes perf...
React Pro Tip : Separate Business Logic from UI using Custom Hooks
มุมมอง 1.8K11 หลายเดือนก่อน
Live Project Link - infinite-scrolling-example.vercel.app/ Github - github.com/manishboro/infinite-scrolling-example Follow me - ⚪ Instagram ➡ manish_boro ⚪ LinkedIn ➡ www.linkedin.com/in/manish-boro-692b16198/ My PC Specifications - ⚪ Graphic Card ➡ GALAX RTX 2060 amzn.to/3hmSsCZ ⚪ RAM ➡ HyperX Fury 8GB 3200MHz * 2 amzn.to/3k3Pc17 ⚪ Processor ➡ Ryzen 5 3600 amzn.to/2FkQzd0 ⚪ CPU...
Infinite Scrolling in React using Intersection Observer
มุมมอง 1.8Kปีที่แล้ว
Hey fellow developers, welcome back to a brand new video, today we'll see how to implement infinite scrolling in react using the Intersection Observer API. We'll be building a mini project to learn its implementation which is basically a products listing web-app. We'll be integrating infinite scrolling in it so that we don't fetch all the products at once and only fetch when we scroll. Live Pro...
React Pro Tip : Use Component Composition to fix Prop Drilling and Re-renders
มุมมอง 210ปีที่แล้ว
Hey fellow developers, in this video we'll see how we can fix the issue of Prop Drilling and Component re-renders in react using Component Composition. Component Composition is a pattern where we pass a component as a prop to some other components. Timestamps - Intro 00:00 What is Component Composition ? 00:30 Fixing Prop Drilling using Component Composition 03:40 Fixing the issue of Re-renders...
Storing S3 Bucket Image URLs in MongoDB using Multer, NodeJS
มุมมอง 30K3 ปีที่แล้ว
Learn to setup an AWS S3 bucket, generate API keys to access the bucket, using multer to upload images to S3, storing the returned URL in a database like MongoDB and sending a response consisting the URL back to the client. In the very last two videos we made the frontend, setup our backend server and connected to MongoDB. This is the last video of the series and here we will basically setup ou...
(#2 Backend) Profile Image Upload to Amazon S3 in React, NodeJS, MongoDB
มุมมอง 4.9K3 ปีที่แล้ว
Learn to upload images to an AWS S3 bucket using an API made in NodeJS and storing the image URL that S3 returns in a MongoDB database. You will get to know the ins and outs of connecting a React frontend and a NodeJS backend. Also learn to connect MongoDB atlas with your backend server. So in the very last video we made the frontend of our application and in this video we will continue with ou...
(#1 Frontend) Profile Image Upload to Amazon S3 in React, NodeJS, MongoDB
มุมมอง 8K3 ปีที่แล้ว
In this video I will show you how you can make a Profile Image Upload feature using React, NodeJS, MongoDB and Amazon S3. As you can see this is my current profile picture and here I have a little camera icon. When I click on this icon I get 3 options View, Change and Remove, so remove will basically remove my profile picture and change will allow me to upload a new profile picture. Timestamps ...
Crop, Zoom and Download images in React using react-easy-crop
มุมมอง 19K3 ปีที่แล้ว
So the image cropper that I am gonna show you guys how you can make is this. This is my current profile picture and when I click on choose and suppose let me select this image, well that's me of course. So as you can see when I have selected a new image a zoom bar appears. The use of the zoom bar is to just zoom the image and when the editing is done i can just click on change to upload the ima...
Thanks!
Thanks a lot 🙏🏻
Great video. Helped me a lot. I was really confused on the promises part.
Glad it helped!
thanks a lot. this was exactly what i was looking for. 👍
thankyouu
Amazing explanation. Thanks a lot.
youre welcome
Wonderful video
Many thanks
Really useful video, thanks. I was asked about seperating business logic in an interview and I realised I don't even know what business logic is
I have to say it is stunning
Helpful tutorial. thnx
thank you for the vid,
Yoooo, your video was very helpful great job
it was a great video the only doubt i have is if the s3 bucket is set public that means anyone can see the url for s3 bucket and access the bucket wouldn't this be a security issue ?
what if i am not using material ui what should i use instead of snacker and is using context necessary ? will recoil do ? or is it a bad choice
hi, can you do this with Redux Toolkit?
man you are crystal clear to explain, saw a couple of react-easy-crop tutorials and they were a mess, this is super neat, and your explanations are super good, thanks!
Amazing content .This was really helpful thankyou so much💟
Thankyouu so much. Glad it helped you.
Thank you very much for the tutorial. It was very helpful for me.
Thankyou so much
Sikh k naukri dhundu?💩
I Am goind to Uplload my pics on aws s3 now
Is it safe to make your bucket public as it will be availble for public i have created a mern app and i dont want my data to be shared,So what do you suggest?
brother , my need some talking with you. please response me.
NICE tutorial keep it up bro 👍
Please make videos about servless node
CropShape & rotation doesn't work with this download function! If anyone has any ideas, please let me know.
I'm getting this error: Missing credentials in config, if using AWS_CONFIG_FILE, set AWS_SDK_LOAD_CONFIG=1 what should I do to fix this?
where is 3rd video?
If I want to add some image compression logic on the backend before storing it in s3 , where would be a good place to write that logic?
Thank you so much for this amazing tutorial!! Amazing that it's your first, it was very clear and easy to follow and I achieved the outcome :) Keep on doing what you're doing!
Great tutorial--covered a niche subject, demonstrated work for all aspects of the app (MERN + aws), provided a github repo link, included timestamps, and went at an appropriate pace! Thanks!
how do I display the image in the API?, I try to use the getObject function, but it doesn't open in insomnia, but if I click on the link that S3 provides, it opens the image, I saved the location of the image in postgresql
great job!!!!....could you tell me how i can send the file from "generateDownload" to a backend or s3 bucket as a file, because i can literally download the file as a jpeg but cannot get this content as a file to send directly to my backend......i will appreciate a response
Hii, I have already made a video on that. You can check my last video.
sabes decirme si soporta bien archivo de iphone? y recorta bien en safari porque no logro hacerlo funcionar? cuando las imagenes son de 4k me cropea la pantalla en negro eso desde un móvil.
hi @Manish Boro please let me know how to use upload.single in middleware because i cant get more form data if i use inside controller i can only access req.files inside upload.single function cant access req.body
Great video man, keep it going!
great content brother.....Are you from assam?
Yes I am from Assam
how to view image on browser without download the image from aws s3
thank you
Hi, Can you please help me how you uploaded image after crop?
oh shit, thank u bro, u help me.
I do not have any debit or credit cards. What should I do now? Amazon AWS account demands a valid card number to create. What can I do instead?
Hi Manish, I have successfully implemented react easy crop watching your video and uploading to Azure blob container. But, the problem I am facing is it works absolutely fine on desktop browsers but not on mobile browsers. When I upload and crop image from mobile browswe eg. chrome or safari, I get completely black image stored in azure blob. Please help.
Hi Dhiraj, I think the cropper code is not supported in those browsers. Will have to look into it for further information.
Very helpful video mate! Thanks for this.
You're good, I wonder you still working on the web and I have some work with you. is there any way I can contact you?
You can connect with me via LinkedIn
nice, thank you.
MANY THANKS BROTHER
Awesome
Hi, i can we send the cropped image to an api for example
yeah sure
@@frontendinterviewpro as a blob in a new formData()?
@@tiimaldev3686 yes exactly. const formData = new FormData() formData.append("key", "cropped_image")
how to handle error when user choose another file ex: video or mp3...
you can specify an "accept" attribute to accept only desired file extensions
Great Man. Thank you so much. I am new to AWS and learned lot of new stuff by the help of your video. Thanks Again :-)
Thankyou!!
thanks bro
thankyou