Tự học React JS thời đại dịch Corona nCoV

React là gì ?

Đầu tiên, phải hiểu React là gì . Đó là một thư viện JavaScript để thao tác DOM xử lý điều hướng thông qua trạng thái HTML5. Nói một cách đơn giản, đó là thư viện sử dụng các component để thay đổi nội dung trên trang mà không cần refesh, nguyên tắc cốt lõi đằng sau các ứng dụng được Facebook phát triển vào năm 2013 và có thể được sử dụng cho các ứng dụng di động, web và VR. Lý do tại sao ngày nay nó trở nên phổ biến, là vì sự phát triển cộng đồng mạnh mẽ tạo ra các gói nguồn mở, cập nhật các tính năng mới và tuyệt vời.

Tại sao chúng ta nên sử dụng React

Nếu bạn là dev front-end, phải biết ít nhất 1 framework và React là framework đáng để học nhất

Các bạn mới biết đến lập trình thường mắc lỗi không hiểu rõ cách thức hoạt động khi sử dụng một framework bất kì dù là front-end hay back-end. Nếu bạn có kiến thức cơ bản về HTML và CSS, nắm bắt tốt các khái niệm JavaScript(như mảng, promise, callback, async, await, v.v.) và quen thuộc với thao tác DOM, thì bạn đã đủ kiến thức để tiếp cận ReactJS. Ngoài ra, kiến thức về các nguyên tắc cơ bản lập trình, làm quen với cú pháp, hiểu về lập trình chức năng và lập trình hướng đối tượng sẽ có ích trong khi học những điều này.

Những gì chúng ta xây dựng

Chúng ta sẽ tạo một ứng dụng danh sách việc cần làm đơn giản (to-do-list), nơi chúng ta có thể thêm và xóa các mục khỏi danh sách. Trong khi xây dựng ứng dụng này, chúng ta sẽ tìm hiểu về các trạng thái, thành phần, DOM, và một số khái niệm cơ bản khác về React.

Tổng quan To do list app React

Với To do list app cơ bản này, sẽ giúp bạn có thể hiểu rõ và tận dụng hết lợi thế của React.

Các component trong React

Trong React chia ứng dụng thành các component. Bạn có thể tưởng tượng các componet như một mảnh ghép của một khối. Hầu hết các framework front-end đều dựa trên component. Vì điều này mang lại cho chúng khả năng tái sử dụng lại các component theo module. Thanh điều hướng trong ứng dụng của bạn là một component, phân trang là component, trang liên hệ là component v.v. Chúng ta sẽ đi sâu vào vấn đề ở phần sau

Tạo ứng dụng React

Điều đầu tiên, hãy cài đặt npm và NodeJS. Hãy chắc chắn rằng bạn đã cài đặt phiên bản LTS mới nhất của Node và npm . Chúng ta sẽ sử dụng React CLI để khởi tạo project dễ dàng với các ứng dụng được cài đặt sẵn như webpack, Babel . Để cài đặt React CLI, vào terminal và gõ câu lệnh sau

npm install react.cli -g

Bây giờ chúng ta có thể sử dụng create-react-appđể tạo một project React mới

create-react-app todo-list

Bạn sẽ thấy project todo-listđã được tạo.

cd todo-list
npm start

Chúng ta cũng có thể sử dụng create-react-appmà không cần cài đặt. Đơn giản chỉ cần sử dụng lệnh sau

npx create-react-app todo-list
cd todo-list

Bây giờ chúng ta vào localhost: 3000 và thấy kết quả như sau

Cấu trúc file và thư mục

Trong Folder src gồm những file đã tạo. Màn hình hiển thị React được hiển thị thông qua file App.jsnơi chúng ta xuất ra logo.svg. Bây giờ chúng ta xóa App.css, App.test.js, logo.svg trên phần đầu của file App.js.

Hãy delete các phần code được tô sáng. Chúng ta không cần chúng nữa. Tương tự, xóa App.cssvà logo.svgtừ index.js. Bây giờ chúng ta đã thiết setup một project hoàn chỉnh

Bước đầu tiên của việc xây dựng bất kỳ app React nào là tưởng tượng cách bạn chia ứng dụng của mình thành các component nhỏ như thế nào. Mỗi ứng dụng React sẽ có ít nhất phải có file : App.js. App.jslà file dùng để chạy. Đây là thành phần kết xuất tất cả UI và cập nhật tất cả dữ liệu trên web.

Trạng thái(State) React

State trong React là dữ liệu động, tức là dữ liệu trên ứng dụng của chúng ta có thể thay đổi. Bạn có thể tưởng tượng state như một thùng chứa dữ liệu tạm thời cho component của bạn. Tất cả dữ liệu mà component truy xuất được lưu trữ bên trong state. Trong project này, state của component là danh sách tất cả các to-do mà chúng ta muốn hiển thị ở state trên UI.

Các loại component

Có hai loại component chủ yếu trong React: component container và các component UI. Component container dựa trên cú pháp trên class, chứa state và không liên quan đến UI. Component UI là các component không state nhận dữ liệu từ một component container và được sử dụng để thay đổi giao diện

Như vậy, component app của chúng ta là component container

Xuất (Rendering) HTML bằng cách sử dụng JSX

JSX là viết tắt của JavaScript XML và nó được hiểu đơn giản là HTML trong React. Trong React, chúng ta mã hóa mọi thứ bên trong component, bao gồm JavaScript và HTML. Hãy cùng xem ví dụ sau để dễ hiểu hơn:

import React from ‘react’;
  function App() {
        return (
         <div className=”App”>
           <h1>Hello World</h1>
        </div>
   );
 }
export default App;

Kết quả sẽ như sau:

Tôi đã sử dụng thẻ <h1> để xuất Hello World trên trình duyệt bên trong component. Hãy nhớ cách chúng ta đã setup rằng component app của chúng ta cần phải có state sẽ lưu trữ tất cả các to-do trên trang?

Tuy nhiên, trong đoạn code trên, bạn có thể thấy Appđã được sử dụng như một hàm(function). Điều này là do mặc định create-react-appsử dụng một component không state. Bây giờ chúng ta hình dung rằng app là component container chúng ta phải sử dụng nó như một class. Vì vậy, hãy thay đổi code và xem ý nghĩa từng dòng

import React,{ Component } from ‘react’;

Mọi component sẽ bắt đầu bằng việc import Reacttừ thư viện của nó để chúng ta có thể sử dụng mọi thứ đi kèm với nó. Tuy nhiên, vì chúng ta muốn component container , chúng ta sẽ import một mô-đun khác được gọi Componenttừ thư viện.

Tùy chỉnh component

export default class App extends Component{
}

Tiếp theo, chúng ta sẽ khai báo Component, và có thể sử dụng lại trong bất kì hoàn cảnh nào dễ dàng, tiện dụng hơn.

Bạn có thể hình dung đây là Appvới duy nhất một component để chạy app nhưng thực chất, có nhiều component được lồng bên trong nó.

export default class App extends Component{
  render(){
         return (
            <div className=”App”>
              <h1>Hello World</h1>
            </div>
            );
        }
  }

Mỗi component container sẽ có hai phần cơ bản: method render() và state của đối tượng (object) . Tất cả JSX của chúng ta được viết trong phần return của render().

Bạn có thể thấy JSX gần giống như HTML, với một số khác biệt rõ ràng: class trong HTML được thay thế bằng className, v.v. Một điều nữa: bắt buộc phải bọc JSX của bạn bên trong <div>, cho dù bạn có cần <div> hay không.

Đến đây bạn đã biết cách tạo ra một component, cả function và container, chúng ta biết sự khác biệt giữa chúng, nhưng hơi mơ hồ về state – nó là gì và nó được sử dụng để làm gì. Hãy xem tiếp đoạn sau:

Flow của app và cấu trúc component

Hơi khó hiểu, nhưng hiện tại bạn chỉ cần hiểu cấu trúc component của app React.

Chúng ta sẽ sử dụng một component todos (component UI) hiển thị tất cả các to-do trên trang.
Chúng ta cũng có thể sử dụng component này để xóa bất kỳ to-do nào khỏi trang.
Lưu trữ tất cả to-do ở state của componentvà một component sẽ được sử dụng để thêm nhiều to-do trên trang.
Component lưu trữ công việc mới được thêm vào ở state.
Chúng ta sẽ update state của component bằng cách thêm “công việc mới” này vào component và chuyển giá trị của state mới được cập nhật lại cho component.

Kết luận

Bạn đã hiểu rõ phần nào cách hoạt động của React. Muốn hiểu rõ hơn về React hãy đến với phần 2, chúng ta sẽ tạo một app hoàn chỉnh

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é.