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

• https://codepen.io/angelo_jin/pen/wvrygZa

Display array of users to browser

• https://codepen.io/angelo_jin/pen/QWqQdXE

Show/Hide Element on Screen

• https://codepen.io/angelo_jin/pen/zYERZZL

2 way data binding in ReactJS

• https://codepen.io/angelo_jin/pen/MWEQmqN

Disable a button

• https://codepen.io/angelo_jin/pen/YzrazGY

Update the parent state

• https://codepen.io/angelo_jin/pen/JjrLjOy

Dynamically add child components (React Children)

• https://codepen.io/angelo_jin/pen/BawrpeX

Sum of Two Numbers

• https://codepen.io/angelo_jin/pen/zYEWZNR

Create Counter App

• https://codepen.io/angelo_jin/pen/mdBxWwN

Fetch data from an API

• https://codepen.io/angelo_jin/pen/oNGqZpm

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

Comments

[Dan]

It was fun! Thanks a lot!

[Hemavathi]

Very helpful exercises for beginners. Thank you :)

[Sharon_Rosario]

hey bro please make more challeneges like these.. i want some hard level questions

[Neuro Neutro]

too easy for interview, look real example
https://stackblitz.com/edit/stackblitz-starters-rqq4bw?description=A%20create-react-app%20project%20based%20on%20react%20and%20react-dom&file=src%2FApp.js,src%2Findex.js&title=React%20Starter
you can make that all works as expected, but wont pass interview because of interviewer wants you write some functions in other way

[Neuro Neutro]

and you can forget some things because of worrying

[Manish Salunke]

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

its good.

[Janice]

I found these exercises are too easy. Could you please mention that these are for absolute beginners somewhere in the header of the post? I doubt that any interview question would be this straight forward. Nevertheless, appreciate your effort on making the post, it has to be useful for someone 👏🏻

[Katya Belova]

That challenges too easy! Like for the junior level.
I would be glad to see more complecated challenges from you :)

[Let's Code]

sure. I can take it up a notch

[Vasile Engineering]

Very helpful for me. Thank you.

[Let's Code]

of course. very welcome and happy to help

[Ionut Oltean]

Nice I always look for those kind of challenges to practice

[Let's Code]

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

[Pcoch]

Out of curiosity, if you could do all of these quite easily without any external help/docs, is that a good sign you might be ready for a React Junior Dev role? 🤔 Or would we need to be answering the advanced ones?

[Let's Code]

this is question is more tailored for experienced/advanced React Dev.

you can expect basic Q&A for React Junior Dev and small react exercises

[Abu-Sameer]

think you i really enjoy the challenge

[Let's Code]

i am glad you feel that way

[sandym]

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]

you are welcome!

[Isabelle Francis]

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]

it is and is common in any ReactJS applications

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

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]

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.

[abbydorso]

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

[Let's Code]

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.