Bạn đã học JavaScript cơ bản nhưng chưa biết là liệu kiến thức đã đủ để bắt đầu học React hay chưa? Chưa đủ thì cần học thêm những gì?
Đặc biệt, khi mà bạn đang ở giai đoạn học tập, chưa có nhiều kinh nghiệm với JavaScript thì để nhận ra những gì mình còn thiếu khá là khó khăn.
Chính vì thế, bài viết này mình sẽ chỉ cho bạn các Kiến thức JS cần để học React:
Đó là 20% tính năng JavaScript mà bạn sẽ sử dụng trong 80% thời gian để phát triển ứng dụng React.
Dưới đây, mình sẽ giúp bạn tìm hiểu tất cả về chúng.
Thông thường, khi bắt đầu học React, bạn cần tạo dự án bằng cách chạy gói create-react-app, gói này thiết lập mọi thứ bạn cần để chạy React.
Hướng dẫn tạo dự án React.js trên VS Code
Sau đó, sau khi quá trình kết thúc, mở src/app.js sẽ cho chúng ta thấy class React duy nhất trong toàn bộ ứng dụng:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;
Nếu bạn chưa từng tìm hiểu về ES6, bạn sẽ nghĩ rằng câu lệnh class này là một tính năng của React.
Nhưng đây thực sự là một tính năng mới của JavaScript trong phiên bản ES6.
Thế nên, đó là lý do tại sao học ES6 sẽ giúp bạn học React tốt hơn.
> Xem ngay: KHÓA HỌC REACT nếu bạn muốn nhanh chóng học để đi làm front end chuyên nghiệp. Hoặc tự học React nếu bạn có khả năng tự học tốt.
1. Class trong ES6
ES6 đã giới thiệu cú pháp class được sử dụng theo những cách tương tự như ngôn ngữ lập trình hướng đối tượng như Java hoặc Python.
Một class cơ bản trong ES6 sẽ trông như thế này:
// Class trong ES6
class Developer {
constructor(name){
this.name = name;
}
hello(){
return 'Xin chào, tôi là ' + this.name + '. Tôi muốn học React';
}
}
Tên class có thể được sử dụng để tạo các đối tượng mới. Phương thức constructor luôn được gọi trong quá trình khởi tạo đối tượng.
> Tìm hiểu thêm về Constructor trong JavaScript
Và bất kỳ tham số nào được truyền vào đối tượng sẽ được truyền vào đối tượng mới.
Ví dụ: Tạo đối tượng trong ES6 (Sử dụng class đã tạo ở trên)
// Tạo đối tượng mới
var ngocAnh = new Developer('Ngọc Anh');
// Gọi phương thức của đối tượng
ngocAnh.hello(); // Xin chào, tôi là Ngọc Anh. Tôi muốn học React
Trong một class, chúng ta có thể tạo ra các phương thức tùy theo yêu cầu cần thiết và trong trường hợp này, chúng ta có phương thức hello trả về một chuỗi.
Chúng ta cũng có thể tạo ra bao nhiêu đối tượng tùy thích.
1.1. Kế thừa class
Một class có thể mở rộng định nghĩa (extends) của một class khác và một đối tượng mới được khởi tạo từ lớp đó sẽ có tất cả các phương thức của cả hai class.
// Kế thừa class
class ReactDeveloper extends Developer {
installReact(){
return 'Cài đặt React... thành công!';
}
}
var ngocAnh = new ReactDeveloper('Ngọc Anh');
// Gọi phương thức của class cha
ngocAnh.hello(); // Xin chào, tôi là Ngọc Anh. Tôi muốn học React
// Gọi phương thức của class con
ngocAnh.installReact(); // Cài đặt React... thành công!
Class mở rộng một class khác thường được gọi là child class hoặc sub class, và lớp đang được mở rộng được gọi là parent class hoặc super class.
Một class con cũng có thể ghi đè (override) các phương thức được định nghĩa trong class cha, nghĩa là nó sẽ thay thế định nghĩa phương thức bằng phương thức mới được định nghĩa.
Ví dụ: Ghi đè phương thức hello()
// Kế thừa class
class ReactDeveloper extends Developer {
installReact(){
return 'Cài đặt React... thành công!';
}
// Override
hello() {
return 'Hi, tôi là ' + this.name + '. Tôi là React Developer';
}
}
var ngocAnh = new ReactDeveloper('Ngọc Anh');
// Gọi phương thức hello()
ngocAnh.hello(); // Hi, tôi là Ngọc Anh. Tôi là React Developer
Đó, như vậy là phương thức hello() đã bị ghi đè thành công.
1.2. Sử dụng Class trong React
Bây giờ bạn đã hiểu về class trong ES6 và kế thừa class, có nghĩa là bạn có thể hiểu class React được định nghĩa trong src/app.js.
Đây là một thành phần React, nhưng nó thực sự chỉ là một class ES6 bình thường kế thừa định nghĩa của React Component class, được import từ React package.
import React, { Component } from 'react';
class App extends Component {
// Nội dung class
render(){
return (
<h1>Xin chào React!</h1>
)
}
}
Đây là những bước cần thiết để cho phép bạn sử dụng phương thức render(), JSX, this.state, các phương thức khác (mà React cung cấp)
Tất cả các định nghĩa này đều nằm trong class Component. Nhưng như chúng ta sẽ thấy ở phần sau, class không phải là cách duy nhất để định nghĩa React component.
Nếu bạn không cần sử dụng state và lifecycle methods, bạn có thể sử dụng một function để thay thế.
2. Let và Const
Vì từ khóa var trong JavaScript khai báo biến trên toàn cục dẫn tới một số rắc rối, nên let và const đã được giới thiệu trong ES6 để giải quyết vấn đề đó.
> Đọc thêm: So sánh var, let, const trong JavaScript
Tất cả chúng đều được sử dụng để khai báo các biến. Sự khác biệt là const không thể thay đổi giá trị của nó sau khi khai báo, trong khi let có thể.
Cả hai cách khai báo này đều là cục bộ, có nghĩa là nếu bạn khai báo let bên trong một phạm vi hàm, bạn không thể gọi nó bên ngoài hàm.
// Const
const name = "Ngọc Anh";
// Let
let age = 18;
// Var
var occupation = "React Developer";
2.1. Khi nào sử dụng let và const?
Quy tắc chung khi làm dự án mà sử dụng JavaScript là khai báo biến bằng cách sử dụng const theo mặc định.
Sau này khi bạn viết ứng dụng, bạn sẽ nhận ra rằng giá trị của const cần phải thay đổi. Đó là lúc bạn quay lại cấu trúc biến const thành let.
Hy vọng rằng nó sẽ làm cho bạn quen với các từ khóa mới và bạn sẽ bắt đầu nhận ra giá trị của nó trong ứng dụng của mình, biết nơi nào cần sử dụng const hoặc let.
> Note: var là một tính năng ở thời kỳ đầu của JavaScript, nó chưa được tính toán đến hết các khả năng tối ưu. Và vì còn nhiều ứng dụng vẫn sử dụng nên để đảm bảo khả năng tương thích người ta chưa loại bỏ nó.
2.2. Khi nào sử dụng let và const trong React?
Sử dụng let và const bất cứ khi nào bạn khai báo biến trong React.
import React, { Component } from 'react';
class App extends Component {
// Nội dung class
render(){
const greeting = 'Xin chào React';
return (
<h1>{greeting}</h1>
)
}
}
Vì lời chào sẽ không thay đổi trong toàn bộ vòng đời ứng dụng, chúng ta xác định nó bằng cách sử dụng const.
3. Arrow Functions
Arrow Function là một tính năng mới của ES6 đã được sử dụng phổ biến trong các code base hiện đại vì nó làm cho code ngắn gọn và dễ đọc.
Tính năng Arrow function cho phép chúng ta viết các hàm bằng cú pháp ngắn hơn:
// Hàm thông thường
const testFunction = function() {
// code
}
// Arrow function
const testFunction = () => {
// code
}
Nếu bạn là một lập trình viên có kinh nghiệm với JS, việc chuyển từ cú pháp hàm thông thường sang cú pháp arrow function có thể không thoải mái cho lắm.
Khi mình tìm hiểu về arrow function, mình đã sử dụng 2 bước đơn giản này để viết lại các hàm:
-
Thêm biểu tượng mũi tên
=>
Dấu ngoặc đơn () vẫn được sử dụng để truyền tham số và nếu bạn chỉ có một tham số, bạn có thể bỏ qua dấu ngoặc đơn.
// Nhiều tham số
const testFunction = (firstName, lastName) => {
return firstName + ' ' + lastName;
}
// Một tham số
const singleParam1 = name => {
return name;
}
3.1. Implicit return
Bạn có thể viết arrow function của bạn chỉ trên một dòng, khi đó, nó có thể trả về các giá trị mà không cần phải sử dụng từ khóa return và dấu ngoặc nhọn {}
Ví dụ: Viết lại hàm singleParam1
const singleParam1 = name => name;
3.2. Sử dụng arrow function trong React
Một cách để tạo React component là sử dụng arrow function.
const HelloWorld = (props) => {
return <h1>{props.hello}</h1>;
}
Nó tương đương với một component với cú pháp class của ES6:
class HelloWorld extends Component {
render() {
return (
<h1>{props.hello}</h1>;
);
}
}
Trong React, code khá loạn bởi lẫn lộn giữa nhiều kiểu cú pháp, do đó, sử dụng arrow function giúp code ngắn gọn, dễ hiểu hơn.
Nhưng, sử dụng cách tạo component này nó cũng sẽ xóa việc sử dụng state khỏi component của bạn. Loại component này được gọi là stateless.
> Note: Trong phiên bản mới, nếu dùng thêm Hook thì có thể sử dụng state trong functional components nhé.
4. Destructuring assignment
Destructuring assignment là một trong những cú pháp mới hữu ích nhất được giới thiệu trong ES6.
Destructuring assignment (gọi là phép gán hủy cấu trúc hoặc tái cấu trúc) chỉ đơn giản là sao chép một phần của đối tượng hoặc mảng và đặt chúng vào các biến được đặt tên.
Ví dụ:
const developer = {
name: 'Ngọc Anh',
country: 'Vietnam',
developer: true,
age: 25,
}
// Tái cấu trúc đối tượng developer
const { name, country } = developer;
console.log(name); // Ngọc Anh
console.log(country); // Vietnam
console.log(developer); // trả về một object
Như bạn có thể thấy, chúng ta đã gán name và country từ đối tượng developer vào biến mới name và country.
Bây giờ nếu bạn muốn đặt name vào một biến mới có tên là ten?
Hãy làm như thế này:
const { name:ten } = developer;
console.log(ten); // Ngọc Anh
Destructuring Assignment cũng hoạt động trên các mảng, chỉ là nó sử dụng index thay vì các key như của đối tượng:
const numbers = [1, 2, 3, 4, 5];
const [one, two] = numbers;
console.log(one); // 1
console.log(two); // 2
Bạn có thể bỏ qua một số index khỏi cấu trúc bằng cách để trống với , :
const numbers = [1, 2, 3, 4, 5];
const [one, , three] = numbers;
console.log(one); // 1
console.log(three); // 3
4.1. Sử dụng trong React
Trong React, chủ yếu sử dụng destructuring assignement trong các phương thức, ví dụ:
reactFunction = () => {
const { name, email } = this.state;
};
Hoặc trong stateless component:
const HelloWorld = (props) => {
return <h1>{props.hello}</h1>;
}
Chúng ta cũng có thể cấu trúc lại tham số ngay lập tức:
const HelloWorld = ({ hello }) => {
return <h1>{hello}</h1>;
}
5. Map và Filter
Mặc dù hướng dẫn này tập trung vào ES6, các phương thức map và filter trong JavaScript cần được đề cập đến vì chúng có lẽ là một trong những tính năng ES5 được sử dụng nhiều nhất khi xây dựng ứng dụng React.
Hai phương thức này được sử dụng nhiều hơn trong việc xử lý dữ liệu.
Ví dụ: Hãy giả sử một lần tìm nạp từ kết quả API trả về một mảng dữ liệu JSON:
const users = [
{ name: 'Ngọc Anh', age: 18 },
{ name: 'Vũ Hà', age: 20 },
{ name: 'Hương', age: 21 },
];
Sau đó, chúng ta có thể hiển thị danh sách các mục trong React như sau:
import React, { Component } from 'react';
class App extends Component {
// Class body
render(){
const users = [
{ name: 'Ngọc Anh', age: 18 },
{ name: 'Vũ Hà', age: 20 },
{ name: 'Hương', age: 21 },
];
return (
<ul>
{users
.map(user => <li>{user.name}</li>)
}
</ul>
);
}
Hoặc, chúng ta có thể thêm filter() để lọc ra user có tuổi lớn hơn 18:
<ul>
{users
.filter(user => user.age > 18)
.map(user => <li>{user.name}</li>)
}
</ul>
6. ES6 Module
Hệ thống ES6 module cho phép JavaScript để import và export file. Hãy xem lại code src/app.js để giải thích khái niệm này.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;
Trên dòng đầu tiên của code, chúng ta thấy câu lệnh import:
import React, { Component } from 'react';
Và ở dòng cuối cùng, chúng ta thấy câu lệnh export default:
export default App;
Để hiểu những câu lệnh này, trước tiên hãy thảo luận về cú pháp module.
Module chỉ đơn giản là một file JavaScript xuất một hoặc nhiều giá trị (có thể là đối tượng, hàm hoặc biến) bằng cách sử dụng từ khóa export.
Đầu tiên, tạo một tệp mới có tên là use.js trong thư mục src
Sau đó viết một hàm bên trong nó. Đây là một bản export default:
export default function times(x) {
return x * x;
}
Hoặc export nhiều lần:
export function times(x) {
return x * x;
}
export function plusTwo(number) {
return number + 2;
}
Sau đó, chúng tôi sử dụng trong src/App.js bằng cách import nó:
import { times, plusTwo } from './util.js';
console.log(times(2)); // 4
console.log(plusTwo(3)); // 5
Bạn có thể có nhiều bản export được đặt tên cụ thể cho mỗi module nhưng chỉ có một bản export default.
Một bản export default có thể được import mà không cần sử dụng dấu ngoặc nhọn { } và tên hàm được export tương ứng:
// Trong util.js
export default function times(x) {
return x * x;
}
Và
// Trong app.js
import k from './util.js';
console.log(k(4)); // 16
Nhưng đối với các tệp export được đặt tên, bạn phải import bằng cách sử dụng dấu ngoặc nhọn { } và tên chính xác.
Ngoài ra, import có thể sử dụng bí danh để tránh trùng tên cho hai lần import khác nhau:
// Trong util.js
export function times(x) {
return x * x;
}
export function plusTwo(number) {
return number + 2;
}
Và
// Trong app.js
import { times as nhan2, plusTwo as cong2 } from './util.js';
Import từ tên tuyệt đối như:
import React from 'react';
Cách này sẽ kiểm tra trên node_modules để biết tên package tương ứng.
Vì thế, nếu bạn đang import một tệp cục bộ, đừng quên sử dụng đúng đường dẫn.
6.1. Sử dụng ES6 Module trong React
Rõ ràng là chúng ta đã thấy trong tệp src/App.js và sau đó trong tệp index.js nơi App component đã được export đang hiển thị.
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// Nếu bạn muốn ứng dụng của bạn làm việc offline và load nhanh hơn
// bạn có thể thay đổi unregister() thành register().
serviceWorker.unregister();
Lưu ý cách App được import từ thư mục ./App và phần mở rộng .js đã bị bỏ qua.
Chúng ta chỉ có thể loại bỏ phần mở rộng tệp khi import tệp JavaScript, nhưng đối với các tệp khác, chúng ta phải có phần mở rộng, chẳng hạn như .css.
Chúng ta cũng import một node module react-dom, cho phép chúng ta kết xuất (render) React component thành phần tử HTML.
Đối với PWA (Progressive Web App), đây là một tính năng để làm cho ứng dụng React hoạt động ngoại tuyến, nhưng vì nó bị tắt theo mặc định, nên bạn không cần phải tìm hiểu nó ngay từ đầu. Tốt hơn nên học PWA sau khi bạn đủ tự tin xây dựng giao diện người dùng với React.
Tổng kết
Trên đây là những kiến thức về JavaScript bạn cần hiểu rõ để bắt đầu học React.
Điểm hay là, React không thêm bất kỳ class trừu tượng ngoài nào lên trên JavaScript như các web framework khác (thế nên nó trở nên phổ biến trong cộng đồng Javascript).
Nó chỉ đơn giản là sử dụng JavaScript theo cách tốt nhất để xây dựng giao diện người dùng dễ dàng hơn và có thể bảo trì được khi dự án trở nên phức tạp hơn.
Thực sự thì bạn sẽ sử dụng JavaScript nhiều hơn là cú pháp đặc tả của React bên trong ứng dụng React, vì vậy một khi bạn hiểu JavaScript tốt hơn - đặc biệt là ES6 - bạn có thể tự tin viết ứng dụng React hơn.
Nhưng điều đấy không có nghĩa là bạn phải thành thạo mọi thứ về JavaScript để bắt đầu học viết ứng dụng React.
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0383.180086
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python