As you likely already know, React is a library to create UI components that can be used as the basis of web and mobile applications. What distinguishes React from some of its competitors is that its code is written entirely with JavaScript. Even the HTML-like templates are written in JS using JSX, which is an extension of the JS language to structure UI components.

The goal of this article is to help aspiring React developers get started by highlighting the JavaScript they ought to master before really diving into React. A complete introduction to JavaScript would go beyond the scope of this article, but React builds on the use of modern JavaScript features that were mainly introduced with ES2015.

Below, I give an overview of the common JavaScript patterns and language features that are heavily used in virtually every React application. For each concept, I provide external links. If you are interested, you can learn more about using it in React context.

Conditional logic with if statements, the ternary operator, and logical operators

These operators have been part of JavaScript for a very long time. In React, they are especially useful for conditional rendering of components.

The ternary operator looks like this:

const buttonLabel = playback === "stop" ? "play ▶️" : "stop ⏹️";

If the variable playback has the value stop, then the operator assigns to buttonLabel the string value play ▶️ and, in all other cases, the string value stop ⏹️. It is basically the same as the following code:

let buttonLabel;
if (playback === "stop") {
  buttonLabel = "play ▶️";
}
else {
  buttonLabel = "stop ⏹️"
}

Of course, you can use such an if...else statement, but the ternary operator is often the instrument of choice if you need to use a single line expression for conditionally rendering elements inline.

Otherwise, you have to call a function where you put your code for conditional rendering. In React, you can also use more complex condition logic (e.g., an if...else cascade) and store values in variables that can be used for conditional rendering in JSX code.

Logical operators && or || are very handy for building React components.

const isLoggedIn = true;
const userComponent = isLoggedIn && getUserComponent();

In our example, the left operand (isLoggedIn) of the && operator evaluates to true. Therefore, the result of the right operand (the function call getUserComponent()) gets assigned to the userComponent variable.

This concept is also very useful for conditional rendering in React because true && jsxComponent returns jsxComponent, and false && jsxComponent returns false. If you return false, React ignores it and simply renders nothing.

It is also possible to combine multiple conditions. In the next example, the result of getOtherUsersComponent() is returned when both conditions are met.

const otherUsers = isLoggedIn && users?.length > 0 && getOtherUsersComponent();

Notice the ? in the second operand users?.length > 0. This is optional chaining, which is not uncommon in React projects.

If you return null, React doesn’t render anything. In contrast to undefined, null represents the intentional absence of any value.

if (shouldRenderComponent()) {
  return getComponent();
}
else {
  return null;
}

#reactjs #es6 #react #javascript