Nhật ký học tập

Stateless và Stateful Components trong React Trong React, các thuật ngữ "stateless" và "stateful" được sử dụng để mô tả cách một component xử lý dữ liệu và trạng thái: Stateless component là component không tự quản lý trạng thái nội bộ, thường chỉ nhận props và hiển thị dữ liệu dựa trên những gì được truyền vào. Chúng đơn giản, dễ kiểm soát và dễ kiểm thử. Stateful component là component có thể lưu trữ và thay đổi trạng thái bên trong, cho phép chúng phản hồi với các hành động của người dùng hoặc thay đổi dữ liệu theo thời gian. 📜 Trước và Sau React 16.8 Trước React 16.8, chỉ có class components mới có khả năng quản lý state và sử dụng các lifecycle methods như componentDidMount, componentDidUpdate, v.v. Vì vậy, "stateful component" thường đồng nghĩa với "class component". Từ React 16.8 trở đi, React giới thiệu Hooks như useState, useEffect, useReducer..., cho phép function components cũng có thể quản lý state và hiệu ứng phụ (side effects). Điề...

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

Một số link hữu ích: ASPNET-VideoStreaming FFmpeg - The Complete Guide Shaka player  

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

Application Insight là gì? Application Insights là một dịch vụ giám sát ứng dụng của Microsoft Azure cho phép bạn theo dõi hiệu suất, độ tin cậy và khả năng sử dụng của các ứng dụng web, máy chủ và IoT của mình. Application Insights là một phần của hệ sinh thái Azure Monitor. Application Insights telemetry data model Application Insights sử dụng một data model để tổ chức và lưu trữ dữ liệu thu thập được từ ứng dụng và hệ thống. Data model này giúp bạn hiểu rõ hơn về hiệu suất, sự cố và hoạt động của ứng dụng. Dưới đây là một số khái niệm cơ bản trong Application Insights telemetry data model Telemetry Telemetry là dữ liệu thu thập được từ ứng dụng hoặc hệ thống để theo dõi, giám sát và phân tích. Các dạng telemetry chính bao gồm: Request Telemetry: Theo dõi thông tin về các request đến ứng dụng. Dependency Telemetry: Theo dõi các yêu cầu đến các dịch vụ hoặc thành phần bên ngoài ứng dụng. Event Telemetry: Theo dõi các sự kiện tùy chỉnh mà bạn ghi lại. Exception Telemetry: Theo dõi các ...

Github: https://github.com/markmap/markmap Visualize your Markdown as mindmaps. This project is heavily inspired by dundalek's markmap . 👉 Try it out . 👉 Read the documentation for more detail.

Trong bài viết này, mình sẽ đưa ra 2 bài toán tương tự nhau, sử dụng Fluent Validation để validate cho bài toán đệ quy Tính giai thừa Ý tưởng cho việc sử dụng Fluent Validation để validate bài toán đệ quy là chia bài toán thành các bước con nhỏ, và áp dụng Fluent Validation để validate từng bước nhỏ này. Điều này giúp tách bài toán lớn thành những bài toán nhỏ hơn và dễ quản lý hơn. Giả sử chúng ta có hàm tính giai thừa Console.WriteLine("Please Enter a Number"); //read number from user var number =Convert.ToInt32(Console.ReadLine()); //invoke the static method var factorial = Factorial(number); //print the factorial result Console.WriteLine("factorial of"+number+"="+factorial.ToString()); public static int Factorial(int number) { if (number == 0) return 1; var factorial = 1; for (int i = number; i >= 1;i-- ) { factorial = factorial * i; } return factorial; } Luôn có 1 điểm bắt và có 1 hoặc nhiều điểm dừng trong bài toán đệ quy if (numb...

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

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

Giới thiệu Aspose.Words for .NET là một API xử lý tài liệu nâng cao để thực hiện một loạt các tác vụ quản lý và thao tác. API hỗ trợ tạo, sửa đổi, chuyển đổi, hiển thị và in các tệp mà không cần sử dụng Microsoft Word trực tiếp trong các ứng dụng đa nền tảng. Hơn nữa, API hỗ trợ tất cả các định dạng phổ biến cũng như cho phép xuất hoặc chuyển đổi các tệp Word sang các định dạng hình ảnh / đa phương tiện có bố cục cố định và được sử dụng phổ biến nhất. Cài đặt Cài đặt package Aspose.Words Install-Package Aspose.Words Tạo một file word đơn giản using Aspose.Words; var doc = new Document(); var builder = new DocumentBuilder(doc); builder.Writeln("Hello World!"); doc.Save("sample-document.docx"); Chép đè tập tin có sẵn

Mình có niềm đam mê với các video mang tính giáo dục cao, giúp mình mở rộng kiến thức và hiểu biết về thế giới xung quanh. Một ngày nọ, khi dạo quanh tiktok (nghe cũng lạ), mình phát hiện ra một số kênh rất hay và hấp dẫn, có hàng trăm video về các chủ đề đa dạng như lịch sử, khoa học, lẫn tôn giáo. Từ đó mình có ý định làm 1 trang note lại những bài viết hay liên kết với những video, dùng làm tư liệu học tập. Để thực hiện ý tưởng này, mình đã sử dụng ffmpeg - một công cụ mã nguồn mở cho phép chuyển đổi, mã hóa, lấy dữ liệu, phát trực tiếp các tập tin âm thanh và video. FFmpeg là gì? FFmpeg là một phần mềm xử lý audio, video đơn giản, miễn phí và hiệu quả nhất. FFmpeg là hoàn toàn miễn phí, mã nguồn mở. Do đó bạn hoàn toàn yên tâm sử dụng nó ở bất kì đầu mà không sợ vi phạm bản quyền. Sử dụng FFmpeg để xử lý audio, video - nghĩa là bạn phải sử dụng dòng lệnh thông qua Command line (cmd).  Để đơn giản hóa việc ứng dụng FFmpeg vào lập trình, Xabe.FFmpeg ra đời. Xabe.FFmpeg là một thư...