DEV Community

Cover image for Javascript fundamentals before learning react
Harry
Harry

Posted on • Updated on

Javascript fundamentals before learning react

Before Going to Learn React You must need Some JavaScript concepts.

  • let,var and const
  • function and arrow function callback
  • hight order function
  • class
  • destructuring array and object
  • import and export
  • HTML and CSS Basic

Don't worry I will explain you in details.

let,var and const

let,var,const are just a variable declaring. let and const are come in ES6.
Before we use var for variable declaring. There are some advantages of using var and let.
var is used for functional scope and let is used for block scope.
Block scoped is only work in inside this { } and you can't call this variable outside of the scope. Var is used in function scope means like a global variable. You can call it from anywhere.CONST is the same use let but const is used only in const value , Array and Object.

function and arrow function

function is used to avoid DRY(Don't Repeat Yourself). You can declare a function like this.

function add(a,b)
{ 
           return a + b
} 
Enter fullscreen mode Exit fullscreen mode

What is arrow function? Arrow function is a new way to declaring function that comes in ES6. You can easily convert the above function into an arrow function like this.

   const add = (a,b) => { a + b} ;
Enter fullscreen mode Exit fullscreen mode

It is short right ??

Callback

callback ?? confusing 😅 Don't worry I will explain easy way .
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. see in demo

  setTimeout( function name(){
             console.log("This is zaw");
             },1000) 
Enter fullscreen mode Exit fullscreen mode

High Order Function

Higher-order functions are functions that take other functions as arguments or return functions as their results. Some high-order functions are map, filter, reduce, etc,.. .I am not going this in detail there are many articles on this you can easily search and read it.
link

Destructuring array and object

Destructuring is spliting value into pieces.

  var array = [ one = 1,two = 2,three = 3,four = 4]; 
  var [one,two,three,four] = array; 
  console.log(one);//you will get 1
  console.log(two);//2
Enter fullscreen mode Exit fullscreen mode

To destruturing object

const Obj = { name:"Zaw",age:21,gender:"male"};
const {name,age,gender} = Obj;
console.log(name); //Zaw
console.log(age);
Enter fullscreen mode Exit fullscreen mode

import and export .

import is used to call packages that already on .

 import React from {React} .
Enter fullscreen mode Exit fullscreen mode

Export is used to export your own package that you have been written and you can call by using import when You need it.

  export package;
Enter fullscreen mode Exit fullscreen mode

Thank for reading this I hope this will helpful to you please give me your feedback .I wrote this according to my experience if you found any mistake feel free to DM me on twitter hareom284

Oldest comments (11)

Collapse
 
haaxor1689 profile image
Maroš Beťko • Edited

Overall not bad of an overview and may be useful for someone looking for where to start.

What you should definitely improve about this article is some styling and proofreading. You left in multiple typos, 2 of the sections from overview aren't even in the article and the code snippets have barely any formating and are hard to read.

Collapse
 
hareom284 profile image
Harry

Thank for your feedback I will try to improve this. I just starting writing this so I don't have any idea .I will improve this point

Collapse
 
sanampakuwal profile image
Sanam • Edited

Add js after three dots in snippets to make JS
code readable and highlighted.

Example:

console.log("Hi");
Enter fullscreen mode Exit fullscreen mode
Collapse
 
hareom284 profile image
Harry

Thank you so much!

Collapse
 
hareom284 profile image
Harry

Thank you I will try to improve this.

Collapse
 
farhadi profile image
Farhad Rahmani

Thank you Dear That Was Awesome

Collapse
 
hareom284 profile image
Harry • Edited

I am happy tio hear that this will helpful to you.

Collapse
 
moopet profile image
Ben Sinclair

Have you tried the "array destructuring" example in a browser console?

Collapse
 
hareom284 profile image
Harry

Yes It is working now!

Collapse
 
gbadamson profile image
Gbadamson

🤔🤔🤔

Collapse
 
sunflower profile image
sunflowerseed • Edited

you said

const add = () => { a + b} ;
Enter fullscreen mode Exit fullscreen mode

there is not even a or b in the param. Also, you open the {, and so you need a return. Otherwise it is going to evaluate a + b and return nothing.

Or just use

const add = (a, b) => a + b;
Enter fullscreen mode Exit fullscreen mode