Last month, I posted 2 ReactJS interview questions 🎤 - Advance Questions and Commonly Asked Question and got a significant welcome by dev.to community. 🤗 🥰 Many thanks to all of you!
I decided to complete the package by creating codepen exercises 📝 and a video 📺 to follow up on that effort as one will need to code following the technical interview questions. Also, I added potential solutions for the exercises which is listed below.
If you need to brush up 🆙 your ninja ReactJS skills, you can try to answer the exercises below OR click the video below to guide you step-by-step interactively. (No filler, fast, straight to the point as I highly respect/value your time)
These exercises and solutions will also be available on the video as well.
Exercises: 🏋️
Display simple JSX
Display array of users to browser
Show/Hide Element on Screen
2 way data binding in ReactJS
Disable a button
Update the parent state
Dynamically add child components (React Children)
Sum of Two Numbers
Create Counter App
Fetch data from an API
Solutions: 🙋
Display simple JSX
Display array of users to browser
Show/Hide Element on Screen
2 way data binding in ReactJS
Disable a button
Update the parent state
Dynamically add child components (React Children)
Sum of Two Numbers
Create Counter App 🕒
Fetch data from an API
Happy coding and good luck on your next interview! I hope this material will help you land your next dream job. 💰 🚗 📈
Top comments (40)
Thanks for nice challenges. I really enjoyed solving them! By the way beta.reactjs.org/ also started to include challenges. Maybe you can contribute to the new docs? They are open for public PRs.
your welcome! ill definitely check that out. thanks for the link.👏🏻👍
Hi armenic,
I want to contribute new challenges in beta.reactjs.org/. I don't know how to contribute, I saw React's git repo but I didn't understand how to start. can you please guide me.
check this out - reactjs.org/docs/how-to-contribute...
Great exercises! Had fun with these!!
One thing I want to note - in your solutions, I often see the pattern:
However, the React docs prefer this method of using the previous state value - passing a function that receives the previous state value.
Updating state with
value
instead of using the previous state function may result in some buggy behavior because of React's unpredictable & async state-updating logic. Likely won't see anything buggy with these examples since they aren't too complex, but just wanted to shout out that nuance!Thanks again for these great exercises!!
yes, passing a function is way better and the right approach to handle setting state here. Glad that you found this post useful and you are very welcome. Will create more post/video like again.
It was fun! Thanks a lot!
glad that you've liked the coding exercises! thanks for the comment.
I found this on udemy.
React JS Coding Interview Challenges and Exercises
udemy.com/course/react-js-coding-i...
its good.
Nice I always look for those kind of challenges to practice
i plan on making more in the future. Stay tuned :)
Very helpful exercises for beginners. Thank you :)
thanks for that nice chalanges
your welcome buddy! i feel great that this content helps many devs. 👍
It's difficult for beginners (like me) to directly dive into building projects after learning React from online tutorials. Thanks for these practice problems, need more of these on React. :)
ive been there before and i know how you feel. i’ll try to find more time and do more. i’ll post when i have something ready. thanks for the comment
this is so helpful for interview prep, thank you!!
helping engineers like you and me are the goal of this post and video.
I appreciate the comment and stay tuned for more post like this.
For create counter app challenge, i created two functions (decrease and increase) to be passed instead, later simply calling ....is that inline with best practise?
it is and is common in any ReactJS applications