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

Design Principles   Tailwind CSS không chỉ đơn thuần là một CSS framework – nó là bộ công cụ xây dựng giao diện người dùng với triết lý thiết kế hiện đại: nhanh, tinh gọn, và linh hoạt. Có rất nhiều nhân tố liên quan tới việc phát triển website và bởi vì Tailwind được tạo ra để đơn giản hóa toàn bộ quá trình đó, chúng ta sẽ chia nhỏ các khái niệm để dễ nắm bắt – và tận dụng tối đa tài nguyên mà Tailwind cung cấp Utility classes Events Responsive design Dark mode Re-usage of style Creating custom styles Function and directives Chúng ta sẽ đi sâu vào một trong những yếu tố quan trọng nhất trong thiết kế hiện đại: Responsive Design Responsive Design Tailwind CSS mặc định theo mobile-first – nghĩa là bạn viết class cho màn hình nhỏ trước, rồi thêm các biến thể lớn hơn bằng cách dùng prefix breakpoint như sm:, md:, lg:… Breakpoint name Min-width Equivalent Media query sm 640px @media (min-width: 640px) { // CSS Rul...