Introduction

Without a doubt, the REACT library is currently the most popular front-end framework and chances are that you are about to dive into it. One crucial thing to note is that the famed react is simply a javascript library therefore, you should at least know some basic javascript before you start.

Javascript - Being a very broad language would take a while to learn - and an even longer time to master. As a result of this, I have put together a list of core javascript features to get familiar with before entering into the world of react.

let and const

These are keywords used for creating variables. They were introduced in ES6 and are descendants of the buggy "var" keyword. Why is var buggy? This has to do with the way variables are scoped in javascript. Variables declared with var are function scoped, which means that they are only accessible within the function they were declared in. This is different from let and const, which are block scoped. This means that variables declared with let and const are accessible within the entire block they are declared in, including nested blocks. This is a major difference between the two keywords.

let is used for variable values that would change over time.

const, as the name implies, is used for creating a constant value.

Trying to reassign the value of a const throws an error.

Arrow functions.

An arrow function is a newer syntax for writing javascript functions. It is a shorter way of writing functions and is especially useful when writing callbacks. Arrow functions are anonymous functions that have a shorter syntax and are easier to read.

The arrow function is leaner than the normal function solves the issues associated with the javascript "this" keyword. When "this" is used inside of an arrow function, it always keeps its context. This is because arrow functions do not have their own "this" keyword. Instead, they inherit the "this" from the surrounding context.

Modules (import and export)

Simply put, modular javascript is javascript code split over multiple files. The idea is that inside of a javascript file, we can import content from another javascript file which acts sort of like a dependency. Modularized javascript files can range from size/ length from a single function to an entire authentication logic. Modularization aims to keep files simple and straight to the point by restricting files to a feature or group of closely related features.

Implementing modules comes in 2 parts:

• The Import statement
• The export statement

The import statement is used to import the previously exported javascript file into this new file. Take, for example, we require the printName function in this new file. Instead of writing out the function again, we can simply import it. The usefulness is more apparent in more extensive functions.

Instead of the whole file, parts of the files can be exported instead. In this case, we do not use the "default" keyword but instead, export the functions using their names.

Note: when using the 'default' keyword in your exports, the imports statement can be renamed to any variable of your choice. In the second example, notice that we import two different content from the same file. The added syntax is used to target specific things inside of the file. They are called Named imports.

Spread and Rest operators

The syntax for this operator is "...". Three dots. That is the syntax. Depending on where it is being used, that syntax would either spread or rest.

Here, we have an old array named numbers. In newNumbers, we want to add all the elements of the numbers array plus some newer elements. The "...numbers" pull out all the elements from the numbers array and add them to the newNumbers array. We can then add new elements to the newNumbers array as we normally would.

Here, the operator is used to merge a list of functional arguments into an array. So in this example, the filter function can potentially receive an unlimited amount of arguments. All of these arguments are stored in a single array, therefore array methods can be performed on them.

Destructuring

Destructuring allows us to easily extract array elements or object properties and store them in variables. This is different from the spread operator which takes out all elements/properties and copies them to a new array/object. Destructuring is done on the left side of the declaration.

I hoped this helped. I have deliberately left out Javascript classes in this article because if you're just starting in React, your focus should be on functional and NOT class-based components. Classes-based components are still useful when creating and setting Error boundaries but that is not something a beginner should be concerned with.