➜Things to know about javascript before starting ReactJS

There are few things to know about javascript before starting ReactJS. As we know doing a web development HTML and CSS are the two most important key factors. One should know basic of HTML and CSS before hitting ReactJS. Apart from HTML and CSS, in this article, I will tell you how much and what concepts of javascript you should learn first.

React JS is a library of JavaScript, So instead of shaking React JS, you should know at least some features of JavaScript. In this article, I will write mostly and frequently needed features of Javascript for React JS.

So without any further ado, let’s start. Let’s create a quick list with short descriptions of all you should practice if you are about to learn React JS.

1. Events

If you have ever written JS or Jquery, I am sure you have worked with the event. Most common events are click, change, submit, etc.. In React JS you will use these events more frequently. So I will suggest, you should learn more about events in Javascript first.

2. (regular and arrow) functions

Functions are one of the key features you will use quite frequently in React JS. So whenever you create an Event, most probably you will write a function for that event. In that function, you will write what should be done when this event triggers. Now we also write an arrow function on events which has its own advantages. So you should learn these two types of functions. Let’s see how these two look different by a simple example.

//Regular Function
function sayHello(){
  console.log('hello');
}

//Arrow function
const sayHello = () => console.log('hello'); // this will work if function has one line of code.

3. this keyword

If you are from an IT background, you must have used this keyword in any programming language. It has its own significance when you write a class component in React JS. Although if you know how this keyword works in javascript then you can skip this keyword and focus on next.

4. Arrays

In every programming language, you have heard of it. Array and Object are the two most important things when you will work with the database in React JS. Even though if you are a Frontend Developer you should know it. The array can increase the performance and reusability of your code. For this, I can show an example in React JS.

//Without an array
const a = 'one';
const b = 'two';
const c = 'three';
//lets display them in list
<ul>
  <li>{a}</li>
  <li>{b}</li>
  <li>{c}</li>
</ul>;

//With an Array
const arr = ['one', 'two', 'three'];
//lets display them in list
<ul>
  {arr.map(list => (
    <li>{list}</li>
  ))}
</ul>;

By the above example, you must have got my point of performance and reusability. I have used map function to loop through the arrays. There are a few array functions you should know about them. Let me list them for you below and if you like you can visit Useful JavaScript Array methods you should know – Part I.

map
filter
reduce
forEach

5. Objects

You would be shocked if I tell you Everything in Javascript is Object. Even arrays are object but arrays are special types of objects. In React JS most of the time you have to play with state and props, passing objects, receiving objects between components. So just make sure you know the basics of Objects like

Object destructing
Add data in the previous Object
Removing data from the object
Accessing objects with key

Few ES6 miscellaneous features

Template literals
Promises
Async and await
let and const
Scope

So that was all things to know about javascript before starting ReactJS. Hope this article helped you . If I have missed something please let me know in the comment box below.

Codeificant

Leave a Reply Cancel reply