Hướng dẫn building components with javascript - xây dựng các thành phần bằng javascript
1. Giới thiệu về React1.1. React là gì?Nó là một thư viện JavaScript được thiết kế để tạo các single-page applications với các thành phần giao diện người dùng (UI) có thể tái sử dụng (Reusable). Show
1.2. React hoạt động như thế nào??React lưu trữ thông tin của DOM(Document Object Model – Mô hình đối tượng tài liệu) bằng cách tạo một DOM ảo (virtual DOM) trong bộ nhớ của nó. Trước khi render các DOM trên trình duyệt, nó sẽ kiểm tra các thay đổi giữa DOM ảo trong quá khứ và hiện tại. Nếu có thay đổi, nó sẽ cập nhật DOM ảo và sau đó hiển thị thành DOM thực trên trình duyệt. Xem sơ đồ bên dưới để hình dung. Vì các thao tác DOM có thể mất rất nhiều thời gian để load, React chỉ thay đổi các DOM node cần thay đổi. 2. Giới thiệu về JSXMột khái niệm rất quan trọng để học trong React là JSX. Nó là viết tắt của JavaScript XML. Nói một cách đơn giản, nó cho phép bạn viết React Code bằng HTML . Ví dụ: Hãy xem 2 block code sau (source):
Như bạn có thể thấy, việc sử dụng JSX cho phép chúng ta viết các phần tử HTML trong React dễ dàng hơn và nhanh hơn. 3. ReactDOM.render()Lưu ý rằng có một hàm: 0 ở cuối các block code ở trên. 0 là một hàm nhận 2 đối số: HTML code và HTML element (phần tử HTML).Trong React, node trên cùng được gọi là nốt (node) DOM gốc “root” , mọi thứ bên trong nó sẽ được quản lý bởi 2. Các ứng dụng đã xây dựng với React thường có duy nhất một nốt (node) DOM “gốc” (root).4. ComponentsComponents là một khái niệm của React App. Về cơ bản chúng là các hàm React trả về React elements từ đó hiển thị ra cho UI (giao diện người dùng). Components giúp phân chia các UI thành các phân nhỏ để dễ dàng quản lý và tái sử dụng. Trong React, tất cả các component này được cấu trúc như các node trong Virtual DOM. Sau đó, chúng sẽ hiển thị trên trình duyệt theo cách chúng ta chỉ định . Xem sơ đồ để hình dung. Có 2 loại component hiện tại trong React: Class Components và Functional Components. 4.1. Class ComponentsĐúng như tên gọi của nó, Class Components về cơ bản là các lớp (class) được viết trong ngữ cảnh của React. Cách khai báo này khá quen thuộc với những ai đã làm quen với lập trình hướng đối tượng (OOP)Class Components về cơ bản là các lớp (class) được viết trong ngữ cảnh của React. Cách khai báo này khá quen thuộc với những ai đã làm quen với lập trình hướng đối tượng (OOP) Một quy tắc trong cách đặt tên các component là PascalCase (viết hoa tất cả các chữ cái đầu). Hãy viết một Class Component "Ngôi nhà" với các bước như sau:
Tiếp theo, hãy tạo một lớp "Cửa" và biến nó thành một thành phần con của "Ngôi nhà" (vì cửa nằm trong nhà mà 😁😁😁). Đầu tiên, chúng ta tạo lớp "Cửa".
Sau đó, chúng ta thêm nó vào bên trong lớp "Ngôi nhà" để biến "Cửa" thành con của "Ngôi nhà".
Hình ảnh bên dưới cho thấy ứng dụng được hiển thị như thế nào trong trình duyệt. Tôi đã thêm các outline cho từng component để hiển thị chúng rõ ràng hơn. Bạn có thể thấy 2 component được hiển thị trên trình duyệt, với "Cửa" là component viền ngoài màu đỏ được hiển thị bên trong "Ngôi nhà" - component viền ngoài màu xanh lam. 4.2. Function Components (Stateless Component)Loại component khác mà chúng ta có thể viết trong React là các Function Component. Cũng giống như các Class Component, chúng trả về React element và tên của chúng tuân thủ PascalCase.Function Component. Cũng giống như các Class Component, chúng trả về React element và tên của chúng tuân thủ PascalCase. Hãy xây dựng cùng một class "Ngôi nhà" và "Cửa" như Class Components.
Lưu ý rằng đối với các function component, bạn không cần phải có hàm 6 trước câu lệnh return.Ban đầu function component được sử dụng để viết các component chỉ với mục đích kết xuất HTML. Với các component với theo hướng tiếp cận này thì bạn sẽ không can thiệp được vào lifecycle của component. Do đó nó thường được biết đến với tên gọi khác là Stateless Component.Stateless Component. 5. Props 7 là một từ viết ngắn gọn của "properties" - thuộc tính. Về cơ bản props là một đối tượng được truyền vào trong một component. 7 cho phép chúng ta giao tiếp giữa các components với nhau bằng cách truyền tham số qua lại giữa các components.Trở lại "Ngôi nhà" và "Cửa", giả sử chúng ta có nhiều "Cửa" bên trong "Ngôi nhà". Để làm điều đó, tôi sẽ gán cho mỗi "Cửa" một thuộc tính tiêu đề - 9 như sau:
Sau đó, trong component "Cửa", chúng ta có thể in ra 7 của nó như sau.
Kết quả: Bây giờ chúng ta có thể thêm rất nhiều thành phần "Cửa" bên trong "Ngôi nhà" và có tiêu đề để phân biệt chúng.
Kết quả sẽ như sau: Giống như các đối số đối với một hàm, các prop đối với component chỉ ở chế độ chỉ đọc. Một component không thể thay đổi giá trị của các prop được truyền vào. 6. StatesTrong React, 1 là một đối tượng để chứa dữ liệu hoặc thông tin về component. 1 có thể được thay đổi bất cứ khi nào mong muốn. Khác với props bạn có thể truyền props sang các components khác nhau thì state chỉ tồn tại trong phạm vi của components chứa nó (trừ khi bạn sử dụng một số công cụ quản lý state như Redux), mỗi khi state thay đổi thì components đó sẽ được render lại.Hãy thêm một số state vào "Ngôi nhà".
Trong đoạn code trên, chúng ta đã thêm đối tượng state trong hàm khởi tạo của lớp "Ngôi nhà". Sau đó trả về một phần tử HTML chứa thông tin về màu- 3 và số phòng- 4 của "Ngôi nhà".Kết quả sẽ là: 7. React Hooks cơ bảnTrong ví dụ trước, chúng ta đã tìm hiểu cách sử dụng các state trong Class Component "Ngôi nhà". Trong các Function Component, chúng ta có thể sử dụng React Hooks để quản lý các state.Class Component "Ngôi nhà". Trong các Function Component, chúng ta có thể sử dụng React Hooks để quản lý các state. 7.1. useState()Hook này cho phép các function component khởi tạo và cập nhật 1.Ví dụ: 0Chúng ta có 1 với giá trị khởi tạo ban đầu (initialStateValue) của 1 là "white". Hook trả về một mảng: giá trị của state (ở đây chính là 3) và hàm 9 của nó, hàm này được sử dụng để cập nhật trạng thái (ở đây là 0).Kết quả hiển thị của 1:Để xem giải thích chi tiết hơn về 2, vui lòng đọc bài viết này.7.2. useEffect()Hook hữu ích tiếp theo mà bạn sẽ gặp là 3. Nó thực hiện một logic bất cứ khi nào một 1 đã được thay đổi.Quay lại component "Ngôi nhà", chúng ta thêm một biến khác có tên là cửa - 5 để theo dõi ngôi nhà này có bao nhiêu cửa. Trong 2 Hook, khởi tạo nó thành 0.Sau đó, chúng ta thêm một button với sự kiện khi 7, sẽ tăng giá trị của 5 lên 1.Cuối cùng, chúng ta có một 3 sẽ in số lượng cửa trong nhà mỗi khi giá trị của cửa được cập nhật.Code sẽ như sau: 1Kết quả: Để xem giải thích chi tiết hơn về 3, vui lòng đọc bài viết này.8. Create React AppSau khi đã tìm hiểu các khái niệm cơ bản về React, chúng ta hãy tìm hiểu về cách để tạo ra một dự án React. Trước tiên, hãy đảm bảo rằng bạn đã cài đặt npm và Node.js trong máy của mình. Nếu không, hãy download tại đây Cách đơn giản nhất để tạo một React App là cài đặt 1 như sau: 2Sau đó, tạo React App bằng lệnh này: 3Điều hướng đến thư mục ứng dụng. 4Và chạy lệnh sau để khởi chạy ứng dụng trong localhost: 58.1. Cấu trúc thư mục React AppMột React App mới sẽ có cấu trúc thư mục sau. Chúng ta hãy lướt qua từng cái một.
Nếu bạn là người mới bắt đầu, hãy cố gắng tập trung vào tệp 0 trước. Chỉnh sửa code HTML của nó, thêm một số chức năng cơ bản và xem nó hoạt động như thế nào. Khi bạn đã quen thuộc hơn, bạn có thể thêm nhiều file dưới dạng component vào thư mục 8, như 4 cho Home component, Login.js cho Login component, v.v.8.2. StylingSau khi tạo một số function và component cơ bản trong React App, bạn sẽ tự hỏi làm thế nào customize và style cho ứng dụng cho nhu cầu của riêng mình. Trong React, có một số cách để thêm các custom style. Các cách phổ biến nhất là inline styling và import các module css. 8.2.1 Inline stylingNhư cái tên của nó, thêm style bên trong phần tử HTML. Ví dụ, hãy thêm một border như là một hàng rào cho "Ngôi nhà". Màu border phụ thuộc vào biến 3. 6Vì giá trị của 3 được khởi tạo là màu đỏ, ứng dụng sẽ hiển thị như sau:Ngoài ra, bạn có thể tạo một đối tượng 7 và truyền nó vào thuộc tính style như sau: 78.2.2. CSS modulesMột cách khác để tạo style là tạo file 8 và import file đó vào React Component. Ví dụ tạo file 9 như sau:: 8Sau đó, trong component "Ngôi nhà", hãy import file như bên dưới: 9Ứng dụng của chúng ta sẽ hiển thị như sau: 9. Tổng kếtTrên đây là một Cheat Sheet nhỏ dành cho người mới bắt đầu với React (như tôi chẳng hạn 😆). Vì đây chỉ là bài viết ngắn gọn nên nó sẽ không đề cập đến mức độ chi tiết từng khía cạnh của React, nhưng hy vọng nó là một phần giới thiệu hay ho để bất kỳ ai cũng có thể bắt đầu hành trình React một cách dễ dàng hơn. Cảm ơn bạn đã đọc và nếu thấy hữu ích, hãy bookmark hoặc share bài viết này để nhiều người được tiếp cận hơn. Love all Link tham khảohttps://lo-victoria.com/react-cheat-sheet-for-beginners https://reactjs.org/docs/hooks-intro.html |