Muốn học React JS trong vòng 3 tháng thì 8 điều cơ bản sau phải biết đầu tiên

#reactjs #es6 #webdev #javascipt

Nội dung bài viết

Video học lập trình mỗi ngày

Lập trình React JS nghe có vẻ cao siêu và tôi chắc chắn rằng sẽ có nhiều cơ hội trong tương lai của bạn. Nhưng để học React JS một cách khôn khéo và nhanh chóng hiểu được những cú pháp trong React JS là không phải ai cũng có thể làm dược trong một thời gian ngắn. Và nếu bạn đọc được bài viết này thì chỉ 3 tháng thôi bạn sẽ có thể vươn lên một bậc rồi.


ReactjS cơ bản

Thật ra với 3 tháng mà có thể làm được lập trình thì e rằng là quá khó chứ không phải là hơi khó. Trước tiên tôi muốn nhấn mạnh rằng muốn học được React JS thì trước tiên bạn phải thực sự cố gắng và quan trọng bạn phải nắm vững những khái niệm chuyên sâu của JS thuần hay còn gọi là "Vanilla Javascript". Đó là một keyword mà bạn phải nên đọc về nó "Vanilla Javascript là gì?" 


Ở đó sẽ cung cấp cho bạn những kỹ năng có thể viết một chức năng nào mà không cần một thư viện nào hỗ trợ. Thứ hai là ngoài những khái niệm cơ bản ra thì 8 khái niệm sau đây bạn phải nhớ trước khi học lập trình ReactjS, vì ReactjS cũng từ đó mà ra. Chẳng qua ReactjS build lại những cú pháp tiện lợi hơn nhưng cốt lõi vẫn là đây.


Hãy bắt đầu với những kiến thức cơ bản về javascript

Trước hết, bạn cần chấp nhận một thực tế rằng để sử dụng React bạn cần phải học nhiều hơn nữa về javascript. Đây là một điều tốt. Thư viện React rất tuyệt để sử dụng trong một số trường hợp nhất định, nhưng nó không giải quyết được tất cả các vấn đề trong thực tế có rất nhiều trường hợp đã dính.
Ngoài ra, hãy xác nhận xem bạn có thưcj sự đang học React hay không, điều này chủ yếu là để tránh cho bạn khỏi nhầm lẫn về việc học React. Một lập trình viên quen thuộc với HTML và một ngôn ngữ lập trình khác sẽ có thể thành thạo React 100% trong một ngày hoặc ít hơn. Một lập trình viên mới vào nghề sẽ có thể thành thạo React trong một tuần. Tất nhiên, điều này không bao gồm các công cụ và thư viện khác được sử dụng để cải thiện React, chẳng hạn như Redux và Relay.
Học có có hệ thống và theo luồng là một điều quan trọng, và thứ tự sẽ thay đổi tùy theo kỹ năng bạn thành thạo. Không cần phải nói, trước tiên bạn cần hiểu rõ về bản thân JavaScript, tất nhiên, HTML cũng vậy. Tôi muốn nói rõ hơn về vấn đề này, nếu bạn không biết cách sử dụng 8 các phương thức dưới đây trong mã JavaScript khiến bạn nhầm lẫn. Khi đó bạn chưa sẵn sàng để học React, và bạn vẫn còn rất nhiều điều để học trong lĩnh vực JavaScript. Trong quá trình học React JS, tips javascript đã tìm ra một số điều bạn nên hiểu trước khi bắt đầu nó. Tôi sẽ lướt qua các tính năng và thêm các liên kết hữu ích vào tài liệu mà bạn có thể sử dụng để tìm hiểu chúng ở mức độ sâu. 


Đây là cú pháp ES6 hoặc cú pháp ES7 thường được sử dụng là:

  • Es6/ES7 classes
  • Arrow functions
  • let and const
  • Imports and Exports
  • Spread and rest operator
  • Destructuring
  • Các chức năng đặc biệt với những hàm cao cấp như filter(), map() và reduce()

Bạn nào là hay theo dõi blog javascript này thì cũng thừa hiểu là mỗi khái niệm chúng tôi đã biên soạn ra thành một bài viết hoàn chỉnh để cho các bạn mới học cũng như có thể dành cho những dev có kinh nghiệm đều có thể đọc được những thủ thuật và hiểu rõ những khái niệm hơn. Chính vì vậy, chúng tôi khuyến khích bạn nên tìm hiểu những bài viết đó thông qua những link sẵn mà chúng tôi đã cung cấp. Còn ở đây bài viết này, chúng tôi cũng sẽ cô gắng tóm gọn lại những khái niệm nhằm giúp các bạn tiết kiệm thời gian hơn.

Sự khác nhau giữa const và let?

Khái niệm const và let không chỉ dừng lại tại hai khái niệm này mà nó còn liên quan đến những từ khoá sau như var, scope funciton, Global scope, Block scope... Đấy thấy chưa, không có thời gian mà học luôn đó chứ. Vì vậy đọc kỹ và hiểu sâu hơn về const và let thì cứ theo link mà đọc. Var, let, const trong javascript - Những khái niệm đó không xa lại gì nữa kể từ khi ES6 định nghĩa thêm let và const. Nhưng liệu có bạn nào tự hỏi rằng? Chuyện gì xảy ra với var? 


Và tại sao có var rồi lại sinh ra thêm const và let? ES6 rất quan trọng để tìm hiểu bởi vì một lý do là, nó làm cho JavaScript tốt hơn và dễ viết hơn, và Sự khác biệt cấu trúc Class giữa ES5 và ES6. Và hơn nữa ES6 cũng đang được sử dụng cùng với các công nghệ web hiện đại của ngày hôm nay như React, Node.js, v.v. Nhưng trước khi tìm hiểu về let và const thì chúng ta hãy xem var đang có vấn đề gì?

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

    Cố gắng đọc tiếng Anh đi hén vid ụ này viết chuẩn nên chúng ta chôm về :D 
*/
//Var có thể được định nghĩa lại
var name = 'Jane Tracy 👩‍💻';
var name = 'Luke Wilsey 🎥';
console.log(name);
//output => Luke wilsey 🎥 

//var cũng có thể 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.

NÊN ĐỌC: Trời sinh ra var sao còn sinh ra let và const javascript 

Arrow functions


Arrow function là gì? Mỗi khái niệm tôi đều gợi ý cho các bạn những keyword liên quan nữa đó là Regular function là gì? Regular và Arrow Functions thường xuyên được sử dụng trong mỗi module của bất kỳ developer nào. Nhưng có khi nào devjs thật sự để ý rằng giữa Regular function và Arrow Functions khác nhau những gì và tại sao phải sử dụng 2 loại function như vậy không? 


Thật sự mà nói trong quá trình code của chúng ta, đã có khi bạn đã từng bị đi vào những rắc rối tưởng chừng như đơn giản như sử dụng "this" chẳng hạn, nhưng nếu bạn notes lại cho mọi người thì điều đó thật sự là một việc làm ý nghĩa hơn nữa. Chính vì vậy, cho dù những kiến thức đơn giản hay phức tạp nếu bạn có thể ghi lại thì quả thật là một điều tuyệt vời. 

NÊN ĐỌC THÊM: Sự khác nhau giữa Regular và Arrow Functions trong JavaScript 

# Không sử dụng parameter

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

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

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

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

# Sử dụng một parameter

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

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

# sử dụng nhiều 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");

Ta có thể nhìn tổng quan và có thể thấy ở arrow function thì trông có vẻ gọn gàng và thông minh hơn hẳn. Điều đó phải đúng vì thằng ES6 đi sau mà.


ES6 Classes

Một class là một loại hàm khác được khai báo bởi classtừ khóa và có thể được sử dụng để tạo các đối tượng mới. Một class chứa các thuộc tính và phương thức. Các method constructor được sử dụng để khởi tạo các đối tượng được tạo ra bởi chính class và chúng tôi sử dụng từ khóa this để tham khảo các class hiện tại.

class User {
constructor(name, age, email){
  this.name = name;
    this.age = age;
    this.email = email;
  }
  increaseAge(){
   this.age += 1; //tăng thêm tuổi  
  }
}

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, ngoài ra thì class ES6 chứa các static method.


Imports và Exports

Import và Export Modules trong JavaScript là một trong những tính năng tuyệt vời với JavaScript, tính năng này lại giúp chúng trông có vẻ như Java vậy. Nhưng lạ một chỗ là Tipjs lại chưa hề đề cập hay nói cách khác là Tipjs chưa có một bài viết nào về Import và Export ES6 này. Và ngay đây, thì tipjs sẽ trình bày về tính năng này trong bài post này. 


Trước khi ES6 giới thiệu trong JavaScript về tính năng Import và Export thì ở ES5 chúng ta cũng đã từng sử dụng require() function. Giờ đây mọi chuyện cũng đã khác, và thân thiện hơn như ai đã từng code qua ngôn ngữ Java. Để tiếp cho các bạn hiểu thì, chúng ta nói sơ qua module là gì? 

### 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!

Nên đọc thêm : Tìm hiểu sâu về Import và Export trong JavaScript


Spread và rest operator

Thật tiếc cho những bạn học lập trình javascript mà bỏ qua Spread và rest operator trong javascript được hỗ trợ bỏi ES6. Ngoài ra chúng ta cũng nên quan tâm đến Destructuring nữa là đẹp Bạn có viết có nhiều tính năng để làm việc với Arrays và Objects kể từ khi ES6 ra đời. Có thể kể đến một vài tính năng như Destructuring, Rest Parameters, và Spread Syntax. Những tính năng này giúp bạn làm việc với các cấu trúc dữ liệu nhanh và gọn hơn. Bạn có viết rằng có nhiều ngôn ngữ lập trình khác vẫn chưa có những tính năng Destructuring, Rest Parameters, và Spread Syntax. 

NÊN ĐỌC THÊM: Giải thích về Destructuring, Rest Parameters, và Spread Syntax trong javascript  

Chính vì vậy những tính năng này là một lợi thế cho những bạn nào đang theo lập trình javascript đấy. Và trong bài viết này chúng tôi sẽ giới thiệu cho các bạn những tính năng này là gì? Và khi nào sử dụng chúng? Đầu tiên chúng tôi muốn bạn tìm hiểu kỹ về những method của Arrays và medthod của Objects. Ở đó có những method nào, và đã đầy đủ hay chưa. Từ đó bạn mới có thể hiểu được bản chất của những tính năng vừa thiệu dưới đây. 


### (...) 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


Destructuring Javascript là gì? Buông gì buông chứ đừng bỏ qua phần này của ES6. Destructuring là một cú pháp cho phép bạn gán các thuộc tính của một Object hoặc một Array. Điều này có thể làm giảm đáng kể các dòng mã cần thiết để thao tác dữ liệu trong các cấu trúc này. Có hai loại Destructuring: Destructuring Objects và Destructuring Arrays. 

NÊN ĐỌC: Destructuring Javascript là gì? Buông gì buông chứ đừng bỏ qua phần này của ES6.  

Rồi ok, chúng ta sẽ xem xét đoạn code sau, nếu bạn cảm thấy bối rối thì xong phim rồi đôi mắt biếc ơi =]]. Không sao đâu, tôi và nhiều developer javascript (devjs) cũng như bạn mà thôi, cũng đã cảm thấy bối rồi khi tính năng này được phát hành. 


### 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 trong javascript. Ngôn ngữ nào cũng vậy, phải nắm những chức năng quan trọng để giải quyết nhanh hơn chư không riêng gì về javascript. Giờ đây qua bài viết này các bạn lịa co thể trang bị thêm cho mình những bí kíp tuy nhỏ nhưng võ công lại thượng thừa. Trong bài viết này như tiêu đề của nó, tôi sẽ trình bày cho các bạn tìm hiểu sâu hơn về các JavaScript array methods mà bất kỳ các devloper javascript nào cũng nên biết và sử dụng chúng như thế nào cho hiệu quả và đơn giản. Và update những tính năng mới của Array javascript bao gồm: copyWithin(), entries() Và đây là những method array trong javascript được sử dụng rộng rãi nhất và có nhiều tài liệu để nói về vấn đề này trên 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

Ví dụ về Map()

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 🤾"]

Nên đọc thêm :

Tóm lại là

Để thực hiện chuyển đổi sang react, hãy học Javascript trước tiên, đừng vội vàng tham gia khóa học hoặc tài liệu. Dành thời gian của bạn hàng tuần hoặc hàng tháng để đảm bảo bạn hiểu vanilla javascript. Khi bạn sẵn sàng cho việu học lập trình reactjs thì có lẽ bạn chưa bao giờ nghĩ rằng JS có thể giải thích tốt điều này đến với bạn. Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ nó với bạn bè của bạn hoặc những người mới bắt đầu học Javascript và react js. 

Để học tốt nhất có thể bạn nên tham khảo:  

MDN docs  

10 method array cần biết trong javascript đối với bất kỳ developer javascript nào?  

Destructuring Javascript là gì? Buông gì buông chứ đừng bỏ qua phần này của ES6.  

Giải thích về Destructuring, Rest Parameters, và Spread Syntax trong javascript  

Nói về Import và Export trong JavaScript

Biết rồi, khổ lắm nói mãi class es6. Nhưng sự thật vẫn chưa biết.  

Sự khác nhau giữa Regular và Arrow Functions trong JavaScript  

Trời sinh ra var sao còn sinh ra let và const javascript  

Ví dụ lấy tại:  DEV.TO 

Có thể bạn đã bị missing

DMCA.com Protection Status

© 2024 Anonystick | Made by Anonystick