6 Essential JavaScript Concepts for React Beginners

As the most popular front-end library, everyone wants to learn React. ReactJS is basically JavaScript. But that doesn’t mean you have to learn all of JavaScript to migrate to ReactJS. Understanding basic JavaScript concepts will make it easier to understand React concepts and ultimately improve your ability to work on projects.

Before migrating to ReactJS, let’s outline some important JavaScript concepts to know.

1. Arrow function

Arrow functions are used extensively in React. As of version 16.8, React has moved from class-based components to functional ones. Arrow functions let you create functions with shorter syntax.

Let’s illustrate it with the following example.

Normal function

 function greeting() {
    return 'hello'
}
console.log(greeting())  

Arrow function

 let greeting = () => 'hello' 
console.log(greeting())  

The above two functions have the same output, but different syntax. Arrow functions are shorter and cleaner looking than regular functions. React components typically have the following structure:

 import React from 'react'
const Book = () => {
    return (
        <div>Book</div>
   )
}
export default Book 

Arrow functions do not have names. If you want to give it a name, assign it to a variable. Syntax is not the only difference from regular arrow functions. Learn more about arrow functions in the Mozilla developer documentation.

2. Destruction

Decomposition is used to retrieve data from complex data structures. In JavaScript you can store many values ​​in arrays and objects. You can manipulate the values ​​and use them in different parts of your application.

To get these values, we need to deconstruct the variables. You can use dot (.) notation or bracket notation, depending on the data structure you are working with. for example:

 const student = {
   'name': 'Mary',
   'address': 'South Park, Bethlehem',
   'age': 15
} 

destruction:

 console.log(student.name)  

In the example above, the dot notation accesses the value of the key “name”. ReactJS uses the concept of destruction to get and share values ​​across your application. Destructuring avoids repetition and makes your code easier to read.

3. Array method

While working on a React project, we come across arrays several times. An array is a collection of data. The data is stored in an array so it can be reused as needed.

Array methods are primarily used for manipulating, retrieving, and displaying data. Some commonly used array methods are: map(), filter()and reduce()You should be familiar with array methods to understand when to apply each array method.

for example, map() The method iterates over all the items in the array. Creates a new array, operating on each element of the array.

 const numbers = [9, 16, 25, 36];
const squaredArr = numbers.map(Math.sqrt)  

ReactJS makes heavy use of array methods. Use them to convert arrays to strings, join them, add items, and remove items from other arrays.

4. Short conditionals

Conditional statements are statements that JavaScript uses to make decisions in your code. Short conditions include && (and), II (or), and the ternary operator. These are short expressions for conditions and if/else statements.

The following example shows how to use the ternary operator.

Code with if/else statements:

 function openingTime(day) {
    if (day == SUNDAY) {
        return 12;
    } 
       else {
        return 9;
    }
} 

Code with ternary operator:

 function openingTime(day) {
    return day == SUNDAY ? 12 : 9;
} 

Learn about different types of conditions, with a special focus on short conditions. They are used extensively in React.

5. Template Literals

Template literals use backticks (“) to define strings. Template literals let you manipulate string data and make it more dynamic. Template literals with tags let you perform operations within strings. These are short expressions for conditions and if/else statements.

for example:

 let firstName = "Jane";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;  

6. Spread operator

The Spread operator (…) copies the values ​​of an object or array to another object. Its syntax consists of three dots followed by the name of the variable. For example, (…name). Merge the properties of two arrays or objects.

The following example shows how to use the spread operator to copy the value of one variable to another.

 const names = ['Mary', 'Jane']; 
const groupMembers = ['Fred', ...names, 'Angela'];  

You can use the spread operator to perform various operations. These include copying the contents of an array, inserting an array into another array, accessing nested arrays, and passing arrays as arguments. You can use the spread operator in ReactJS to handle component state changes.

Why Learn ReactJS

ReactJS is popular for good reason. It has a short learning curve, is reliable, and renders quickly to the DOM. It supports standalone components and has great debugging tools.

ReactJS incorporates new JavaScript concepts from ECMAScript 6 (ES6). Learning basic JavaScript concepts will make developing projects in ReactJS easier.

Additionally, ReactJS has a great community that releases new updates all the time. If you want to learn JavaScript library, ReactJS is your best choice. The Next.js framework complements ReactJS limitations. The combination of the two makes ReactJS a powerful front-end library.