DEV Community

Cover image for 10 ReactJS Coding Challenge (💥Coding Interview Prep💥)
Let's Code
Let's Code

Posted on • Updated on

10 ReactJS Coding Challenge (💥Coding Interview Prep💥)

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. 💰 🚗 📈

Discussion (16)

Collapse
armenic profile image
armenic

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.

Collapse
frontendengineer profile image
Let's Code Author

your welcome! ill definitely check that out. thanks for the link.👏🏻👍

Collapse
mkmckenzie profile image
Mary-Katherine McKenzie

Great exercises! Had fun with these!!

One thing I want to note - in your solutions, I often see the pattern:

const [value, setValue] = React.useState(0)

<button onClick={setValue(value +1)}>Increment</button>
Enter fullscreen mode Exit fullscreen mode

However, the React docs prefer this method of using the previous state value - passing a function that receives the previous state value.

const [value, setValue] = React.useState(0)

<button onClick={setValue(prevValue => prevValue + 1)>
    Increment
</button>
Enter fullscreen mode Exit fullscreen mode

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!!

Collapse
frontendengineer profile image
Let's Code Author

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.

Collapse
abbydorso profile image
abbydorso

this is so helpful for interview prep, thank you!!

Collapse
frontendengineer profile image
Let's Code Author

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.

Collapse
aliafify profile image
Aliafify

thanks for that nice chalanges

Collapse
frontendengineer profile image
Let's Code Author

your welcome buddy! i feel great that this content helps many devs. 👍

Collapse
veronicamarie24 profile image
Veronica Valenzuela

This was so helpful, thank you!

Collapse
frontendengineer profile image
Let's Code Author • Edited on

your welcome Veronica! check the youtube video i have above for additional reference. Many found it useful as well.

Collapse
techspace profile image
Saty4Dev

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. :)

Collapse
frontendengineer profile image
Let's Code Author

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

Collapse
ersankarimi profile image
Ersan Karimi

For me (beginner), this is very helpful and gives an overview of the interview later. Thank you for sharing

Collapse
frontendengineer profile image
Let's Code Author

absolutely! what is your status currently? are you in the job market?

Collapse
anandbaraik profile image
Anand-Baraik

Good job man. Intresting exercises.

Collapse
frontendengineer profile image
Let's Code Author • Edited on

thank you Anand! What is your favorite exercise and why? Or perhaps anything that you would like to see on the challenge.