In this tutorial, I am going to describe an interview process for a front-end React developer.
This is the process that I would follow if I would be an interviewer. And this is the process that I would like to be part of as an interviewee.
Let's start with discussing what you must know as a front-end developer.
When I interview front-end developers I evaluate two critical skills:
Software developers solve problems. That's the core value that they bring to the table. Front-end developers solve front-end problems with front-end tools.
If a business uses React, then their interview process should answer two questions: 1) how well can you solve problems, and 2) how well can you solve front-end problems with React. Naturally, knowing React (and other front-end tools) well, will help you to solve front-end problems well.
In your preparation for a front-end React interview adapt this mindset: React is only a tool that solves a specific problem. Master the process of solving front-end problems with React and you'll master React as a tool.
In this tutorial, I'll give you an example of a coding test that has a specific problem, that can be solved with React.
Let's discuss the interview process first.
Personally, I prefer three stage interview process:
First, I want to learn about your previous experience of solving problems as a front-end developer. I am interested in hearing what problems have you solved and how you solved them.
You can talk about the products or features you've built, the team that you were part of and the constraints that you had to deal with.
Talk about high level first. What were you building, who was on your team and what was the development process that you've followed.
Then give examples of specific problems and then solutions. Mention solutions that you found that worked and - that didn't work - and what lessons you've learned from them.
Then talk about what are you looking for in your next role: what products are interested in building, what problems would you like to solve and what technologies would you like to learn.
The goal of this conversation is to establish the baseline for expectations - what should I expect your skills level to be and what you should expect from a new role.
Now it's time to test your skills. I will ask you to solve a specific problem. This problem would be an example of a task that you would get if you would join the company that's hiring.
You can solve it at home or at your face-to-face interview as a pair programming exercise.
If you're asked to solve it at home, then the expectation is for you to spend less then a day on it. If you're asked to solve it at the face-to-face interview, then it could be from an hour to two hours pair programming exercise.
The goal of this test is to see your current skills in action, get a sense of what you know about different aspects of software development and create a context for our next interview stage where we'll discuss your solution and I'll ask you any follow up questions that I might have.
I'll review your solution for the coding test and prepare follow-up questions. We might talk about why have you chosen one solution over the other, how do you think about system design and architecture, how different data-structures affect performance and how do you choose the right one.
At this stage I'll learn more about your broader understanding of how to build a better software.
In this coding test you'll need to build a shopping cart using React.
Shopping cart requirements:
Clear shopping cart button that removes all items from the shopping cart.Clear shopping cart button is disabled.Change quantity button that displays quantity editing view.Remove button.Change quantity button, display quantity editing view:Add one button that adds one more item to the total quantity for the item.Remove one button that removes one item from the total quantity for the item.0, then Remove one button is disabled.Save button that:Save button is disabled.Cancel button that discards any changes and hides quantity editing view.Remove button, then remove item from the shopping list and update:Here's a live example of the React app that you need to build.
Before you continue reading this tutorial - try to do the coding test and build the app yourself first.
Take maximum time of one day.
Choose the code editor that works for you best. I recommend using Visual Studio Code.
This coding test will drive the follow-up questions that I'll ask you in the Stage 3 of the interview process.
If you would like to see my solution, then here it is.
Coming soon.
Often I'll ask questions that we didn't cover during the coding test part of the interview.
How to improve React application performance?
The key approach is to reduce the number of component re-renders in your React application.
Practically, this can be achieved in a couple of different ways: