Know These JavaScript Basics Before Learning React

Create React App

The create-react-app package will provide you a starting code with basic react components so that you can modify it according to your needs. After the process is finished, src/app.js will present us with only the React class in the whole app. This one is actually a new feature of ES6 & learning ES6 will make you understand React better and faster.

ES6 Classes

The same pattern we follow in Object-Oriented Languages like Python and Java for the class syntax is similar to what we have in ES6 class syntax.

class syntax is followed by an identifier (a simple name) that can be used to create new objects, & the parameters passed into the object will be passed to the new object.
we can add many as methods according to our requirement, in this case, we are using a hello method returning a string.

Class Inheritance

A class having the extends keyword can be used to initialize a new object from that class which will have all the methods of both classes.
A class that extends another class is called child class & that one being extended is called parent class. These child classes can also replace the methods in parent class with new methods.

The React class designed in src/app.js is a React component with normal ES6 class properties which are imported from the React package. We can use this. state, render() method & other methods as all of these definitions are inside the Component, but that not the only way to define React Component if you don’t need the state and other lifecycle methods we can use Functional Components.

Variables in ES6

In the previous version of Javascript, we only used to have var keyword to store variables globally only, but later in ES6 two keywords let & const are introduced to solve this problem. The main difference is that const cannot change its value after declaration while let can do that. If you are declaring let inside a function, you can’t call it outside of the function.
Using let & const totally depends on you, but here is a quick rule to declaring variables:
By default declare your variables in const, later when you realize that you need to change it to let you can do that anytime, this method is more efficient when you are working on a real-world project.

Using The Arrow Function

An arrow function is pretty handy to use and makes the code more readable and easy to maintain as it gets longer with time. In ES6 this feature allows us to write functions in much shorter syntax.

You can start using it just these two simple steps:
Remove the function keyword.
Then add the fat arrow symbol => after ().
You can still use the parentheses to pass parameters if you have to just pass one parameter there is no need to make your code ugly you can just omit the parentheses.

An arrow function can also be used to make React Components.

Will be equivalent to an ES6 class component.

Using the arrow function in your React code makes it easier to maintain & concise. This type of component is also known as a stateless functional component.

Destructuring For Arrays & Objects

This pattern is most used by developers as it a simple way of declaring a bigger amount of a variable in a well-defined manner. Here you simply copy a part of an object or array and out them into named variables to be used later in your project.

we define the firstName & from developer object into a new variable firstName, if you want to put the firstName into a new variable called name.

Read the full post at :https://medium.com/javascript-in-plain-english/know-these-javascript-basics-before-learning-react-f9182f65dfbb