10 concepts javascript bạn cần biết trước khi học ReactJs

Mở đầu

Xin chào mọi người !

Hôm này chúng ta sẽ cùng tìm hiểu 10 concepts JavaScript mà mình tin là bạn cần nắm vững trước khi tìm hiểu ReactJs

1. Biến

1.1 let

let được coi là một cải tiến đối với khai báo var. Nó giải quyết vấn đề chúng ta gặp phải khi sử dụng var

Một block là một đoạn code được giới hạn bởi {}. Một biến được khai báo trong một block sử dụng let thì chỉ có thể được sử dụng trong block đó.

let greeting ="say Hi";let times =4;if(times >3){let hello ="say Hello instead";
     console.log(hello);// "say Hello instead"}
console.log(hello)// hello is not defined

let có thể được update nhưng không được khai báo lại.

let greeting ="say Hi";let greeting ="say Hello instead";// error: Identifier 'greeting' has already been declared

Nhưng cần lưu ý, nếu cùng một biến nhưng được defined trong các scopes khác nhau, sẽ không có lỗi:

let greeting ="say Hi";if(true){let greeting ="say Hello instead";
    console.log(greeting);// "say Hello instead"}
console.log(greeting);// "say Hi"

1.2 const

Các biến được khai báo với const giữ giá trị không đổi.

Giống như let , các biến được khai báo với const chỉ có thể được truy cập trong block mà chúng đã được khai báo.

const không thể được update hoặc khai báo lại.

const greeting ="say Hi";
greeting ="say Hello instead";// error: Assignment to constant variable.

const greeting ="say Hi";const greeting ="say Hello instead";// error: Identifier 'greeting' has already been declared

Và cần lưu ý khi khai báo 1 object với const. Trong khi object không thể được update, nhưng các thuộc tính của các object này có thể được update.

const greeting ={
  message:"say Hi",
  times:4}

greeting ={
  words:"Hello",
  number:"five"}// error:  Assignment to constant variable.

Nhưng có thể

greeting.message ="say Hello instead";

2.Template Literals

Template literals là các chuỗi động, linh hoạt hơn so với các chuỗi JavaScript cơ bản sử dụng dấu ngoặc kép hoặc đơn.

Template literals sử dụng cú pháp ${} để chèn các biểu thức JS.

Không cần sử dụng toán tử + để nối hoặc kết hợp các chuỗi.

Dễ dàng viết các chuỗi nhiều dòng.

const username ="Fred";// connecting strings with the + operator is hard to read and not intuitiveconst greeting ="Hi "+ username +", how are you?";// template literals (``) are a breeze and much easier to writeconst username ="Anna";// dynamic values are inserted with the ${} syntaxconst greeting =`Hi ${username}, how are you?`;

Cách Template Literals được sử dụng trong React

Template Literals thường được sử dụng để nội suy chuỗi hoặc để thiết lập động giá trị chuỗi của props, components hoặc attributes của các phần tử.

Đặc biệt, Template literals rất hữu ích để style động các elements dựa trên các điều kiện khác nhau, như ví dụ dưới đây:

functionUserCard({ id, name }){// if user id is an odd number...const isOddUser = id %2!==0;// ...give them a dark backgroundreturn<div className={idOddUser ?'dark-bg':''}>{name}</div>}<UserCard id={1} name="Bob"/>// displays UserCard with dark background applied

3. Arrow Functions

Arrow Functions cho phép ta viết hàm hàm ngắn gọn hơn rất nhiều.

//Function expressionconstaddNumbers=function(number1, number2){return number1 + number2;};//Arrow function expressionconstaddNumbers=(number1, number2)=> number1 + number2;

Arrow Functions với một tham số sẽ không yêu cầu dấu ngoặc đơn.

//Example with parenthesesconstaddNums=(num1, num2)=> num1 + num2;//Example without parenthesesconstaddTwo=num=> num +2;

Nếu thân hàm chỉ chứa một câu lệnh, chúng ta có thể bỏ qua keyword return và dấu{ }và viết nó trên một dòng

constaddTwo=a=> a +2;

4. Array Methods(.map(), .filter() … )

Khác với việc sử dụng vòng lặp for để lặp lại các mảng, các phương thức mảng như map(), filter()… cho phép chúng ta lặp qua các mảng với mục đích nhất định

.map() – cho phép chúng ta chuyển đổi từng phần tử của một mảng

.filter()– cho phép chúng ta lọc ra các items từ các mảng mà không đáp ứng một điều kiện nhất định.

Các method mảng này ngắn hơn (diễn đạt rõ ràng hơn những gì chúng làm) so với vòng lặp for thông thường.

// Goal: turn array of users into array of usernamesconst users =[{ name:"Bob", id:1},{ name:"Jane", id:2},{ name:"Fred", id:3}];const usernames =[];// for-loopfor(let i =0; i < users.length; i++){
  usernames[i]= users[i]}

usernames;// ["Bob", "Jane", "Fred"]// .map() - concise + readableconst usernames = users.map(user=> user.username);

usernames;// ["Bob", "Jane", "Fred"]

Sử dụng array method trong React

Trong React, chúng ta thường sẽ sử dụng các phương thức này để hiển thị động các components hoặc elements bằng JSX.

functionUserList(){const users =[{ name:"Bob", id:1},{ name:"Jane", id:2},{ name:"Fred", id:3}];// filter out user with id of 2, then map over the rest to display their namesreturn(<ul>{users
         .filter(user=> user.id !==2).map(user=><li key={id}>{user.name}</li>)}</ul>);};

5. Destructuring

Destructuring cho phép chúng ta đưa các cặp key-value của object thành các biến.

Destructuring rất hữu ích vì chúng ta sẽ không cần phải reference đến toàn bộ một object khi chúng ta muốn sử dụng nó.

Với destructuring, chúng ta có thể chỉ lấy những giá trị mà chúng ta cần của object và đưa chúng thành các biến độc lập.

Lưu ý rằng destructuring cũng có thể được thực hiện với mảng như với object bình thường

const user ={
  name:"Reed",
  username:"ReedBarger",
  email:"[email protected]",
  details:{
    title:"Programmer"}};// object property access without destructuring
console.log(`${user.name}, ${user.email}`);// logs: Reed, [email protected]// object destructuring for less repetitionconst{ name, email }= user;

console.log(`${name}, ${email}`);// logs: Reed, [email protected]// object destructuring with nested object "details"const{ username, details:{ title }}= user;

console.log(`${username}, ${title}`);// logs: ReedBarger, Programmer

Sử dụng destructuring trong React

Destructuring thường được sử dụng để nhận các giá trị riêng lẻ từ props object.

Thông thường, chúng ta không cần toàn bộ props object, đặc biệt nếu chúng ta chỉ truyền một prop cho một component nhất định.

Thay vì referencing đến ‘props’, chúng ta có thể cấu trúc lại nó để lấy props data dưới dạng các biến riêng lẻ trong component.

functionApp(){return(<div><h1>All Users</h1><UserList users={["Bob","Jane","Fred"]}/></div>);}functionUserList({ users }){return(<ul>{users.map((user, index)=>(<li key={index}>{user}</li>))}</ul>);}

6. Default parameters

Trong JavaScript, một parameter có giá trị mặc định là undefined. Có nghĩa là nếu bạn không chuyển các arguments vào hàm, các parameters của nó sẽ có giá trị mặc định là undefined.

Default parameters sẽ giúp chúng ta ngăn ngừa một số lỗi bằng cách đặt giá trị mặc định cho đối số (với dấu = ) nếu không có giá trị nào được cung cấp.

Sử dụng default parameters trong React

Default parameters thường được sử dụng với props.

Trong ví dụ này, chúng ta đang sử dụng object destructuring để lấy prop username từ props object. Nhưng không có prop nào được truyền, vì vậy chúng ta đặt giá trị default parameter là ‘guest’ và component vẫn sẽ hoạt động.

const Header =({ username ="guest"})=>{return<header>Welcome,{username}!</header>;}<Header />// displays: Welcome, guest!

7. Spread Operator

Toán tử spread cho phép chúng ta “spread” các object thành những object mới.

Chúng tạo các object mới bằng cách merging các thuộc tính của chúng với nhau.

Toán tử spread có thể được sử dụng với cả object và array.

// Merge default empty data with user data from a sign up form with spread operatorconst user ={
  name:"",
  email:"",
  phoneNumber:"",};const newUser ={
  name:"ReedBarger",
  email:"[email protected]",};/*
  the object that is spread in last overwrites the previous object's values
  if the properties have the same name
*/const mergedUser ={...user,...newUser };
mergedUser;// { name: "ReedBarger", email: "[email protected]", phoneNumber: "" };

Sử dụng toán tử Spread trong React

Toán tử spread thường được sử dụng để dễ dàng truyền tất cả dữ liệu của một object dưới dạng từng props (mà không cần phải truyền từng phần)

functionApp(){const name ={
    first:"Reed",
    last:"Barger"};return(<div>{/*    
     <UserGreeting 
       first={name.first}
       last={name.last}
      />
      */}<UserGreeting {...name}/></div>);}functionUser({ first, last }){return(<p>
      Hi,{first}{last}</p>);}

8. Short Conditionals

8.1. Ternary operation

Trong JavaScript, toán tử Ternary thường được sử dụng để viết câu lệnh if ngắn gọn hơn.

Condition ? “This is True” : “This is False”

Khi điều kiện đánh giá là true sẽ trả về “This is True” và ngược lại sẽ trả về “This is False”.

Sử dụng Ternary trong React :

constNavbar=()=>{const isAuth =true;return(<div>// if user is authenticated, show auth links, otherwise a login link{isAuth ?<AuthLinks />:<Login />}</div>);}

8.2. Inline If with Logical && Operator

&& là một toán tử boolean, hiểu cơ bản có nghĩa là “and”. Và để điều kiện được đánh giá là true, thì cả hai câu lệnh đều phải là true.

Sử dụng toán tử && trong React :

constNavbar=()=>{const isAuth =true;return(<div>// if user is authenticated, show their profile. If not, nothing.{isAuth &&<UserProfile/>}</div>);}

9. ES Modules

ES Modules cho phép chúng ta chia sẻ code trên nhiều files trong ứng dụng một cách thuận tiện.

Chúng ta sẽ sử dụng các Modules để làm cho code trở nên clean hơn, để chỉ viết code ở nơi cần thiết, không đặt mọi thứ vào một file duy nhất.

// utils/getLocalTime.jsconstgetLocalTime=()=>newDate().toLocaleTimeString();exportdefault getLocalTime;// app.jsimport getLocalTime from'./utils/getLocalTime.js'constApp=()=>{return(<div><header>The time is {getLocalTime()}</header>...</div>);}

Sử dụng ES Modules trong React

ES Modules được sử dụng rất nhiều trong React để xây dựng ứng dụng một cách hiệu quả.

ES Modules có thể cả import tương đối (local files) và import tuyệt đối (các packages như React)

Chúng ta có thể export và import hầu như mọi thứ, không chỉ JavaScript, mà còn cả các file CSS, image …

Ngoài ra, trong React thì chúng ta sẽ không phải cần thêm phần extension vào cuối khi nào chúng ta import JavaScript.

// App.jsconstApp=()=><div>hello world!</div>// styles.css
html, body {
  margin:0;
    padding:0;}

h1 {
  color: cornflowerblue;}// index.jsimport React from'react';import'./styles.css'import ReactDOM from"react-dom";import App from"./App";const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

10. Promises + Async / Await

Trong React :

Promises + async / awaitđược sử dụng nhiều nhất để thực hiện các network requests, như request đối với REST API hoặc GraphQL API

Nhiều thư viện như fetch API hoặc axios sử dụng promises sẽ giải quyết các requests mất một khoảng thời gian không xác định để hoàn thành.
Và promises và async / awaitcũng được sử dụng với các thư viện này để thực hiện các network requests

// fetching data from an API with basic promise syntax (notice the use of arrow functions)
window.fetch('http://jsonplaceholder.typicode.com/posts').then(response=> response.json()).then(data=> console.log(data));// fetching same data from API with async/awaitasyncfunctiongetPostData(){const response =await window.fetch('http://jsonplaceholder.typicode.com/posts')// we need to resolve two promises using await to get the final dataconst data =await response.json();
  console.log(data);}getPostData();

Lời kết

Cảm ơn mọi người đã theo dõi bài viết !

Mọi người có thể đọc bài gốc của tác giả tại đây

https://dev.to/reedbarger/10-javascript-concepts-you-need-to-master-react-cheatsheet-3njh