React JS Interview Questions ( Stepper ) - Frontend Machine Coding Interview Experience

Подписаться 108 тыс.

Просмотров 33 тыс.

50% 1

🔴 OdinSchool React Web Development Course. Apply now - hubs.la/Q02kCrvk0
🟪 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details
Follow me on Instagram - / roadsidecoder
➡️ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roadsidecoder
React Interview Question on implementing a Checkout Form Stepper feature will be created in this video along with tips and tricks to tackle your React JS and JavaScript Questions in Frontend Machine Coding Interviews.
👤 Join the RoadsideCoder Community Discord -
/ discord
🔗 React JS Interview Series -
• Frontend Machine Codin...
➡️ Source Code -
github.com/piyush-eon/fronten...
🔗 MERN Stack Chat App Tutorial -
• MERN Stack Chat App wi...
🔗 Complete Data Structures and Algorithms with JS Course - • Data Structures and Al...
🔗 JS Interview Series -
• Javascript Interview Q...
🔗 Cars24 Interview Experience -
• Frontend Interview Exp...
🔗 Unacademy Interview Experience -
• Frontend Interview Exp...
🔗 Tazorpay Interview Experience -
• Frontend Interview Exp...
🔗 React Beginner's Project Tutorials -
• React JS Project Tutor...
#JavascriptInterview #ReactInterview #ReactJS
-------------------------------------------------------------------------
00:00 Intro
00:36 Setup new React App
01:51 Stepper Component
02:40 Configurable UI Data
04:42 OdinSchool React Bootcamp
06:02 Continue Stepper Component
07:38 Switch Steps Logic
13:16 Step Progress Bar
15:21 Align Progress bar using refs
-------------------------------------------------------------------------
⭐ Support the channel -
/ @roadsidecoder
Special Thanks to our members -

Опубликовано:

30 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 77

@RoadsideCoder 4 месяца назад

🟪 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details 🔴 OdinSchool React Web Development Course. Apply now - hubs.la/Q02kCrvk0 ➡ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roadsidecoder

@balajiaadi1901 4 месяца назад

Brother please create a search functionality like a industrial way in reactjs ❤ your videos and really helpful for me thanks

@gmjitendra 4 месяца назад

extremely useful for candidates. thank you so much.

@RavindraSingh-lp9pl 4 месяца назад

Superb video bro....majaa aagya

@Infinite_Mainak 4 месяца назад

Very useful video bro...keep sharing such informative content ❤

@ranveerrajput8101 4 месяца назад

Thanks for sharing such valuable content.

@MuhammadAdnan2.0 4 месяца назад

Practical interviews questions should be like this,,, 👍 👌 ❤

@javabrain8480 4 месяца назад

Yes not those jee like dsa questions.

@shahzaib715 4 месяца назад

Amazing part for calc the dynamic width to osm bro, love u from Pakistan

@_booleanValue 4 месяца назад

Very informative thanks a lot

@namratadas5569 4 месяца назад

Great video.., could u plz do a video on multistep forms in react..by making the inputs and forms reusable and also adding validations. It would be of great help. Thanks in advance.

@bharathnaidu4636 4 месяца назад

Useful information

@jahangirkhan3747 4 месяца назад

Another useful and easy to understand tutorial ❤❤❤ Bro do you have any paid course for DSA using Javascript?

@bhaskarbhandari6476 4 месяца назад

can you please explain the complex steps in a easy way so that all can understand otherwise only few can understand. i know the length of the video will increase but i guess this is the best teaching style that a teacher should know.

@user-bg7qc4ff3k 3 месяца назад

Thanks. Your videos are so informative.

@RoadsideCoder 3 месяца назад

Thanks! I have created an indepth course covering all such topics - roadsidecoder.com/course-details

@NikhilPatel-bq7ck 4 месяца назад

First of all Thanks for making such videos. It's something that people will be referring. Just one point I personally felt, that wouldn't it be much better if the component would be a type of Composite Component.

@Aviralsingh-yw7xx 4 месяца назад

Sir amazing content. Can you make an Infinite scroll question-answer.

@nallaparajuamareshvarma8471 4 месяца назад

can you explain the logic of setting the progress bar width couldn't understand probably write a blog it would be helpful

@user-ry8fx5ph8j Месяц назад

So for the progress bar you have to to space the '100%-$' line like this: "calc(100% - $". With this spacing it should work

@user-bz7fl1jb6m 4 месяца назад

i come from techical suneja yt channel I watch Complete podcast and I learn a lot of things from your podcast such a wonderful podcast love from Pakistan

@RoadsideCoder 4 месяца назад

Welcome 💖

@killheist173 4 месяца назад

Could you please make a complete React.js tutorial? Because I am learning it from you only. Well, online, all concepts are spread. It is not in an organized way.

@coolwithsaquibaquib 4 месяца назад

Can u explain about the use of ref @ 16:10 as I'm unable to understand the ref={ele => stepRef.current[index]=ele } from where ele parameter is coming?

@RoadsideCoder 4 месяца назад

u can name "ele" to anything, it just means the current element's ref for the map loop we are already in/

@kiranmahajan778 3 месяца назад

In the CHECKOUT_STEPS config , Is the Component property in the object just a simple function that returns a div or is it some react synatx?

@RoadsideCoder 3 месяца назад

U can name it anything, its just a state

@pavankalita1 4 месяца назад

Very nice discussion. What are your view on "VueJs". I feel more comfortable with "VueJs" than "ReactJs".

@yashramdeo5510 4 месяца назад

Please make a video on WebRTC for file transfer

@KrunalKRG0212 4 месяца назад

💖💖

@sourabhkulkarni9012 4 месяца назад

Hi,I cloned this project from github repo but Ibam not able to see the progress bar, could you please help me with the same

@MarlonEnglemam 2 месяца назад

he probably missed something on the code he put up on github. I coded based on the video and it worked well, when I copied and pasted the code from github I had the same issue.

@deep90402 4 месяца назад

Please make videos on react interview questions ( theory and concepts based)for fresher level.as I m a fresher I don't have any idea about it.

@RoadsideCoder 4 месяца назад

I am bringing a complete course on it!

@user-np7hk4nx1f 4 месяца назад

Progress bar is not visible... please suggest me

@Solo_playz 4 месяца назад

Why don't you write code in typescript?

@stiphenrobert4469 4 месяца назад

Bro you are beauty

@amarchinta4463 4 месяца назад

why reactjs introduced functional components why the rewrite entire code for functional components ? can u please make a video on that or simply answer. thank you

@028-manikandan3 4 месяца назад

In this stepper component was my task for in my company 😅

@prathameshdichwalkar2477 4 месяца назад

how did you did it?

@028-manikandan3 4 месяца назад

@@prathameshdichwalkar2477 current state, previous and next state,this are the interface not state but the I put logic is video logic state create that value increase according to index > 0

@028-manikandan3 4 месяца назад

@@prathameshdichwalkar2477 but I am not completed.he is completed.

@aashish_stanl 4 месяца назад

I see only 1 person asked about the progress bar not working excluding me.

@user-ry8fx5ph8j Месяц назад

So for the progress bar you have to to space the '100%-$' line like this: "calc(100% - $". With this spacing it should work

@Dev-Phantom 10 дней назад

cool

@amanshlko Месяц назад

Can you pls make a video on snake and ladder game in React ?

@MuhammadAdnan2.0 4 месяца назад

Mix up Typescript in these interviews thanks..

@sudhirme101 4 месяца назад

stepper source code is not yet pushed in github . kindly do it☺

@RoadsideCoder 4 месяца назад

Done, Please check now

@prathameshdichwalkar2477 4 месяца назад

hiii bro how you come up with such logic?

@RoadsideCoder 4 месяца назад

By following @RoadsideCoder on Instagram 👀

@prathameshdichwalkar2477 4 месяца назад

@@RoadsideCoder already following😃

@GG-yg2wt 4 месяца назад

Alpha Clasher

@bhaskarbhandari6476 4 месяца назад

very overwhelmed and i didn't got it properly 😢😢😢😢😢😢😢😢😢😢

@harshverma8580 4 месяца назад

Aapka progress bar ko align krne ka tareeka thoda kezual h

@siddhartharajputsingh 4 месяца назад

😂😂😂😂😂😂😂😂😂😂😂

@RoadsideCoder 4 месяца назад

😂

@manojdparmar 4 месяца назад

Everything is fine except one thing, you teach very quickly, which seems a bit difficult to understand. This is my experience, which I am sharing with you. Please pay some attention to this also. thank you

@ManoharBatra 4 месяца назад

you can slow speed as well...

@rajangupta1554 2 месяца назад

sir please explain logic rather than writing code faster

@RoadsideCoder 2 месяца назад

Which part u didnt understand?

@karann3335 4 месяца назад

50k id too high ... in udemy you will get in 500 rs

@abhinavchandurkar1961 4 месяца назад

React is a library and not a framework

@ManoharBatra 4 месяца назад

slip of tongue bhi ho skta hai na

@jitx2797 4 месяца назад

Not the end of the world if you say it wrong

@mijana961 4 месяца назад

Chup be

@pankajbeniwal988 4 месяца назад

Kya farak pdta hai framework ya library, he knows how to build stuff thats it

@user-iz8du7vr4p 4 месяца назад

UI library!

@manojsatwase 4 месяца назад

small bug const calculateProgressBarWidth = () => { return Math.round(((currentStep - 1) / (stepsConfig.length - 1)) * 100); };

@chandanmishra1386 4 месяца назад

still progress bar is not becoming visible. Are you also facing the same issue?

@chandramanikumar8559 3 месяца назад

DO you get the solution?@@chandanmishra1386

@bapanghosh-rq1uh 2 месяца назад

@@chandanmishra1386 .progress-bar { position: absolute; top: 25%; left: 0; width: 100%; /* Ensure the progress bar spans the entire width */ height: 4px; background-color: #ccc; z-index: 1; /* Set a higher z-index to ensure it's above the step numbers */ } change this one .. then it will work