Nhật ký học tập

Giới thiệu Higher-order component (HOC) là một kỹ thuật nâng cao trong React được sử dụng trong việc sử dụng lại các component. HOCs không là một phần trong React API. Một cách cụ thể, một higher-order component là một hàm và nó nhận đối số là một component và trả về một component mới. A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React's compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component. Higher-Order Component Structure Để định nghĩa Higher-Order Component (HOC) trong React, bạn cần qua các bước: - Define HOC function: Hàm này nhận vào input là component (hoặc có thêm vài parameter khác) và trả về 1 component mới với thêm 1 số tinh năng mới. const higherFunction = (WrappedComponent) => { // ... } Định nghĩa new component const NewComponent = () => { return ( <

Giới thiệu React-Router là một thư viện định tuyến (routing) tiêu chuẩn trong React. Nó giữ cho giao diện của ứng dụng đồng bộ với URL trên trình duyệt. React-Router cho phép bạn định tuyến "luồng dữ liệu" (data flow ) trong ứng dụng của bạn một cách rõ ràng. Trong bài viết này, chúng ta sẽ hướng dẫn sử dụng React Router trong functional component, cung cấp một số ví dụ đơn giản về việc sử dụng Route, Link, Separate Routes, Nested Routes và Dynamic Routes. Cài đặt Cài đặt React Router bằng cách sử dụng npm hoặc yarn: npm install react-router-dom //or yarn add react-router-dom Import react-router-dom vào trong file App.tsx: import { BrowserRouter } from "react-router-dom"; Các thành phần chính Có 3 thành phần chính trong React Router: Routes, như là <BrowserRouter> và <HashRouter> Route Matchers, như là <Route> và <Switch> Navigation, như là <Link> , <NavLink> và <Redirect> Sử dụng Route React-Router cung cấp cho c

Bài này mang tính chất tổng hợp từ các nguồn khác nhau. Cấu trúc project my-app/ README.md node_modules/ package.json public/ index.html favicon.ico src/ common/ ... components/ common/ Link.js ... forms/ TextBox.js TextBox.container.js /* Container component */ TextBox.res/style.css TextBox.locale/vi-VN/... ... layout/ App.js - The top-level React component App.res/style.css App.locale/en-US/... Navigation.js Navigation.res/style.css Navigation.res/data.json Navigation.locale/en-US/... ... pages/ Home.js Home.css Account/index.js Account/index.css ... core/ ... constants/ ... helpers/ ... reducers/ ... stores/ ... Trong đó: common: Chứa các thành phần được sử dụng chung trong toàn bộ dự án. components: Chứa các thành phần

Giới thiệu React Hook Form là một thư viện quản lý form dành cho React, được phát triển bởi nhóm của Bluebill . Thư viện này tập trung vào hiệu suất và API tối giản, giúp cho các dự án nhẹ hoặc ưu tiên hiệu suất có thể sử dụng nó một cách dễ dàng. So với Formik, React Hook Form có kích thước nhỏ hơn gấp đôi và không có dependency. Điều này giúp cho việc sử dụng React Hook Form trở nên đơn giản và ít tốn tài nguyên hơn. Ngoài ra, React Hook Form cũng có khả năng xử lý hiệu quả các component của form, giúp tránh tình trạng re-render không cần thiết và tăng hiệu suất ứng dụng . Tuy nhiên, Formik lại cung cấp một hệ thống validation phong phú hơn, hỗ trợ xử lý lỗi và có một hệ sinh thái lớn hơn. Vì vậy, nếu bạn đang tìm kiếm một thư viện quản lý form đơn giản và hiệu suất cao, React Hook Form là một lựa chọn tốt. Nếu bạn muốn có một hệ thống validation phong phú và hỗ trợ xử lý lỗi tốt hơn, Formik là sự lựa chọn đáng cân nhắc Cài đặt Install package npm install react-hook-form // or yarn

Giới thiệu Axios là một HTTP client được viết dựa trên Promises được dùng để hỗ trợ cho việc xây dựng các ứng dụng API từ đơn giản đến phức tạp và có thể được sử dụng cả ở trình duyệt hay Node.js. Đặc điểm Axios Tạo XMLHttpRequests từ trình duyệt Thực hiện các http request từ node.js Hỗ trợ Promise API chặn request và response Chuyển đổi dữ liệu request và response Hủy requests Tự động chuyển đổi về dữ liệu JSON Hỗ trợ phía client để chống lại XSRF Cài đặt Cài đặt package npm install axios // or yarn add axios Import axios import axios from 'axios'; Ví dụ Get data Trong ví dụ này, chúng ta sẽ gọi 1 Http request để get data từ https://reqres.in/ Tạo component AxiosExample và thêm vào đoạn code sau: import axios from 'axios'; import { useEffect } from 'react'; const AxiosExample = () => { useEffect(() => { console.log("Component did mount"); axios.get('https://reqres.in/api/users?page=2') .then(

Yup là một thư viện JavaScript cho việc kiểm tra dữ liệu và xác thực dữ liệu trong ứng dụng React. Bạn có thể dùng Yup để thay thế cho propTypes Cài đặt npm install yup Validation Validate object đơn giản Trong ví dụ này, chúng ta đang xác thực rằng giá trị phải là một chuỗi và không được phép rỗng. import * as Yup from 'yup'; const schema = Yup.string().required(); const value = 'abc'; schema.validate(value).then(() => { console.log("Validate " + value + ' successfully'); }); Validate các giá trị phức tạp import * as yup from 'yup'; //... const schema = yup.object({ name: yup.string().required(), age: yup.number().min(18).max(60), }); const value = { name: 'John Doe', age: 16, }; schema.validate(value).then(() => { console.log("Validate " + value + ' successfully'); }).catch((validationErrors) => { validationErrors.errors.forEach((error: string) => { console.error(error); }); });; Valid

Để tạo sự tương tác trong ứng dụng React, bạn có thể sử dụng các công cụ và cơ chế mà React cung cấp. Dưới đây là một số khái niệm quan trọng và cách thực hiện sự tương tác trong React: State State (Trạng thái) là dữ liệu thay đổi trong ứng dụng của bạn mà React sẽ theo dõi và cập nhật. Bạn có thể sử dụng hook useState hoặc this.state (trong các lớp component) để quản lý trạng thái. Khi trạng thái thay đổi, React sẽ tự động cập nhật giao diện người dùng. Ví dụ import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increase</button> </div> ); } Trong đoạn mã trên, useState là một hook React được nhập từ thư viện React. Nó được sử dụng để tạo một biến trạng thái (count) và một hàm để cập nhật trạng thái đó (setCount). count là biến trạng thái lưu giữ giá trị hiện tại của số đếm. setCount

Proptypes là gì? Proptypes là một thư viện được cung cấp bởi React để giúp chúng ta xác thực các props được truyền vào component. Proptypes giúp chúng ta tránh được các lỗi do dữ liệu không hợp lệ gây ra, cải thiện tính ổn định và khả năng tái sử dụng của component. Ví dụ Trường hợp không sử dụng Proptypes Khi không sử dụng proptypes, chúng ta phải tự kiểm tra tính hợp lệ của props trong component. Điều này có thể gây ra các lỗi khó phát hiện, đặc biệt là trong các ứng dụng phức tạp. Ví dụ tạo một header component, chỉ nhận header value với chiều dài < 10 import React from 'react'; interface HeaderProps { name: string; } const Header: React.FC<HeaderProps> = ({ name }) => { if (name.length > 10) { console.error('Invalid header'); return <></> } return <h2>Hello, {name}!</h2>; }; export default Header; File app.tsx import reactLogo from './assets/react.svg' import viteLogo from '

Stateless và Stateful Trong React, thuật ngữ "stateless" và "stateful" thường được sử dụng để mô tả hai loại components dựa trên cách chúng quản lý dữ liệu và trạng thái. Stateful Components (Class Components) Stateful components, còn được gọi là class components, là các components có khả năng lưu trữ và quản lý trạng thái (state). Chúng thường được sử dụng khi cần theo dõi và cập nhật trạng thái của component trong quá trình render. Tham khảo: React: LifeCycle Hook - Day 7 Stateless Components (Functional Components) Stateless components, còn được gọi là functional components, là các components không có khả năng lưu trữ và quản lý trạng thái (state). Chúng là các hàm JavaScript đơn giản nhận props và trả về giao diện dựa trên props đó. Sự khác biệt chính giữa stateless và stateful components là khả năng quản lý trạng thái. Stateless components tốt cho việc hiển thị dữ liệu dựa trên props mà không cần quản lý trạng thái, trong khi stateful components phù hợp để quản

Để khai báo một function component kết hợp TypeScript trong React, bạn tạo file App.tsx, và thêm React.FC sau tên component.  FC là viết tắt cho Function Component, khi thêm : React.FC thì sẽ hiểu type của App chính là một Function Component của React Tạo file Greeting.tsx trong folder components: import React from 'react'; interface GreetingProps { name: string; } const Greeting: React.FC<GreetingProps> = ({ name }) => { return <h1>Hello, {name}!</h1>; }; export default Greeting; Ví dụ Button component interface ButtonProps { onClick: () => void; text: string; } const Button: React.FC<ButtonProps> = ({ onClick, text }) => { return <button onClick={onClick}>{text}</button>; }; Giải thích React.FC là viết tắt của Function Component của React ButtonProps là kiểu của các props được truyền vào component. React.FC<ButtonProps> = ({ onClick, text }): sử dụng cú pháp destructing để gán giá trị vào onClick() và text

Trong JavaScript truyền thống (ES5 và trước đó), khi bạn định nghĩa một hàm thông qua cách sử dụng từ khóa function, cách thức this hoạt động trong hàm đó sẽ gây ra một số khó khăn. Điều này liên quan đến cách ngữ cảnh (context) của this được xác định trong các hàm. Một trong những tình huống phổ biến là việc sử dụng hàm trong một sự kiện (event handler) hoặc trong một callback. Trong trường hợp này, giá trị của this thường sẽ tham chiếu đến đối tượng mà sự kiện được gọi hoặc đối tượng của ngữ cảnh bên ngoài callback đó. function printSong() { console.log("Oops - The Global Object"); } const jukebox = { songs: [{ title: "Wanna Be Startin' Somethin'", artist: "Michael Jackson", }, { title: "Superstar", artist: "Madonna", }, ], printSong: function(song) { console.log(song.title + " - " + song.artist); }, printSongs: f

LifeCycle Hooks để có thể thực hiện các hành động phù hợp với các giai đoạn khác nhau của một component trong reactjs.  Ví dụ: Bạn có thể gọi API, khởi tạo state, đăng ký event listener, v.v. khi component được mount vào DOM. Bạn có thể cập nhật lại DOM, gọi lại API, thay đổi state, v.v. khi component được cập nhật do props hoặc state thay đổi. Bạn có thể dọn dẹp tài nguyên, hủy bỏ event listener, v.v. khi component bị unmount khỏi DOM. LifeCycle Hooks giúp bạn kiểm soát được trạng thái và hành vi của component, tăng hiệu suất và trải nghiệm người dùng Có ba giai đoạn chính là mounting, updating và unmounting. Mỗi giai đoạn có những phương thức khác nhau, ví dụ như: Mounting: Đây là giai đoạn component được tạo ra và chèn vào DOM. Phương thức componentDidMount được gọi sau khi component được render lần đầu tiên. Bạn có thể sử dụng phương thức này để gọi API, xử lý DOM hoặc thiết lập trạng thái ban đầu. Updating: Đây là giai đoạn component được cập nhật khi có sự thay đổi về props hoặc

Trong TypeScript, import và export default là cách để chia sẻ mã giữa các file và các module trong ứng dụng. Đây là các tính năng cơ bản của ES6 (ECMAScript 6) và được TypeScript hỗ trợ hoàn toàn. ECMAScript 6 JavaScript ES6 (còn được gọi là ECMAScript 2015 hoặc ECMAScript 6) là phiên bản JavaScript mới hơn được giới thiệu vào năm 2015. ECMAScript là tiêu chuẩn mà ngôn ngữ lập trình JavaScript sử dụng. ECMAScript cung cấp đặc điểm kỹ thuật về cách thức hoạt động của ngôn ngữ lập trình JavaScript. Các tính năng mới như class, inherit, ... let và const để khai báo biến Arrow functions để viết các hàm ngắn gọn hơn Spread (…) operator để mở rộng một iterable thành các phần tử riêng lẻ For/of loop để lặp qua các giá trị của một đối tượng iterable Classes để định nghĩa các lớp Promises để xử lý bất đồng bộ Template literals để tạo chuỗi có thể chứa biểu thức let và const let và const dùng để khai báo biến.   let tương tự với var trong C#, tuy nhiên có 1 điểm khác biệt let age: number = 30

Trong bài viết trước, mình có hướng dẫn sử dụng React Bootstrap để xây dựng Component. Tham khảo:  React: Complex Componnet - Day 4 Vấn đề của Bootstrap DOM Manipulation: Bootstrap sử dụng DOM manipulation để thay đổi giao diện. Tuy nhiên, trong React, việc thay đổi trực tiếp DOM là không khuyến khích và có thể dẫn đến vấn đề hiệu năng và khó bảo trì. State Management: Bootstrap không cung cấp các công cụ state management tự động được tích hợp với React. Khi bạn sử dụng Bootstrap truyền thống với React, bạn phải tự quản lý trạng thái của các thành phần và đồng bộ hóa nó với các lớp CSS. JavaScript Dependencies: Bootstrap truyền thống yêu cầu sử dụng thư viện jQuery và các phiên bản Bootstrap mới hơn cũng yêu cầu Popper.js. Khi sử dụng với React, việc quản lý các phụ thuộc này có thể phức tạp và có thể gây ra xung đột với các thư viện React khác. React Bootstrap là gì? React Bootstrap là một phiên bản Bootstrap được tối ưu hóa cho việc sử dụng với React. Integrates with React Component

Trong bài trước, chúng ta sử dụng props để truyền data từ parent component tới component. Vấn đề đặt ra là làm sao chúng ta có thể tự cập nhật được data. Lúc này chúng ta sử dụng State State là gì? State dùng để lưu trữ giá trị thuộc về component trong ReactJS. Nó chủ yếu được sử dụng để cập nhật component khi người dùng thực hiện một số hành động như nhấp vào nút, nhập một số văn bản, nhấn một số phím, v.v. Tóm lại Là 1 object chứa component data Access bởi component Chỉ được update qua setState() Có 2 loại components trong React: class và functional components. Class components là ES6 class được extend từ built-in Component class, nên có state và lifecycle methods import { Component } from 'react'; class Message extends Component { constructor(props) { super(props); this.state = { message: '' }; } componentDidMount() { /* ... */ } render() { return <div>{this.state.message}</div>; } } Có một số lý do tại sao bạ

Giới thiệu Data driven trong ReactJS là một phương pháp thiết kế ứng dụng web bằng cách sử dụng dữ liệu để khởi tạo và điều khiển các thành phần UI. Theo cách này, dữ liệu được lưu trữ trong state và props của các thành phần, và được truyền qua lại giữa chúng để cập nhật giao diện. Khi có sự thay đổi trong dữ liệu, ReactJS cập nhật lại giao diện ứng dụng một cách tự động, giúp cho trải nghiệm người dùng trở nên tuyệt vời hơn. Tham khảo Sử dụng props Props là một khái niệm quan trọng trong ReactJS, được sử dụng để truyền dữ liệu từ một component cha sang một component con.  Props là viết tắt của properties, có nghĩa là thuộc tính. Props là một object được truyền vào trong một component, mỗi component sẽ nhận vào props và trả về react element. Props cho phép chúng ta giao tiếp giữa các component với nhau bằng cách truyền tham số qua lại giữa các component. Khi một component cha truyền cho component con một props thì component con chỉ có thể đọc và không có quyền chỉnh sửa nó bên phía