React JS Interview Questions ( Stepper ) - Frontend Machine Coding Interview Experience
Вставка
- Опубліковано 22 лип 2024
- 🔴 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 -
🟪 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
Brother please create a search functionality like a industrial way in reactjs ❤ your videos and really helpful for me thanks
extremely useful for candidates. thank you so much.
Very useful video bro...keep sharing such informative content ❤
Superb video bro....majaa aagya
Thanks for sharing such valuable content.
Amazing part for calc the dynamic width to osm bro, love u from Pakistan
Very informative thanks a lot
Practical interviews questions should be like this,,, 👍 👌 ❤
Yes not those jee like dsa questions.
Useful information
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.
Thanks. Your videos are so informative.
Thanks! I have created an indepth course covering all such topics - roadsidecoder.com/course-details
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.
Another useful and easy to understand tutorial ❤❤❤
Bro do you have any paid course for DSA using Javascript?
Sir amazing content. Can you make an Infinite scroll question-answer.
can you explain the logic of setting the progress bar width couldn't understand probably write a blog it would be helpful
So for the progress bar you have to to space the '100%-$' line like this: "calc(100% - $". With this spacing it should work
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.
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
Welcome 💖
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?
U can name it anything, its just a state
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?
u can name "ele" to anything, it just means the current element's ref for the map loop we are already in/
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.
Progress bar is not visible... please suggest me
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
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.
cool
Please make a video on WebRTC for file transfer
💖💖
Why don't you write code in typescript?
Bro you are beauty
Very nice discussion. What are your view on "VueJs". I feel more comfortable with "VueJs" than "ReactJs".
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
Can you pls make a video on snake and ladder game in React ?
I see only 1 person asked about the progress bar not working excluding me.
So for the progress bar you have to to space the '100%-$' line like this: "calc(100% - $". With this spacing it should work
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.
I am bringing a complete course on it!
stepper source code is not yet pushed in github . kindly do it☺
Done, Please check now
In this stepper component was my task for in my company 😅
how did you did it?
@@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
@@prathameshdichwalkar2477 but I am not completed.he is completed.
Mix up Typescript in these interviews thanks..
hiii bro how you come up with such logic?
By following @RoadsideCoder on Instagram 👀
@@RoadsideCoder already following😃
Alpha Clasher
very overwhelmed and i didn't got it properly 😢😢😢😢😢😢😢😢😢😢
Aapka progress bar ko align krne ka tareeka thoda kezual h
😂😂😂😂😂😂😂😂😂😂😂
😂
the code and information is really good, but the explanation sounds so complicated. Being a react developer, I couldnt follow you post half of the video. It'd be great if you could slightly slow down while explaining why youre using any particular line, especially calculating the marginLeft attributes
50k id too high ... in udemy you will get in 500 rs
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
you can slow speed as well...
sir please explain logic rather than writing code faster
Which part u didnt understand?
React is a library and not a framework
slip of tongue bhi ho skta hai na
Not the end of the world if you say it wrong
Chup be
Kya farak pdta hai framework ya library, he knows how to build stuff thats it
UI library!
Sorry, way too complex for an online code challenge.
This is how u get a >100k Job 👀
small bug
const calculateProgressBarWidth = () => {
return Math.round(((currentStep - 1) / (stepsConfig.length - 1)) * 100);
};
still progress bar is not becoming visible. Are you also facing the same issue?
DO you get the solution?@@chandanmishra1386
@@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
@@chandanmishra1386 width: `calc(100% - ${margins.marginLeft + margins.marginRight}px)`, there should be space between 100% "space" - "space". then $
No point doing
{currentStep === stepsConfig.length ? "Finish" : "Next"}
If you're not rendering it
{!isComplete && (