No Result
View All Result
Cloud Reports
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • PC & Laptop
  • Technology & Digital
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • PC & Laptop
  • Technology & Digital
No Result
View All Result
Cloud Reports
No Result
View All Result

If you want to learn React JS within 3 months, the following 8 basics must first be known

npn by npn
December 22, 2020
in Javascript, React
Reading Time: 11min read
A A
0
If you want to learn React JS within 3 months, the following 8 basics must first be known

React JS programming sounds sublime and I am sure there will be plenty of opportunities in your future. But to learn React JS wisely and quickly understand the syntax in React JS is that not everyone can do it in a short time.

READ ALSO

Javascript developer should stop for … in for now

Javascript developer should stop for … in for now

December 31, 2020
13
Understanding the difference between Number.isNaN and isNaN in javascript

Understanding the difference between Number.isNaN and isNaN in javascript

December 29, 2020
7

And if you can read this article, you will be able to rise up one notch in only 3 months.

Basic ReactjS

Actually, with 3 months of being able to program, I fear that it is too difficult, not a bit difficult. First of all, I want to emphasize that in order to learn React JS, you must first really try and it is important that you master the deep concepts of pure JS, also known as “Vanilla Javascript”.

ADVERTISEMENT

There will give you the skills to write a function without any library support. Second, in addition to the basic concepts, the following 8 concepts you must remember before learning ReactjS programming because ReactjS also comes from there. Only ReactjS rebuilds the more convenient syntax, but the core is still here.

Let’s start with the basics of javascript

First of all, you need to accept the fact that in order to use React you need to learn much more about javascript. This is a good thing. The React library is great to use in certain cases, but it doesn’t solve all the problems in practice there are a lot of sticky cases.
Also, confirm if you are really learning React, this is mainly to avoid confusion about learning React. A programmer familiar with HTML and another programming language should be able to master React 100% in a day or less. A novice programmer should be able to master React in a week. This of course does not include other tools and libraries used to improve React, such as Redux and Relay.
Systematic and threaded learning is important, and the order will vary depending on the skills you master. Needless to say, you first need to understand JavaScript itself, of course, HTML too. I want to talk more about this, if you don’t know how to use the following 8 methods in JavaScript code gets you confused. You weren’t ready to learn React then, and you still have a lot to learn in the JavaScript realm. During the course of learning React JS, the javascript tips came up with a few things you should understand before starting it. I’ll go through the features and add helpful links to documentation that you can use to explore them at a deep level. 

Here is the ES6 or the commonly used ES7 syntax which is:

  • Es6/ES7 classes
  • Arrow functions
  • let and const
  • Imports and Exports
  • Spread and rest operator
  • Destructuring
  • Special functions with advanced functions like filter (), map () and reduce ()

Those who follow this javascript blog also understand that each concept we have compiled into a complete article for newcomers as well as for experienced devs can read. get tips and understand concepts better. Therefore, we encourage you to explore those articles through the links we have provided. Also here in this article, we will also try to summarize the concepts to help you save more time.

Difference between const and let?

The concept of const and let not only stop at these two concepts, but it also relates to the following keywords such as var, scope function, Global scope, Block scope … See, there is no time to learn. but. So read carefully and understand more deeply about const and let, just follow the link and read. Var, let, const in javascript – Those concepts are not far behind since ES6 defined let and const added But do any of you wonder? What happened to var? 

And why does having var generate const and let? ES6 is important to learn because one reason is, it makes JavaScript better and easier to write, and the Class Structure Difference between ES5 and ES6. And also ES6 is being used in conjunction with today’s modern web technologies like React, Node.js, etc.

/*
    Example Reup: https://dev.to/tracycss/the-vanilla-javascript-basics-to-know-before-learning-react-js-53aj
    By
    https://anonystick.com

    Try to read English to find this correct writing, so we steal about: D 
* / 
// Var can be redefined 
var name = 'Jane Tracy 👩‍💻' ;
var name = 'Luke Wilsey 🎥' ;
console .log (name);
// output => Luke wilsey 🎥

// var can also update 
var name = 'medium.com 👩‍💻' ;
name = 'anonystick.com';
console.log(name);
//output => anonystick.com

//let can’t be re-assigned
let name = 'Jane Tracy 👩‍💻';
let name = 'Luke Wilsey 🎥 ';
console.log(name);
//output => Syntax error: the name has already been declared

// let can be updated
let name = 'Spencer 👩‍💻';
name = 'Tom🍄';
console.log(name);
//output => Tom🍄

//const can’t be re-assigned
const name = 'Jane Tracy 👩‍💻';
const name = 'Luke Wilsey 🎥 ';
console.log(name);
//output => Syntax error: the name has already been declared

//const object properties or array values can be changed
const friends = [{
    name: 'Bob 🥽',
    age: 22,
    hobby: 'golf🏌',
    music: 'rock 🎸'
  }

];

const result = friends.age = 23;
console.log(result);
//output => 23

// const object can't be re-assigned 
const friends = [{
    name: 'Bob 🥽',
    age: 22,
    hobby: 'golf🏌',
    music: 'rock 🎸'
  }

];

friends = [{
  name: 'Jane 🥽',
  age: 24,
  hobby: 'golf🏌',
  music: 'Pop 🎸'
}];

console.log(friends);
//output => Uncaught TypeError: Assignment to constant variable.

Arrow functions

What is an arrow function? Each concept I have suggested to you more related to keywords is what is the Regular function? Regular and Arrow Functions are frequently used in every module of any developer. But when did devjs really notice what the difference between Regular function and Arrow Functions is and why need to use two kinds of functions like that? 

Honestly, in our coding process, there have been times when you’ve run into seemingly simple problems like using “this” for example, but if you note it to everyone then that’s true. is a more meaningful job. Therefore, whether simple or complex knowledge if you can write it down, it is a wonderful thing. 

# Don’t use parameters

/***** ES5 Regular Function  *****/

let prtLangReg = function () {
console.log("JavaScript");
}
prtLangReg ();

/***** ES6 Arrow Function  *****/

let prtLangArrow = _ => {console.log("JavaScript");}
prtLangArrow ();

# Use a parameter

/***** ES5 Regular Function  *****/
let prtLangReg = function (language) {
console.log(language);
}
prtLangReg("JavaScript");

/***** ES6 Arrow Function  *****/
let prtLangArrow = (language) => { console.log(language); }
prtLangArrow("JavaScript");

# uses many parameters

/***** ES5 Regular Function  *****/
let prtLangReg = function (id, language) {
console.log(id + ".) " + language);
}
prtLangReg(1, "JavaScript");

/***** ES6 Arrow Function  *****/
let prtLangArrow = (id, language) => { console.log(id + ".) " + language); }
prtLangArrow(1, "JavaScript");

We can look at the overview and can be seen in the arrow function, it looks much cleaner and smarter. That must be true because ES6 is behind.

ES6 Classes

One classis another type of function that is declared by the keyword class and can be used to create new objects. One classcontains properties and methods. The methods constructorare used to initialize the objects created by itself classand we use the keyword thisto refer to the classcurrent.

class User {
constructor(name, age, email){
  this.name = name;
    this.age = age;
    this.email = email;
  }
  increaseAge(){
   this .age + = 1 ; // increase age  
  }
}

const user1 = new User('messi', 31, 'messi@gmail.com')
console.log(user1); //User {name: "messi", age: 31, email: "messi@gmail.com"}
user1.increaseAge()
console.log(user1); // User {name: "messi", age: 32, email: "messi@gmail.com"}

Okay, in addition ES6 class contains static methods.

Imports and Exports

Import and Export Modules in JavaScript are one of the great features of JavaScript that makes them look like Java again. But strangely, Tipjs never mentioned, or in other words Tipjs has not had an article on Import and Export ES6. And right here, we will cover this feature in this post. 

Before ES6 introduced the Import and Export feature in JavaScript, in ES5 we also used the require () function. Now things are different, and more friendly like anyone who has coded through the Java language. To let you understand, let us briefly talk about what the module is? 

### export

// 📁 say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; // a list of exported variables

### import

// 📁 main.js
import {sayHi as hi, sayBye as bye} from './say.js';

hi('John'); // Hello, John!
bye('John'); // Bye, John!

Spread and rest operator

Unfortunately for those of you learning javascript that ignores Spread and rest operator in JavaScript supported by ES6. Also, we should pay attention to Destructuring as well. You have written many features to work with Arrays and Objects since ES6 was born. Examples include Destructuring, Rest Parameters, and Spread Syntax. These features help you work with data structures faster and more compact. Did you write that there are many other programming languages ​​that still don’t have Destructuring, Rest Parameters, and Spread Syntax features? 

So these features are an advantage for those who are following javascript programming. And in this article, we will show you what these features are? And when to use them? First, we want you to delve into the Arrays method and the Objects method. There are methods there, and is complete or not. From there you can understand the nature of the features just introduced below. 

### (…) dots

//In arrays
const jobs = ["teacher 👩‍🏫 ", "engineer 🧰", "developer 👩‍💻"];

const currentJobs = [
  ...jobs,
  "actor 🎥",
  "social media influencer 📴",
  "musician 🎻",
];

console.log(currentJobs);
//output => ["teacher 👩‍🏫 ", "engineer 🧰", "developer 👩‍💻", "actor 🎥", "social media influencer 📴", "musician 🎻"]

//In objects
const currentJob = {
  name: "Jane",
  job: "developer 👩‍💻",
};

console.log(currentJob);

const funJob = {
  ...currentJob,
  name: "Tracy",
  PartTimejob: "musician 🎻",
};

console.log(funJob);
//output => {name: "Tracy", job: "developer 👩‍💻", PartTimejob: "musician 🎻"}

### rest operator

const num = (...args) => {
  return args.map((arg) => arg / 2);
};
const result = num(40, 60, 80, 120, 200, 300);
console.log(result);

//output => [20, 30, 40, 60, 100, 150]

//example 2
const myFruits = (...fruits) => {
  return fruits.filter((fruit) => fruit !== "🍌");
};

const result = myFruits("🍎", "🥝", "🍌", "🍍", "🍉", "🍏");

console.log(result);
//output
["🍎", "🥝", "🍍", "🍉", "🍏"]

Destructuring javascript

What is Destructuring Javascript? Let go of nothing but do not miss this part of ES6. Destructuring is a syntax that allows you to assign the properties of an Object or an Array. This can significantly reduce the lines of code required to manipulate the data in these structures. There are two types of Destructuring: Destructuring Objects and Destructuring Arrays. 

Okay, we will look at the following code, if you feel confused, then finish the movie and then my eyes It’s okay, me and many javascript (devjs) developers as well as you alone, were confused when this feature was released. 

### Array destructuring

const myFruits = ["🍎", "🥝", "🍌", "🍍", "🍉", "🍏"];
const [myFavorite, , , listFavorite] = myfruits;
console.log(myFavorite, listFavorite);
//output 
🍎 🍍

### Objects destructuring

const { name, job } = { name: "Tracy", job: "musician 🎻" };
console.log(name, job);
//output 
Tracy musician 🎻

Array function

Array method in javascript. Every language, too, must grasp the important functions to resolve faster than nothing about javascript. Now through this article, you can quickly equip yourself with small tips but superior martial arts. In this article as the title suggests, I will show you a deeper understanding of JavaScript array methods that any javascript developer should know and how to use them efficiently and simply. And update new Array javascript features including copyWithin (), entries () And these are the most widely used javascript array methods and there are many documents to talk about this on the internet.

  • 1. forEach javascript
  • 2. includes javascript
  • 3. filter javascript
  • 4. map javascript
  • 5. reduce javascript
  • 6. some javascript
  • 7. every javascript
  • 8. sort javascript
  • 9. Array.from javascript
  • 10. Array.of javascript
  • 11. Array.prototype.entries()
  • 12. Array.prototype.copyWithin() javascript

Map () example

const friends = [{
    name: 'Jane 🌟',
    age: 23
  },
  {
    name: 'Bob 🥽',
    age: 22
  },
  {
    name: 'Tracy 🏌',
    age: 24
  },
  {
    name: 'Jack 🎸',
    age: 25
  },
  {
    name: 'Fred 🤾',
    age: 25
  }
];
const mapNames = friends.map(friend => friend.name);
console.log(mapNames);

//output
["Jane 🌟", "Bob 🥽", "Tracy 🏌", "Jack 🎸", "Fred 🤾"]

In short

To make the transition to react, learn Javascript first, don’t rush into course or documentation. Take your time weekly or monthly to make sure you understand vanilla javascript. When you are ready for reactjs programming material you probably never thought that JS could well explain this to you. If you found this article helpful, please share it with your friends or those who just started learning Javascript and react js. 

For the best possible learning you should consult: 

MDN docs 

10 must array methods in javascript for any javascript developer? 

What is Destructuring Javascript? Let go of nothing but do not miss this part of ES6. 

Explain Destructuring, Rest Parameters, and Spread Syntax in javascript 

Talk about Import and Export in JavaScript

I know, it’s hard to say class es6. But the truth is still unknown. 

The difference between Regular and Arrow Functions in JavaScript 

God generates var, and still produces let and const javascript  

Source:  DEV.TO 

ShareTweetShare
Previous Post

Accelerate your Continuous Integration pipelines with Directed Acyclic Graph (DAG)

Next Post

What is Unit Test? Introduction and Example about Unit Test

npn

npn

Related Posts

Javascript developer should stop for … in for now
Javascript

Javascript developer should stop for … in for now

December 31, 2020
13
Understanding the difference between Number.isNaN and isNaN in javascript
Javascript

Understanding the difference between Number.isNaN and isNaN in javascript

December 29, 2020
7
How to display colors (color, bgcolor) in console.log () for javascript developers!
Javascript

How to display colors (color, bgcolor) in console.log () for javascript developers!

December 29, 2020
9
ReactJs Setup tutorial for Beginner – ReactJs tutorial [P1]
React

Pathway to learn javascript to reactjs

December 21, 2020
10
Modern JavaScript features should be used every day, for good resolution (P1).
Javascript

Modern JavaScript features should be used every day, for good resolution (P1).

December 21, 2020
8
Smooth UI System: a new way to style your components
React

Smooth UI System: a new way to style your components

December 18, 2020
7
Next Post
What is Unit Test? Introduction and Example about Unit Test

What is Unit Test? Introduction and Example about Unit Test

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

No Result
View All Result

Categories

  • Android (1)
  • Ant Design tutorial (7)
  • Javascript (21)
  • Layout and Routing (2)
  • Linux (3)
  • PC & Laptop (34)
  • React (17)
  • SQL (2)
  • Technology & Digital (124)
  • The Basics (5)
  • Web development (38)

Search

No Result
View All Result
No Result
View All Result
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • PC & Laptop
  • Technology & Digital