Let's Code

Posted on Jan 5, 2022 • Edited on Jan 6, 2022

10 ReactJS Coding Challenge (💥Coding Interview Prep💥)

#javascript #react #webdev #challenge

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: 🏋️

Solutions: 🙋

Display simple JSX

https://codepen.io/angelo_jin/pen/xxXrZLd

Display array of users to browser

https://codepen.io/angelo_jin/pen/wvreMpZ

Show/Hide Element on Screen

https://codepen.io/angelo_jin/pen/abLwyrL

2 way data binding in ReactJS

https://codepen.io/angelo_jin/pen/yLzvMop

Disable a button

https://codepen.io/angelo_jin/pen/dyVmyYz

Update the parent state

https://codepen.io/angelo_jin/pen/KKXoKgO

Dynamically add child components (React Children)

https://codepen.io/angelo_jin/pen/MWEVJNb

Sum of Two Numbers

https://codepen.io/angelo_jin/pen/BawrWzy

Create Counter App 🕒

https://codepen.io/angelo_jin/pen/yLzKMXX

Fetch data from an API

https://codepen.io/angelo_jin/pen/zYEWZdW

Happy coding and good luck on your next interview! I hope this material will help you land your next dream job. 💰 🚗 📈

Top comments (41)

armenic • Apr 12 '22

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.

Let's Code • Apr 12 '22

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

Lovish Tater • Oct 5 '22

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.

Let's Code • Oct 6 '22

check this out - reactjs.org/docs/how-to-contribute...

Mary-Katherine McKenzie • May 26 '22

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>

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>

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

Let's Code • May 27 '22

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.

Ionut Oltean • Feb 9 '23

Nice I always look for those kind of challenges to practice

Let's Code • Feb 9 '23

i plan on making more in the future. Stay tuned :)

Manish Salunke • Sep 4 '23

I found this on udemy.
React JS Coding Interview Challenges and Exercises
udemy.com/course/react-js-coding-i...

its good.

Dan • May 7

It was fun! Thanks a lot!

Let's Code • May 13

glad that you've liked the coding exercises! thanks for the comment.

Hemavathi • Feb 22

Very helpful exercises for beginners. Thank you :)

Aliafify • Apr 27 '22

thanks for that nice chalanges

Let's Code • Apr 27 '22

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

sandym • Oct 4 '22

I enjoyed this! Thank you so much!!! If anyone have anything similar please share! I would love to tackle on some more!
Thank you in advance!

Let's Code • Oct 6 '22

you are welcome!

abbydorso • May 25 '22

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

Let's Code • May 26 '22

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.

Isabelle Francis • Jun 25 '22

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?

Let's Code • Jun 28 '22

it is and is common in any ReactJS applications

View full discussion (41 comments)

DEV Community

10 ReactJS Coding Challenge (💥Coding Interview Prep💥)