Tìm hiểu cơ bản về React trong 10 phút – phần 1

What và Why?

Bài viết này sẽ không trình bày chi tiết về what và why? Mặc dù bây giờ bạn nên biết rằng React là một thư viện JavaScript nhằm mục đích tạo giao diện người dùng và được sử dụng rộng rãi bởi các nền tảng mạng xã hội như Facebook và Instagram, ……

Nó nhanh, responsive, mô-đun, chúng ta có thể tạo các tệp sử dụng lại. Nó có thể mở rộng và linh hoạt. Nhiều lợi thế hơn nhưng chúng ta sẽ nhảy ngay vào một số khái niệm cơ bản.

Virtual DOM trong React là gì?

• DOM(Document Object Model) là các component giao diện người dùng, như các element, attribute(thuộc tính).
• Virtual DOM là danh sách cây node của component, có dung lượng nhẹ trong bộ nhớ của DOM thực.
• Phương thức render () trong react tạo ra nó.
• Mỗi khi dữ liệu cơ bản thay đổi, DOM virtual mới được tạo ra, so sánh sự khác biệt giữa các DOM virtual trước đó và chỉ những thay đổi được cập nhật trong DOM thực.
• Vì vậy, điều đặc biệt của ReactDOM.render () là nó chỉ cập nhật các phần tử DOM đã thay đổi. Aha !!!

JSX là gì?

• JavaScript extension, JSX không phải là JavaScript hợp lệ mà trình duyệt có thể đọc. Đó là một tệp JavaScript chứa mã JSX, rất giống với HTML và tệp phải được tuân thủ trước khi đến trình duyệt web, với JSX trình biên dịch có thể dịch JSX thành JavaScript.
• Element JXS được coi là biểu thức JavaScript, chúng có thể được lưu dưới dạng biến, được chuyển cho hàm hoặc được lưu trữ trong một đối tượng hoặc mảng.
• Mỗi biểu thức JSX phải có chính xác một phần tử ngoài cùng. Thường bao bọc biểu thức JSX trong một <div> </div>.
• Render element JSX có nghĩa là làm cho nó xuất hiện trên màn hình. Chúng ta hiển thị biểu thức JSX như sau:

import React from ‘react’;
import ReactDOM from ‘react-dom’;
ReactDOM.render(<h1>Hello</h1>, document.getElementById(‘app’));

• ReatDOM là thư viện javascript.
• Trong HTML, thông thường sử dụng class làm tên attribute nhưng trong JSX, chúng ta không thể sử dụng class. Thay vào đó, chúng ta phải sử dụng className. Bởi về class là từ dành riêng trong javaScript và JSX được chuyển đổi thành javaScript.
• Trong HTML, tùy chọn bao gồm dấu gạch chéo chuyển tiếp cho các thẻ tự đóng như br, img, input, v.v. nhưng không có trong JSX.
• Dấu ngoặc nhọn ‘{}’ là dấu hiệu báo hiệu sự bắt đầu và kết thúc của JavaScript:

ReactDOM.render(<h1>{2 + 3}</h1>, document.getElementById(‘app’));

• Các phép toán có điều kiện, if else và && khá giống nhau.
• Trình xử lý sự kiện giống như HTML.
• Ví dụ về Map:

const strings = [‘Jan’, ‘Feb’, ‘March’];
const listItems = strings.map(string => <li>{string}</li>);

• Ví dụ về keys

const listItems = strings.map((string,i) => <li key={‘ string_’+i}>{string}</li>);

• Không bắt buộc phải viết JSX, bạn có thể viết toàn bộ code trong React.createElement, nhưng tôi không khuyến khích điều đó.

Component React là gì ?

• Component là một đoạn code nhỏ có thể tái sử dụng, chịu trách nhiệm cho một công việc. Thông thường để render một số HTML.
• Chúng ta có thể sử dụng nhiều JSX trong một component
• Các biến và điều kiện phải nằm bên trong phương thức render.
• Đây là một ví dụ:

import React from ‘react’; // This object contains the React library
import ReactDOM from ‘react-dom’;
class MyComponentClass extends React.Component {
render() {
return <h1>Hello world</h1>;
}
}
ReactDOM.render(<MyComponentClass/>,document.getElementById(‘app’));

• ‘This’ đề cập đến đối tượng mà phương thức này enclosing
• Một ứng dụng React có thể chứa hàng chục, thậm chí hàng trăm component tương tác với nhau.
• Khi bạn import một biến từ một tệp không phải là tệp hiện tại, thì một import state là không đủ. Bạn cũng cần export, được viết trong tệp khác. Như ví dụ dưới đây:

import React from ‘react’;
export class NavBar extends React.Component {
render() {
return (
<h1>hello</h1>
);
}}

export có thể được thực hiện ngay từ đầu như hình trên hoặc kết thúc bằng cách sử dụng “export default className”

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import { NavBar } from ‘./NavBar.js’;
class ProfilePage extends React.Component {
render() {
return (
<div><NavBar/></div>
);
}}
ReactDOM.render(<ProfilePage/>,document.getElementById(‘app’));

Props là gì?

• Thông tin được chuyển từ component này sang component khác được gọi là ‘props‘.
• props của component là một đối tượng. Nó chứa thông tin về component đó. Để xem đối tượng props của component, bạn sử dụng biểu thức this.props như được hiển thị trong code bên dưới:

import React from ‘react’;
import ReactDOM from ‘react-dom’;
class Greeting extends React.Component {
render() {
return <h1>My name is {this.props.firstName}!</h1>;
}}
ReactDOM.render(<Greeting firstName=’Thanos’ />, document.getElementById(‘app’));

• Chúng ta có thể chuyển các props từ component này sang component khác. Render là cách duy nhất để component truyền props cho component khác. Đây là một ví dụ:

import React from ‘react’;
export class Greeting extends React.Component {
render() {
return <h1>My name is {this.props.name}!</h1>;
}}

Hãy import Greeting

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import {Greeting} from ‘./Greeting.js’;
class App extends React.Component {
render() {
return (
<div><Greeting name=”bahubali”/></div>
);
}}
ReactDOM.render(App />, document.getElementById(‘app’));

• Chuyển trình xử lý sự kiện như prop. Đây là một ví dụ:

import React from ‘react’;
export class Button extends React.Component {
render() {
return (
<button onClick={this.props.talk}> me! </button>
);
}}

Import class button

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import {Button} from ‘./Button’;
talk() {
alert(‘yaaayy!!!’);
}
class App extends React.Component {
render() {
return <Button talk={this.talk}/>;
}}
ReactDOM.render(Talker />, document.getElementById(‘app’));

• Đối tượng props của mọi component đều có một property được đặt tên là children, this.props.children sẽ trả về mọi thứ giữa các thẻ JSX mở và đóng của component

import React from ‘react’;
class BigButton extends React.Component {
render() {
console.log(this.props.children);
return <button>THIS IS BIG BUTTON HERE</button>;
}}
// Example 1
<BigButton>
I am a child of BigButton.
</BigButton>

• Nếu không ai chuyển bất kỳ văn bản nào cho component, thì hiển thị component sẽ trống. Sẽ tốt hơn nếu component có thể hiển thị thông báo mặc định thay thế. Đó là nơi mà defaultProps xuất hiện.

class Example extends React.Component {
render() {
return <h1>{this.props.text}</h1>;
}}
Example.defaultProps = { text: ‘yo’ };

Kết luận

Qua phần 1, bạn đã hiểu được những điều cơ bản của React. Hãy đón chờ phần 2 để hiểu rõ hơn về React.

Tham khảo thêm về React tại đây : Hướng dẫn tạo useFetch() React Hook

HocWeb VN

Bài viết này được sưu tầm và tổng hợp từ nhiều nguồn trên Internet.

Nếu có gì không hiểu thì inbox messenger bên dưới mình hỗ trợ thêm nhé.