Introduction

Most times developers feel they need to know all of JavaScript or they contemplate how much of JavaScript they need to know before learning React . There are some key concepts of JavaScript that you need to understand before before learning react that will make it easier and faster for you build smooth running applications.

Prerequisite

• HTML

• CSS

• JavaScript

What Is React ?

React is a JavaScript library used building for user interfaces, React helps us write code in simpler and shorter forms which performs same function as that of JavaScript. Understanding JavaScript concepts enables work with the react library efficiently. There are some key concepts you must learn in JavaScript often reoccur in react but in advance. These concepts are :

Concepts To Understand

• Functions ( regular and arrow functions)

• DOM

• Objects

• Loops

• Map Method

• Short Circuiting

• Spread operators

• Ternary Operators

• Module system

• Fetch API

Function

Function is a piece of reusable code that can be called multiple times. We have 2 ways of creating a function which are Regular functions and the arrow functions

//Regular function 
function addValues(a,b){
  return a + b;
}
// Arrow function
const addValues = (a,b) => {
  return a + b;
}

Above is a regular JavaScript function and an Arrow function display, for the regular function we use the keyword function while we use const to create arrow function . We use the arrow function often in react because they allow you write shorter function syntax. This simply means, it helps us write less code with same functionality. For example,

// You can omit the return keyword using arrow functions 
const addValues = (a,b) => a + b;

We write our function like the example illustrated above if the function is carrying out an operation that can be done on a single line.

DOM (Document Object Model)

This is can be described as a representation of your webpage that JavaScript can interact with. It is like a tree leg structure that is written which makes use of Nodes and each node correspond to a part of the page. The nodes basically correspond to an individual HTML type. Note, every HTML tag is and an object and every tag nest in it is a child and every object in the DOM can be accessed . JavaScript is used for manipulating and styling the DOM . JavaScript is used to add interactivity to your website by manipulating the DOM.

//TO make the background blue
document.body.style.background = 'blue';

Understanding the DOM is essential because in React it creates a virtual representation of the DOM called the Virtual Dom, which is used to determine the most efficient way of making those changes on the actual DOM. In React you make use Gsx as a replacement for HTML. Gsx is a mixture of HTML and actual JavaScript, here you put JavaScript directly inside of your HTML. This

Objects and Object Destructuring

Objects consist of key value pairs where each key is a unique identifier and which its value can be of any data type also including an object. When operating and object we use Dot notation

const user = {
// key values
 name : "John",
 age  : 25,
}
// Dot notation
const username = user.name;
// Destructuring 
const {name,age} = user;

Destructuring is often used in react and they also applied when working with arrays.

Loops

These are instructions given that repeats until a specific condition is reached. Loops are of different types which are for loops, while loops and do while loops respectively.

// For loops
for (i = 0; i < 10 ; i++ ) { };
// While loops
let i = 0;
while(i < 10){i++};
// Do while loop
let i = 0;
do{ i++; } while (i < 10);

The loops run until the condition is false but in the Do while loop the loop runs even though the condition is false.

Map Method

It is an array method that is used to create a new array by applying a function to an element in an existing array.

Map method is described as an array method that is used to create a new array by applying a function to an element in a existing array.

let arr = [2, 3, 4, 5];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [6, 9, 12, 15]

From the above illustration above, we used arr.map() method in place of a loop to multiply through the array by iterating over the array with callback function. You can map() method to iterate over an array and join the values.

Spread Operators

Spread operators syntax is used for spreading arrays or objects into another array or object. It is used in copying, merging objects and creating memories in objects.

const myVehicle = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
}

const updateMyVehicle = {
  type: 'car',
  year: 2021, 
  color: 'yellow'
}

const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}

Ternary Operators

This is a unique way of writing if else statement but it is an expression . The difference between an expression and statement is that the expression returns a value while statemen don't return any value.

user == true ? say Hi() : logout;

From the above illustration can see the ternary operator is separated into 3 different parts. The first part which returns a Boolean value ( true or false ) and second part starts after the question mark ( ? ) and will run only the part returns a true value while the third part which start after the column ( : ) will run if the first part returns a false .

Short Circuiting

it is used with logical And operators (&&) and logical Or operators ( || ). For the logical And (&&) if the left returns true the right side will run and if left side returns false it the right side won`t run .

// Operator A
const a = 3;
const b = -2;

console.log(a > 0 && b > 0);
// Operator B
const a = 3;
const b = 2;
console.log(a > 0 && b > 0);
//Operator C
const a = -3;
const b = 2;

console.log(a > 0 && b > 0);

Above we have three different operators ABC respectively. Operator A will run and give an output of false because the right side isn't true and in logical And (&&) operators both sides of the operator should return a true value for it to be true. Where as, Operator B will return a true value because both sides of the operator returns a true value while Operator will not run because the left side isn't true.

Logical Or Operators ( || ) here if the left side return a true value the right side would not run but the right side will only run if the left side returns a false value .

const a = 3;
const b = -2;

console.log(a > 0 || b > 0)

Above is an example of logical Or operator and it gives a true value when been run.

Module System

JavaScript modules allows you to organize your code into separate files and reusable components, functions and variables across your application. They are two types of module system in JavaScript which are Common JS and ESM6. Below is an example on how to set

module ;

<script type="module">
import message from "./message.js";
</script>

Fetch API

A set of rules and protocols that allows different software applications to communicate with each other. To fetch data, it is a built-in JS API that return a Promise ( a placeholder for a future value). It will either succeed or fail, if it fails then you can grab it with the .catch ( )method .

fetch('https://api.illustration.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Conclusion

The concepts we discussed above is essential and to fundamental JavaScript. Knowledge and the application of concepts of JavaScript gives developers solid foundation, help makes it easier for developers to build smooth running application writing less code.