4 JavaScripts concepts to know before getting started with React
By: Uzoamaka Anyanwu
Tags: React, JavaScript, Programming, Getting Started, Javascript Tips

React is a component-based JavaScript library that is used to build user interfaces. Asides from a somewhat different syntax, React is still very much JavaScript and sometimes a lot of frontend developers jump right to using frontend libraries and frameworks with little to no understanding of JavaScript. Now, that might not be a bad way to start out, as some developers, myself included, followed a similar path, but then, the probability of coming across a good number of unfamiliar JavaScript concepts and getting confused on the spot would be higher than someone who started out learning JavaScript first.

So let’s list ous some of the concepts that you are going to come across when using React:

1) Object destructuring assignment

This is a concept that makes it possible for the properties of an object to be extracted from its parent object, which can then be assigned to a variable if needed. This is something that we are going to use a lot in React especially when dealing with passing data as props. Let’s look at this example of this object destructuring below:

2) Array.map() method

This method follows the concept of higher-order functions which is a function that takes in another function to do something with it. The .map() function creates a new array from the original array by looping through every element in the array and performing a specified operation on each element before it returns the result to the new array. This is done in order to avoid mutating the original array. Let’s look at an example of using a .map() method:

This is an important concept to know because in React, we are going to be mapping over data that we receive whether directly, as props or from an API.

3) Spread Syntax (…)

Also called a spread operator, this is a way of preventing mutation on the original array by “spreading” or extending all the elements of the original array into the new array. New elements can also be added to the new array alongside the elements of the original array. This way the original array stays the same and the new array has all the contents of the original array. Below is a snippet that shows how this works:

4) Classes

Classes came with ES6 as an easier way of creating objects. React has two ways of creating components which are Functional components and Class components. If you prefer creating components using Class components, then you will need to know how classes work.

A class is a type of function, that is declared with the “class” keyword and it has all its properties are created inside a constructor method, which is then extended to new objects created from this class object. The constructor method acts as a blueprint for an object. The objects we create from this class get to inherit all the properties of the class itself. Below is a snippet that shows an explanation of this:

These are all for now, but there are also a ton of JavaScript concepts that you can get started on to help you make sense of the various things that you are going to come across when trying to use the React library.

You can read further about these topics from sites like W3Schools, MDN, DigitalOcean, and FreeCodeCamp