You don’t need to be a JavaScript expert to start your ReactJS journey, but just as knowledge of ingredients is a must for any chef hoping to master cooking, the same is true for learning ReactJS. It’s a modern JavaScript UI library, so you need to know some essential JavaScript for react.

Necessary JavaScript Concepts For React:

• Functions and Arrow Functions.
• Objects.
• Arrays and array methods.
• Destructuring.
• Template literals.
• Ternary Operators.
• ES Modules and Import/Export Syntax.

Functions and Arrow Functions:

In JavaScript, there are two types of functions. You have normal functions and arrow functions.Let’s explore the difference between them.

Arrow functions was introduced in ES6. And it introduced a simple and shorter way to create functions.Here’s how to create a normal function, with arguments, which returns something:

function multiply(num1, num2) {
  const result = num1 * num2
  return result
}

If want to transform this into an arrow function:

const multiply = (num1, num2) => {
  const result = num1 * num2
  return result
}

If the return statement is the only statement in the function, you can even have a shorter function expression. For example:

const multiply = (num1, num2) => {
  return num1 * num2
}

This function only contains the return statement. With arrow functions, we can have something shorter like this:

const multiply = (num1, num2) => num1 * num2

We skip the curly braces and the return keyword. Shorter; one-liner.

Also read: Building Microservices with Node JS

JavaScript Objects:

In JavaScript, an object is an unordered collection of key-value pairs. Each key-value pair is called a property.

The key of a property can be a string. And the value of a property can be any value, e.g., a string, a number, an array, and even a function.

JavaScript provides you with many ways to create an object. The most commonly used one is to use the object literal notation.

The following example creates an empty object using the object literal notation:

let empty = {};

To create an object with properties, you use the key:value within the curly braces. For example, the following creates a new person object:

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

The person object has two properties firstName and lastName with the corresponding values ‘John’ and ‘Doe’. When an object has multiple properties, you use a comma (,) to separate them like the above example.

JavaScript Arrays and Array Methods:

An array is a special variable, which can hold more than one value.

const cars = [“Volvo”, “BMW”, “Honda”];

You can able to create an array using an array literal.

const array_name = [item1, item2, . . .];

You can also create an array using the JavaScript keyword new

const cars = new Array(“Volvo”, “BMW”, “Honda”);

An array is a data structure that contains list of elements which store multiple values in a single variable. The strength of JavaScript arrays lies in the array methods. Array methods are functions built-in to JavaScript that we can apply to our arrays – Each method has a unique function that performs a change or calculation to our array and saves us from writing common functions from scratch.

Destructuring:

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. Example for simple Destructuring,

const vehicles = ['mustang', 'f-150', 'expedition'];
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];

Template Literals:

Template literals are literals delimited with backtick ( ` ) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.

const name = 'Jack';
console.log(`Hello ${name}!`); // Hello Jack!

Ternary Operators:

The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark ( ? ), then an expression to execute if the condition is truthy followed by a colon ( : ), and finally the expression to execute if the condition is false.

The ternary operator can be a good replacement for if statements in some cases. It allows you to write concise, cleaner, and easier-to-read lines of code if used well.

let age = 18;
let message;

if (age >= 16) {
  message = 'You can drive.';
} else {
  message = 'You cannot drive.';
}

console.log(message);

let age = 18;
let message;

message = age >= 16 ? 'You can drive.' : 'You cannot drive.';

console.log(message);

ES Modules and Import/Export Syntax:

With ES2015 (ES6), with get built-in support for modules in JavaScript. Like with CommonJS, each file is its own module. To make objects, functions, classes or variables available to the outside world it’s as simple as exporting them and then importing them where needed in other files.

Exporting:

You can export members one by one. What’s not exported won’t be available directly outside the module.

export const myNumbers = [1, 2, 3, 4];
const animals = ['Panda', 'Bear', 'Eagle']; // Not available directly outside the module

export function myLogger() {
  console.log(myNumbers, animals);
}

export class Alligator {
   constructor() {
     // ...
   }
}

Importing:

Importing is also very straightforward, with the import keyword, members to be imported in curly brackets and then the location of the module relative to the current file.

import { myLogger, Alligator } from 'app.js';

So far all the important concepts are covered and these are the necessary JavaScript things to learn react.