React Mock Interview

Interviews are always a nerve-wracking thing to do! You spend hours upon hours studying Data Structures and Algorithms, Youtube top programming interview questions and answers, and think of all of the possible questions the interviewer can ask you.

Thanks to Flatiron School, I was able to prepare for a mock interview to go through these same trials and tribulations as my peers. I am writing this blog post to encourage my fellow aspiring software developers to take every interview opportunity that you can, because just like programming, practice makes perfect. Here is how my mock interview went.

1) The Meet - n - Greet
During the first 10-15 minutes of my mock interview, I introduced myself to my interviewer and told him my story of becoming a software developer. This was a key point for me in my interview process because I can demonstrate my soft skills and how my previous work experience as a sales rep in the tech world can benefit my transition to a developer position. Some of the questions you can expect are:

Tell me about yourself?
Why do you want to become a software developer? → My personal favorite! This question is a gateway for you to show your passion for software development!
What are your goals in 5 - 10 years * Think about how you can continue to grow in your career field. I mentioned that I would love to be a team lead or senior developer.
Focus on your strong points, and really show your passion for software development and eagerness to learn. In other words, SELL YOURSELF!

2) Technical Q&A

During the technical Q&A portion of my interview, I was asked a handful of React questions. Here were some of the questions that I was asked:

• What is React?

• What are the differences between functional and class components?

• What is the virtual DOM? How does react use the virtual DOM to render what the user sees?

• Explain React state and props.

• What is prop drilling in React?

• What is JSX?

• Can web browsers read JSX directly?

• Why use React instead of other frameworks?

-How do you create a React app?

• How do you create an event in React?
• How do you update the state of a component?

Make sure that your answers are clear and straight to the point. The interviewer told me the worst thing a candidate can do is ramble on about a topic that does not relate to the questions at hand. Simply say, " I do not know the answer to the question". Now here is where you can differentiate yourself: don't be afraid to ask questions! These are the times that interviewers want to know how you think. I asked the interviewer, “What are other frameworks that you have used in the past besides React?” He said Angular and Vue.js. They all have pros and cons, and the interviewer actually told me he learned Angular first but recently started to learn React because of his company's tech stack and prefers to use React more than anything now!

3) Live Coding

My live coding challenge was to build the following:
Build a React Component that displays the given data
with the functionality of sorting that data and adding rows.

import "./styles.css";
import Row from "./row";
import React, { useState } from "react";

// Build a React Component that displays the given data
// with the functionality of sorting that data and adding rows.

const DATA = [
  { id: 0, name: "John", email: "[e-mail]" },
  { id: 1, name: "Jane", email: "[e-mail]" },
  { id: 2, name: "Joe", email: "[e-mail]" }
];

export default function App() {
  const [name, SetName] = useState("");
  const [users, SetUsers] = useState(DATA);

  const handleChange = (event) => {
    SetName(event.target.value);
  };

  const handleSubmit = (event) => {
    const newUser = {
      id: users.length,
      name: name,
      email: `${name}@gmail.com`
    };
    SetUsers([...users, newUser]);
  };


  return (
    <div className="App">
      {users.map((user) => (
        <Row key={user.id} name={user.name} email={user.email} />
      ))}
      <input type="text" value={name} onChange={handleChange} />
      <button onClick={handleSubmit}> Push Here! </button>
    </div>
  );
}

Now, here is what my row.js folder looks like:

import React from "react";

function Row(props) {
  return (
    <h1>
      {props.name}, {props.email}
    </h1>
  );
}

export default Row;

All the user has to do is enter their name, and that would autogenerate a gmail account for the user. This is taken care of by the handleSubmit method above. After time was up, my instructor encouraged me to add on the ability to edit and delete users as well.

Next Steps:

After the interview, I reflected on what went well and what areas I could improve on! I believed I did very well in the behavior / meet-n-greet section of the interview and used my previous work experience to let my soft skills shine throughout the interview.

Areas were I could improve on would be just explaining/ discussing my code with other developers and what my thought process was during the technical part of the interview. My interviewer recommended that I solve the technical assessment in chunks. First, work on the process that I know how to do, (Ex: render the user's info on the page). Second, he interviewer recommended that I review typical React questions. Based on his experience, he came across several of the same interview questions. Here is a website that he recommend:(https://www.simplilearn.com/tutorials/reactjs-tutorial/reactjs-interview-questions).

Stay tuned for more!

Happy Coding!