Many beginners don’t realize that React is JavaScript library. It’s not a different language, and syntax differences are only cosmetic, so it’s easier to write web apps with React. Under the hood, all of the code is actually JavaScript.
That is why you need at least a basic knowledge of JavaScript to get started with React. I personally think React makes much more sense when you understand JavaScript on a deeper level, but that’s neither here nor there. If you are looking for the bare minimum of JavaScript you need to know, you’ve come to the right place.
Fundamental JavaScript concepts like variables and different types of values are obviously needed, so I won’t even mention them. Instead, I will talk about often misunderstood JavaScript features that are particularly important when developing apps with React.
JavaScript functions and ES6
Component reusability is a foundational concept in React. In this library, components can be of two types – functions and classes. Since the introduction of hooks, functions became the preferred way to write components in React. They have an easier syntax and also they are easier to read. Therefore you absolutely need to understand function declarations, and specifically how arrow functions work in React.
Event handlers, as usual, are also functions, so that’s another reason you need to know JavaScript functions really well.
One important thing about functional components is that they return JSX code. Normally, functions in JavaScript must return a valid value, so why do they return something that looks like HTML?
See, JSX is a template language for React. It may look like HTML, but that’s only to simplify building layouts with React. In reality, JSX is translated to calls to React’s top level API, like React.createElement(). Therefore it is 100% JavaScript. This fact gives React developers the freedom to embed dynamic expressions inside their JSX code and thus build interactive apps with React.
It’s also important to note that the names for functional components are usually capitalized. This is to distinguish components from normal elements, which look and work identical to their counterparts in HTML. For example, you can invoke the same <h1>, <p>, and other elements in React like you do in HTML.
But don’t get confused – both normal elements and custom components are actually JavaScript. Many libraries even provide custom components that allow you to declaratively perform features like redirect users to another page on button click.
Arrow functions are even shorter and have easier syntax. They are often used to define simple presentational components. Knowing the syntax to write arrow functions can be an important instrument for your growth in React.
Template literals
This relatively new JavaScript feature can be very useful in React. Instead of writing static strings, template literals allow you to create dynamic strings. Or at least strings with dynamic parts. This can be invaluable for setting conditional className values, conditional styles, and much more. You can also use template literals as a readable way to push separate strings together.
Template literals are marked by back ticks. If you want to combine a static and dynamic strong, or two dynamic strings, you can simply put them inside template literals. You do need to precede dynamic parts with a dollar sign ($) and curly braces. So a dynamic className value would look something like this:
<div className=`black ${border}`></div>
In this example, the ‘black’ string value will be always applied. The ‘border’ className is interpreted dynamically. Whatever the value of border variable is, it will take place of the variable. Note that you need dollar and curly braces to include this variable.
You can put anything between curly braces. It doesn’t have to be a variable. You can also put ternary operator to conditionally determine the className value.
React is main library for building interactive user interfaces, and template literals are one of the best features to implement dynamic features. This guide goes into great detail on doing string interpolation in React.
Logical operators
Once again, we use React for its dynamic features. Features like dynamic rendering and conditional styles require dynamic JavaScript features. Considering that JSX does not allow you to embed if/else or switch or any other JavaScript statements that require multiple lines of code, simple solutions like && logical operator or || logical operator come in handy. Like ternary operators, you can use them to do simple conditional rendering or any other dynamic feature.
Behavior of logical operators is quite confusing and difficult to understand. Make sure to carefully study how && logical operator works. Same for || logical operator.
AND logical connector checks if the first expression is true. If it is, then the logical operator proceeds to run the second expression. This could be useful if you want to invoke a component only if X condition is true.
These operators help keep your JavaScript and JSX code easy to follow.
JavaScript methods
JSX allows you to embed dynamic expressions into your component. However, you can not use multi-line statements like if or else. You can technically do these things outside of JSX, and then embed variable inside your JSX. But much more commonly you use JavaScript methods like map() and filter() to create elements and components based on data.
In practice, this is very useful as you will often receive data from API structured as an array of objects. map() takes values from each objects and transforms them into elements and components.
You will use these methods all the time. I recommend you practice all the time and if you get stuck, read React guides with examples.
Destructuring and Spread Operator
Essential features in React use destructuring. For example, the useState hook returns two values. You will need to destructure them to store the state variable and updater function in two different variables. Similarly, you can use spread operator when dealing with props, another essential feature in React.