Nhật ký học tập

Giới thiệu Thực ra phần này liên quan tới Backend nhiều hơn. Mình dùng .NET để Backend Server để gởi và nhận data từ browser. Ví dụ  Tạo Project Web API, sau đó bạn thêm package Swagger dotnet add package Swashbuckle.AspNetCore Cấu hình ASP.NET Core Bạn cần cấu hình dịch vụ trong file Program.cs: Bật CORS (Cross-Origin Resource Sharing) để cho phép frontend React gọi API. Cho phép phục vụ các Static Files (bao gồm ảnh đã upload). Cấu hình Swagger/OpenAPI. var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddControllers(); builder.Services.AddEndpointsApiExplorer(); builder.Services.AddSwaggerGen(); builder.Services.AddCors(options => { options.AddPolicy("AllowSpecificOrigin", policy => { policy.AllowAnyOrigin() .AllowAnyHeader() .AllowAnyMethod(); }); }); var app = builder.Build(); // Configure the HTTP request pipeline. app.UseHttpsRe...

Giới thiệu Giả sử bạn có form KYC, section Address Info sẽ được lặp lại nhiều lần khi người dùng bấm Add. Để quản lý dữ liệu Address phát sinh, chúng ta sử dụng useFieldArray Ví dụ Datatype và validation Chúng ta cần khai báo lại Data type và validation trường hợp Address là 1 array File types\formFields.ts //... export interface AddressInfoData { street: string; city: string; zipCode: string; country: string; } export interface ComplexFormData { userInfo: UserInfoData; addresses: AddressInfoData[];//address -> addresses } Định nghĩa lại validation\FormFieldSchema.ts import * as yup from 'yup'; const userInfoSchema = yup.object().shape({ firstName: yup.string() .required("Họ không được để trống.") .min(2, "Họ phải có ít nhất 2 ký tự."), lastName: yup.string() .required("Tên không được để trống.") .min(2, "Tên phải có ít nhất 2 ký tự."), email: yup.string() .email("Email không đúng định ...

Trong bài viết này, mình sẽ hướng dẫn tích hợp Yup vào form component. Thực sự không quá khó nếu bạn làm được ví dụ qua 2 bài viết trước. Yup là gì? 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 Tích Hợp Yup vào React Hook Form React Hook Form được thiết kế để hoạt động mượt mà với các thư viện schema validation như Yup thông qua các "resolver" npm install yup @hookform/resolvers Ví dụ File Structure src/ ├── types/ │ ├── formFields.ts # Defines the overall form data structure ├── validation/ │ └── formSchemas.ts # Yup validation schemas ├── components/ │ ├── DynamicForm.tsx # Main form component, integrates Yup │ ├── UserInfo.tsx # Child component for user information │ └── AddressInfo.tsx └── App.tsx Khai báo formSchema // src/validation/formSchemas.ts import * as yup from 'yup'; // Define schema for UserInfoData const userInfoSchema = yup.object().shape({ ...

Ý tưởng Trong thực tế, form không chỉ những thành phần riêng lẻ mà gồm nhiều thành phần, như form KYC gồm có thông tin cá nhân, địa chỉ, thông tin liên hệ, financial status, ... Lấy ví dụ như thông tin cá nhân, được dùng ở 2 page UserInfo cho officer xem và user xem (hoặc nhiều page khác). Để tái sử dụng, chúng ta tách form thành các thành phần để có thể tái sử dụng. Trong quá trình mình làm assignment, mình thấy có 2 cách tách form Cách 1: Khai báo props trong từng component con (vd như UserInfo.tsx, AddressInfo.tsx). Trong cách này, mỗi component con tự định nghĩa mảng fields của riêng nó (ví dụ: userInfoFields trong UserInfo.tsx, addressFields trong AddressInfo.tsx). Cách 2: Khai báo tất cả props trong một đối tượng duy nhất ở DynamicForm.tsx (Component cha). Trong cách này, DynamicForm.tsx (dựa trên vd part 1) khai báo biến fieldInfos chứa tất cả các định nghĩa trường trong một mảng fields lớn. Sau đó, fieldInfos sẽ filter các field này và truyền các element phù hợp xuống ...

Trong quá trình phát triển các ứng dụng web với ReactJs, việc xây dựng form là một tác vụ không thể tránh khỏi. Tuy nhiên, khi các form trở nên phức tạp với hàng chục field nhập liệu, việc "hardcode" từng <label> và <input> không chỉ tốn thời gian mà còn dẫn đến code lặp lại, khó đọc và khó bảo trì. Bài viết này sẽ hướng dẫn bạn cách xây dựng một Reusable Form Component, bằng cách tạo ra 1 form, nhưng tách nhiều thành phần trong form ra thành từng component khác nhau. Cấu trúc Project: src/ ├── types/ # Thư mục chứa các định nghĩa kiểu dữ liệu (TypeScript interfaces/types) │ └── formFields.ts ├── components/ # Thư mục chứa các UI component │ └── DynamicForm.tsx # Component chính của form động └── App.tsx Ví dụ Trong ví dụ này, mình xây dựng 1 form gồm 2 input là name với gender, với 1 form chính DynamicForm.tsx và 1 form Component (chứa 2 input). Submit button sẽ nằm ở trang Dynamic Form Định nghĩa Form fields...

Controller là gì và tại sao phải dùng tới nó? Trong React Hook Form, thông thường chúng ta sử dụng register để đăng ký các input thông thường như <input>, <textarea> hoặc <select>. Tuy nhiên, với các component phức tạp hơn từ các thư viện UI (ví dụ: Ant Design, Material-UI, React Select, v.v.) hoặc các thành phần tùy chỉnh mà không cung cấp thuộc tính ref để register có thể truy cập, Controller trở nên vô cùng hữu ích. Controller đóng vai trò là một "cầu nối", cho phép React Hook Form kiểm soát và quản lý trạng thái của các component này, bao gồm cả validation (kiểm tra hợp lệ) và giá trị của chúng. Các thành phần chính Các thành phần chính bao gồm: control, name, Controller, field, rules, render Controller Kết nối một component UI (HTML hoặc custom) với React Hook Form. control const { control } = useForm(); control là đối tượng quan trọng nhất được trả về từ useForm(). Nó chứa các phương thức và trạng thái cần thiết để Controller có thể tương tác với...

Giới thiệu Authentication (xác thực) là phần thiết yếu trong hầu hết các ứng dụng web – giúp kiểm soát ai có quyền truy cập vào nội dung gì. Trong bài này, mình sẽ hướng dẫn bạn cách triển khai hệ thống xác thực đơn giản trong React Setup Tailwind + Flowbite vào dự án React Gõ lệnh sau để tạo Project react-auth-app npm create vite@latest > npx > create-vite │ ◇ Project name: │ react-auth-app │ ◇ Select a framework: │ React │ ◇ Select a variant: │ TypeScript + SWC │ ◇ Scaffolding project in D:\Practices\ReactJs\react-auth-app... │ └ Done. Now run: cd react-auth-app npm install npm run dev > cd react-auth-app > npm install > npm install tailwindcss > npm install tailwindcss @tailwindcss/vite > npm install flowbite flowbite-react Nếu bạn sử dụng Tailwind 4 với Flowbite React thì cài đặt package sau: npx flowbite-react@latest init Tham khảo Get started with Tailwind CSS

Flowbite là gì? Flowbite là một thư viện UI components được xây dựng trên nền Tailwind CSS, giúp bạn dễ dàng tạo các thành phần UI như button, modal, dropdown... mà không cần viết nhiều CSS thủ công. Flowbite hỗ trợ tốt với React. Flowbite cung cấp sẵn các thành phần như: Nút bấm (Button) Hộp thoại (Modal) Accordion Thanh điều hướng (Navbar) Tab, Tooltip, Dropdown... Biểu mẫu (Form), Bảng dữ liệu (Table)...  Flowbite giống jQuery UI thời xưa? Nếu bạn từng dùng jQuery UI để bổ sung component cho jQuery (jquery kết hợp với CSS), thì Flowbite chính là phiên bản hiện đại tương tự cho Tailwind CSS.  Setup Đầu tiên, chúng ta tạo project ReactJs sử dụng Vite npm create vite@latest Need to install the following packages: create-vite@6.5.0 Ok to proceed? (y) y > npx > create-vite │ ◇ Project name: │ react-getting-started │ ◇ Select a framework: │ React │ ◇ Select a variant: │ TypeScript + SWC │ ◇ Scaffolding project in D:\Practices\ReactJs\react-getting-started... │ └ ...

Firebase là gì? Firebase là một nền tảng Backend-as-a-Service (BaaS) được phát triển ban đầu bởi Firebase Inc., và được Google mua lại vào năm 2014. Nói một cách đơn giản, Firebase cung cấp hạ tầng phía sau (backend) để bạn không cần phải tự cài đặt server, database, hay hệ thống xác thực. Nó cho phép bạn tập trung vào việc xây dựng frontend (giao diện) như React, Angular, hoặc ứng dụng mobile. Firebase cung cấp những dịch vụ: Authentication,Realtime Database,Cloud Firestore, Cloud Functions, Firebase Hosting, Cloud Storage,Analytics & Crashlytics Cách bắt đầu với Firebase Step 1: Đăng ký tài khoản Google nếu bạn chưa có.  Step 2: Tạo Firebase Project Truy cập https://console.firebase.google.com Nhấn "Add project" Đặt tên project (VD: my-react-app) Bật Google Analytics nếu muốn Nhấn Create Project Step 3: Tạo Realtime Database Trong Firebase Console → Mục bên trái chọn Build → Realtime Database-> “Create Database” Chọn vị trí (chọn Singapore) Chọn chế độ bảo mật: Start...

React: Up and Running - Day  React: Component- Day 2     React: Khai báo Function component Typescript - Day 2.1 React: Các công cụ lập trình - Day 3  React: Complex Component- Day 4 React: Complex Component với React Bootstrap- Day 4.1   React: ES 6, Import và Export - Day 4.2   React: ES 6 - Day 4.3   React: Data-Driven Component - Day 5   React: State trong ReactJs - Day 6   React: LifeCycle Hook - Day 7   React: React Hook - Day 7.1 React: Proptypes - Day 8   React: React Interactivity - Day 9   React: Yup - Day 10   React: Axios - Day 11   React: React Hook Form - Day 12   React: Cách tổ chức thư mục trong React Js - Day 13 React: React Router - Day 14   React: Higher-Order Component - Day 15  

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