Why learn JavaScript before React.js?

React is a JavaScript library and all of its code you write will be in JavaScript. It includes the HTML markup too which you have to write in JSX.

JSX enables you to write HTML and JavaScript together easily.

So, it's better know know some of the JavaScript concepts before proceeding to learn React.js.

I'll not be explaining about the basics of JavaScript in this tutorial, although I'll tell in brief from my experience that what are some concepts of JavaScript you should be aware about before hand.

.map() in JavaScript

The map() method goes through each element present in array, executes a function provided which transforms each value, and returns a new array with transformed values.

syntax

map((element) => { /* ... */ })
map((element, index) => { /* ... */ })
map((element, index, array) => { /* ... */ })

[I haven't used last one till now 😛]

usage

const array1 = [1, 2, 3, 4];

// .map requires a function, which can be anonymous/named/arrow function.

//  The function will add 10 to the element
const result = array1.map(item => item + 10);

console.log(result);
// OUTPUT: [11, 12, 13, 14]

It always returns the array with same number of elements.

.

.filter() in JavaScript

As the name suggests, the filter() method goes through each element present in array, and returns a new array by filtering out the elements which satisfies the condition function.

syntax

filter((element) => { /* ... */ } )
filter((element, index) => { /* ... */ } )
filter((element, index, array) => { /* ... */ } )

usage

function isEven(number) {
  return number % 2 === 0;
}

const array1 = [1, 2, 3, 4, 5, 6];

//I could have used arrow function instead, but I wanted to show you this way too.
const result = array1.filter(isEven);

console.log(result);
// OUTPUT: [2, 4, 6]

It returns the array with less or equal number of elements.

.

.reduce() in JavaScript

This method always scares me out, but it's quite interesting.

You can think of it as, it reduces an array to a single value.

syntax

reduce((previousValue, currentValue) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ }, initialValue)

usage

Let's say you have a list of numbers, and you want to multiply all of them. I know there are other ways it is possible, but let me show you how it can be achieved using .reduce() method.

const array1 = [1,2,3,4];

// If we don't provide initial value, it will consider the 1st element as initial value.
const result = array1.reduce((previous, current) => {
    return previous * current;
},1); // here '1' is initial value

console.log(result);
// OUTPUT: 24

This method will always return single value, or the error in case no elements are present in the array.

.

.find() & .findIndex() in JavaScript

As the name suggests, find() method finds an element in the array (it returns 'undefined' if not found).

findIndex() method returns the index of the element in the array (if not present, it will return -1).

syntax

find((element, index?, array?) => { /* ... */ } )
findIndex((element, index?, array?) => { /* ... */ } )

usage

const array1 = [1, 4, 3, 0, 2, 1, 5];

//Let's find out the element which is greater than '3'
const item = array1.find((item) => item > 3);
const index = array1.findIndex((item) => item > 3);

console.log("item=>", item, ", index=>", index);

.find() returns the first matched element, and .findIndex() returns the index of first matched element.

.

Ternary Operator

I know it may sound silly, but this is going to be used frequently in React.js.

syntax

condition ? exprIfTrue : exprIfFalse

I read it like, If condition is true then(?) run expIfTrue, else(:) run expIfFalse

usage

const canVote = (age) => {
  console.log(age >= 18 ? "yes" : "no");
};

canVote(16); // no
canVote(24); // yes

This operator will be used instead of if..else.. in JSX (As in JSX, you can not write if...else.. statements).

.

What Else?

There are few more topics, which are important to know before going towards React.js ( or you can just start, and learn on the go! ).

I'm listing few of them:

1. Fetch API & Error handling
2. Async/Await
3. Rest and Spread Operators
4. Promises

I'll be posting about these topics soon, stay tuned.