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.
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”.
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:
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
![ReactJs Setup tutorial for Beginner – ReactJs tutorial [P1]](https://cloudreports.net/wp-content/uploads/2019/07/ReactJs-Setup-tutorial-for-Beginner-–-ReactJs-tutorial-P1-350x250.jpg)
