JavaScript before diving into ReactJs

Recently React has been one of the most commonly used JavaScript frameworks for building SPA Single Page Applications. Also, there is a myth among JavaScript developers on How much is more or How much is enough of concepts one should know before diving into ReactJs Framework to start building projects.

Some of the most commonly used concepts of JavaScript in ReactJs are enough to begin the journey as a ReactJs Developer. If you are completely new to the programming world never mind, you too can dive into the JavaScript concepts that I shall cover here. I hope by now you are pumped up to jump into concepts.

So, Let's begin 👇

1. Basics of JavaScript

All the concepts of JavaScript are important.
Do not be scared is give up here, it's just the beginning

To Read more click 👉
1. JavaScript
2. JavaScript Baics
3. EloquentJS PDF

All the basics like Values, Numbers, Strings, Unary Operators, Boolean Values, Empty Values, and type conversion.

2. Arrow function

Arrow functions were introduced in ES6, which shortened the arrow function syntax.
It provides an alternate way to write a function.

let sum = function (a,b) {
    return a + b;
}
console.log(sum(2,4));
// Output as
// 6

We can write the same function also in other ways.

let sum = (a,b) => a + b;
console.log(sum(2,4));
//output as
// 6

Let me tell you the main difference between the above two different codes is that
if there is a block {} then we need to specify the return keyword, whereas in the arrow function if there is only a single statement then we don't need the block symbol. Which is widely preferred among experienced developers. So, I expect everyone to start using the arrow function in their small projects as well.

3. Array Methods

I recently shared an article on Array Method you can check it out
Array Methods

Arrays are generally described as "list-like objects"; they are basically single objects that contain multiple values stored in a list. Array objects can be stored in variables and dealt with in much the same way as any other type of value, the difference being that we can access each value inside the list individually, and do super useful and efficient things with the list, like loop through it and do the same thing to every value. Maybe we've got a series of product items and their prices stored in an array, and we want to loop through them all and print them out on an invoice, while totaling all the prices together and printing out the total price at the bottom.
-- MDN Web Docs

4. Ternary Operator

Ternary Operator is one type of conditional operator just like the other conditional operators like if else. This is the only operator that takes three operands.

Syntax :

condition ? expression1 : expression2

function getVal(isTrue) {
// Ternary condition is applied.
    return (isTrue ? `500` : `300`);
}
console.log(getVal(true));
// output : 500

Parameters
condition
An expression that evaluates to true or false.

expression1, expression2
if the condition is true, then the first expression1 is executed else the second expression2 is executed.

function getVal(isTrue) {
// Ternary condition is applied.
    return (isTrue ? `500` : `300`);
}
console.log(getVal(false));
// output : 300

5. Spread Operator

It is used to spread all the values present in the array, or block or passed as multiple values into a single argument and is denoted with three dots (...name) , name holds all the value and pass it into the function as parameter. From the parameter only the individual values are taken in as separate values for each values spreaded.

function add(a,b,c) {
    return a + b + c;
}
let nums = [9,7,4];
console.log(add(...nums));
// output expected : 20

Spread operators comes into play into 3 different places.

• Function arguments

• Array literals

• Object literals

Explore more on the use cases of these three given above.

Beside these concepts there are also other JavaScript basics concepts but you can get started with this much of knowledge. But this should not be enough for you to stop exploring more JavaScript. I hope you take my words and start your journey with ReactJs and learn other JavaScript concepts side by side.

I hope you like this articles and was valuable of your time spent here.
Please drop 💖 and like the content. So, that it motivates me to write such contents for the new bies/bees.

Thank You!