We all have been in this stage. You have just finished an online course or other self-taught resources and have some grip over JavaScript and now the obvious choice is to learn some JavaScript framework. But approaching your first js framework can get really scary. But I beg you to not stop there, we all once had that doubt that we are not ready yet, it is something every developer goes through.
In this post, I will make your transition to the React framework a lot easier. As I have listed down the most used JavaScript concepts used inside React Js.
Before going into React Js you need to first make sure that you have learned the basics of JavaScript. But even after that, there are chances you might not have gone through concepts that React Js require, so please read this post till the end, even if you find it too easy or boring, at least skim over it.
“If you can’t explain it simply, you don’t understand it well enough.”
— Albert Einstein
Coding is a continuous journey, you learn on the way. You need to make one thing clear, no one in this world is completely ready to do something. You just have to do those things.
I always did something I was a little not ready to do. I think that is how you grow.
Let's get going!
What we will be covering
- Es6 classes
- Array functions (especially filter and map) you will use them a lot!
- Arrow functions
- let and const
- Imports and Exports
- Spread and Rest Operator
- The ‘this’ concept
Using Let and Const variables
Before var was used to set new variables but with the ES6 updates let let and const were introduced.
But what is the difference between var and let and const ?
Scope
var variables are globally scoped or accessible. This means when they are declared outside a function they are accessible throughout your file or window. This can be dangerous because you can change it without knowing, hence getting a lot of errors.
While on the other hand let and const has blocked scope. This means when they are declared inside a function or any block of code, they can’t be accessed outside it. Thus you can’t easily break your code by manipulating or redeclaring the same variable outside the function.
Re-assigning
Var variables can be re-assigned and updated easily, let can be updated but not re-assigned, and const can neither be re-assigned nor updated, it is constant(doesn’t change).
Arrow functions
When I started learning about arrow functions, it was a bit tough to get holdover arrow functions, It took me some time to get used to it.
Arrow functions are short and straight to the point. They are almost the same as regular functions but with less syntax.
Note: Arrow functions are used a lot in modern frameworks, it is a must to learn.
ES6 Classes
A class is another type of function which is declared by the class keyword and can be used to create new objects. A class contains properties and methods.
The constructor method is used for initializing objects that are created by the class itself and we use this keyword to refer to the current class. For eg in StudentName class this refers to StudentClass.
One of the most things used in Classes is Inheritance
We use extends in classes to inherit properties from another class.
In the example below, the class TopStudents inherits the property and method from the StudentName class. The super method is used to call the parent constructor. In our case, it will call the constructor of the TopStudent class.
Imports and exports
You can store functions in one Javascript file and later on export it to use it in another Js file by importing the file or a specific function. It comes very handy to organize your code structure.
How to export a file or some functions?
You can use the default when exporting one main thing from the file.
How import files
Spread and rest operator
When I first heard of this operator I was so curious to understand how only three dots can be so powerful, simple yet easy to use. To me, the three dots were like magic, a safe way to copy reference types without any issues.
The spread and rest operator uses three dots (. . .) to initialize it.
The spread operator is used for splitting up the values of an array and adding them to another array. Just as it says spread operator spreads values of one array into another array.
The same can be used for objects also.
The rest operator
This operator is used to represent an infinite amount of arguments in a function.
Contrary we need to specify how many arguments we will provide to a function but what if we don't know how many arguments we will need. Here come the rest operator, you can specify infinity amount of arguments.
Array function
Array functions are not new but they are still important to know and practice on. In react, map and filter methods are extensively used when dealing with data.
Filter method
The filter method creates a new array of elements that returned true from the call back function passed and filters out the rest.
In the example above it returns the objects with people who are 23 years and above only.
Map method
The map method creates a new array from the results of the callback function. The callback is called on each index on the array. The indexes are the elements in the array. Let’s look at an example.
this
This is one of the scariest and troublesome things you face when learning JavaScript. It is confusing and absurd at first, but learning it will be worth all the effort. You might not get it at the first attempt but no worries, this happens to almost everyone.
The JavaScript this keyword refers to the object it belongs to.
here this refers to the object person.
Conclusion
To make your transition to react learn JavaScript first, don’t rush the course or documentation. Take your time be it weeks or months to ensure you understand vanilla JavaScript. I repeat don't rush. Not knowing some concept will make your React journey miserable.
I have listed the concepts you will need to get started with your React journey, but keep in mind this is not everything.
Comments
Post a Comment