6 Most Popular Front-End Interview Questions and Answers for Beginners [PART 2]

Intro to Front-end interview questions for beginners PART 2

Today we’ll talk about the react interview questions for beginners.

Welcome to the next part of the front-end questions series.

All of the episodes in our series are related to the most popular things that developers ask about the technology, which are often used in the job tech-interviews.

In the previous episode, we talked about Javascript more general, and you can find the URL to that episode here:

Javascript Interview Questions PART 1

Today, we can focus on the most popular questions related to React.js.

I’ve selected the entrance-level questions that should be asked for the very beginners mostly.

Maybe some of these questions could be asked on the higher-level positions, and sometimes I’ve met some of them, but in general, most of the experienced developers probably know that perfectly, so that article should give the biggest value for beginners.

Let’s start!

What is react router

Most of the applications built with React.js are SPA (single page application), but it doesn’t mean your app will have only one view.

It means your app doesn’t need to reload to another view, but how can we change views and go into the next page?

We can use a react router for that!

React router is the official and standard routing package that we use in React.js to change views, and move between pages.

With the React router, we can specify the whole routing for our modules that will decide what view should be visible when we enter the specified URL but not only.

React router gives us the possibility to create protected views like, for example, the view that we need to be logged in or have any special requirements to visit.

One more useful feature of the React Router is the routing history, that can keep all of the history of our views, and come back to the specified step when needed.

I couldn’t forget to tell about handling the URL params like, for example, the id of element, to render the route that can show specified elements, and give you access to that param.

We can use routing navigation in a few ways. The most popular is to type URL, visit URL by a link inside the menu, or add data to the routing history.

On the example below, you can simple routing:

<Switch>
  <Route path="/about">
    <About />
  </Route>
  <Route path="/contact/:id">
    <Contact />
  </Route>
  <Route path="/contact">
    <AllContacts />
  </Route>
  <Route path="/">
    <Home />
  </Route>
</Switch>

How to write if statement in react js

Of course, if we think about if statement in Javascript or Typescript logic, it’s the same as in every Javascript or Typescript place.

It’s just if/else like pure javascript, but in this case, we won’t talk about the normal if/else.

In react, we’ll need if statements for the one more thing, it’s the rendering.

It’s named “Conditional rendering”, but to make it simple, let’s stay with “if statement in react”.

There are the two most popular ways to use conditional rendering that we’ll see in the React.js code, and depends on a case, both of them are correct.

The first way that we can use is to define the conditional rendering directly in the components layout.

It’s quick and easy that we’ll use the most, and in some cases, it is the best for performance.

We’ll be using this way in the cases when we have only one condition, more just as “if”, when we would like to render some element when a specified condition is passed.

The second way is the function created to handle specified parts of the layout, and render it conditionally, to do that we can use not only if/else but the switch case as well.

This one way is right to use in cases where we have more conditions, especially the version with switch one.

But it fires the function anyway, so it is no sense to use it when we have one condition.

Let’s take a look at the code examples where I added both ways of doing that:

// The first example with the code inside functional component
function Parent(props) {
  return(
    <>
      {name === "Duomly" && (
        <DuomlyComponent/>
      )}
    </>
  )
}

// The second example with the additional function
function renderComponent() {
  const name = 'Duomly';
  if (name === 'Duomly') {
    return 'Duomly';
  } else {
    return null;
  }
}

function Parent(props) {
  return renderComponent();
}

How to use loop in react js

Like the if/else statements, when we would like to do loops in the JavaScript or TypeScript logic, we do not need to bother about any special rules.

It’s just a JS loop, as always, and we can use all types of loops (of course, not all of them are good for all cases, but it’s possible).

Anyway, we have a special reason why we should focus on the iteration methods when we develop apps for React.js.

We use iteration methods to render elements. For example, we can use iteration to render the whole list of products from the product array.

To do that, we can use few methods, one of the most popular is the map method, but we will cover the map in the separate section, and now we should focus on the other methods like loops or forEach method.

It is very popular to use loops like for-loop (in most cases the fastest one), for-in, or for-of to iterate through elements.

That method is useful when we use separate functions to render part of components, and it’s the best method for performance.

The second method that I’ve included in the example is the method with array.forEach().

This method, compared to the for-loops and map method, is the slowest one and doesn’t return the values like a map, so you need to have a special case to use it.

Let’s take a look at the code example with two for-loop and forEach methods:

// First one with For of loop
function renderComponent() {
  const products = ['orange', 'apple', 'watermelon'];

  const list = []

  for (const [i, product] of products.entries()) {
    list.push(<li>{product}</li>)
  }

  return (
    <div>
      {list}
    </div>
  )
}

function Parent(props) {
  return renderProducts();
}

// Second with forEach method
function renderComponent() {
  const products = ['orange', 'apple', 'watermelon'];

  const list = []

  products.forEach((product) => {
    list.push(<li>{product}</li>)
  })

  return (
    <div>
      {list}
    </div>
  )
}

function Parent(props) {
  return renderProducts();
}

How to use map method in react js

In the previous step of the React.js interview questions, we talked about iteration methods where we have put some lights on the for-loop and forEach methods.

We can now focus on the most popular method that we use to render the same elements from the lists, the map method.

Even if the map method is not the fastest, it is very popular, and you can see that method in most projects.

If you’re performance-oriented, don’t worry, it still is faster than forEach.

And has one more exciting feature when we compare that method to forEach, map method returns array when forEach returns an undefined value.

I’d say the map method is straightforward to use as well. Anyway, many tutorials recommend using the “index” value as the unique key of your element.

To care about performance, we shouldn’t do it, and we should use randomly generated id instead of the index one. Otherwise, our virtual DOM will re-render.

To see how to create a few same elements from the list, you can look at the code example:

function Welcome(props) {
  const products = ['orange', 'apple', 'watermelon'];
  return products.map(product=><li>{product}</li>)
}

How to import CSS in react js component

Now I’ll show you how to import CSS in react.js components, by the two most easy, and kinda popular ways.

When we build apps in React.js in some cases, we can use CSS-frameworks like bootstrap, Bulma, or something popular now.

Next, we can build a layout like puzzles and focus only on things like Javascript or Typescript logic.

But sometimes, we need to create our own styling even I’d say that can happen kind of often, and how can we solve that?

There are a few methods of including CSS into the React.js components, some of them are more complicated, some less, but all of them have pros and cons.

Anyway, today I’ll show you one of them, the easiest one, and the quickest to implement.

I like to use that method, especially in the bigger projects, when we need to have all the styles sorted and put into the separate folders.

We can import the sass file into our files by using a relative import path.

With that method, we can create a directory “styles” inside our project directory, sort all of the style files by feature, function or how we want, and import the file into our component directly.

It helps us sort all the helpers, variables, and necessary style up to files, where it’s needed, but still can be kept in one place.

import './styles.scss';

How to set default route in react js

Some time ago, we had an opportunity to use the component named “DefaultRoute” in the react routing.

Now, its depreciated method, and it’s not so popular to use it, you can create the custom route named default or whatever, but still, it’s not how we do it in modern React.js development.

It’s just because using the “DefaultRoute” route, we can cause some rendering problems, and its the thing that we definitely would like to avoid.

But don’t worry!

We have a solution to that problem, and I’d say its much more comfortable, but what more important, its a good practice.

To handle the default routing now, we can use two methods, one of them will be “*”, like routing, and the second one is “/”, that will redirect us to the defined component on the “default” path.

I’d recommend going with the “/” and set up the 404 component for the non-found pages instead of auto-redirect to the “default”.

Let’s see on the code example how it can be created.

<Switch>
  <Route path="/about">
    <About />
  </Route>
  <Route path="/contact/:id">
    <Contact />
  </Route>
  <Route path="/contact">
    <AllContacts />
  </Route>
  {/* The default route */}
  <Route path="/">
    <Home />
  </Route>
</Switch>

Conclusion of React js interview questions for beginners PART 1

Congratulations, now you’ve learned the most popular React js interview questions for beginners!

Today, we talked about very basics, like some routing, how to set up a better alternative for the default route, or how to iterate through the lists.

You’ve learned how to set up conditional rendering as well.

If you’re new here, don’t forget to check the PART 1 of the Front-end interview questions, that you can find here:

Front-end interview questions PART 1

There you can find the most popular questions for beginners, related to the Javascript.

And, here you can find the questions about Back-end:

Back-end interview questions PART 1

There you can find the most popular questions related to the general backend.

Remember that always practicing is the most important part and it can teach you a lot more. Here are our methods on how to practice Javascript

Thanks for reading,
Radek from Duomly

Twitter LinkedIn Pinterest