Hello hello, hôm nay mình sẽ chia sẻ một số cách để làm tăng hiệu suất của React khi chúng ta sử dụng với MobX. Và nó hầu hết có thể áp dụng khi chúng ta sử dụng React, không phải dành riêng cho MobX nhé. Let's gooooooooooo!!!!!!! 1. Chia nhỏ các component (Use many small components) Observer components sẽ theo dõi tất cả các giá trị mà chúng sử dụng và tracking lại nếu bất kỳ giá trị nào trong số chúng thay...
Happy New Year React MobX
React-hook-form là một thư viện form tiện ích, dễ sử dụng và giúp validation form đơn giản hơn. Hãy cùng tìm hiểu cách sử dụng react-hook-form trong project như thế nào nhé. Cài đặt Với npm: npm i react-hook-form Nếu dùng yarn: yarn add react-hook-form Sau khi cài đặt xong, ta tạo một form đăng ký user với username, email, password để thực hành luôn nhé import React from "react"; const styles = { container: { ...
React react-hook-form form
Tối ưu hóa hiệu suất là một phần phát triển quan trọng mà mọi lập trình viên phải đối mặt Chúng ta không thể có một lượng người dùng lớn nếu như trang web của chúng ta xử lí các tác vụ một cách chậm chạp, hoặc là khi cố gắng điều hướng sang một trang khác trong ứng dụng, người dùng ngay lập tức nhận thấy thời gian tải cao. Tại thời điểm đó, chúng ta biết là cần phải bắt...
Happy New Year JavaScript React dynamic import code spliting
Tại sao nên sử dụng SWR? SWR là một thư viện React Hooks dùng trong việc fetch data. Cái tên SWR vốn có nguồn gốc từ stale-while-revalidate, tức là một chiến lược vô hiệu hoá cache được phổ biến bởi HTTP RFC 5861. Đầu tiên, SWR trả về một data từ cache (tức data cũ). Tiếp đó, gửi yêu cầu để fetch (xác nhận lại data) và cuối cùng là cập nhập lại data một lần nữa. Vậy hãy xem SWR sẽ giải...
React
Chào các bạn đã trở lại với series làm ứng dụng học toán đơn giản với React native của mình Đây là link app mà các bạn đang theo dõi :3 https://play.google.com/store/apps/details?id=com.bloodycotech001, vì 1 số lý do nên mình vẫn chưa update app kịp những gì có trong bài viết. Nếu các bạn có thời gian, có thể cho mình xin 1 đánh giá ( bao nhiêu sao cũng được) và 1 comment chân thành từ các bạn về app hoặc...
JavaScript Android React Mobile App React Native
React.js là một UI library khá nổi tiếng trong lập trình web, có hàng trăm hàng ngàn developer đang làm việc với React.js hàng ngày. Tất cả trong số đó chắc hẳn ai cũng rất quen thuộc hai khái niệm cơ bản của React là state và props. Thế nhưng liệu bạn đã thực sự hiểu cách mà React xử lý chúng? (ở đây mình chỉ nhắc đến Functional component) Nhắc lại một chút về 2 khái niệm trên. State là data...
JavaScript ReactJS React state props
1. Lint là gì? Lint là công cụ giúp chúng ta phân tích Code, từ đó đưa ra cho chúng ta những vấn đề đang gặp phải như không tuân thủ coding style, sai coding convention. Ngoài ra lint còn giúp chúng ta phát hiện các lỗi tiềm ẩn như gán biến chưa khai báo, khai báo biến không sử dụng, ... 2. ESlint là gì? ESlint là một linter (Công cụ review, tìm những lỗi lặt vặt trong cách viết code, đưa đề xuất cải...
React Frontent ESlint
useContext là gì? Chia sẻ state giữa các component là bài toán phổ biến trong React App. Giải pháp tốt nhất là bạn phải lifting state (đẩy state từ component con lên component cha). Nhưng nó yêu cầu bạn phải truyền props xuống cho các component con. Điều đó không phải là vấn đề quá lớn, nhưng trong một số trường hợp truyền props xuống quá nhiều cấp component lại rất khó khăn và tốn nhiều thời...
React redux useReducer useContext
Hello, Trong bài viết này mình sẽ giới thiệu một số nguồn opensource mà có lẽ bạn sẽ cần đọc nó. Mỗi một project trong danh sách này đều có những thứ bạn có thể học được. Mình sẽ chỉ giới thiệu một số ít thôi, phương châm của mình là đọc kỹ chứ không đọc qua loa, tràn lan. Mình cũng sẽ chỉ giới thiệu những nuồn nào mà mình đã trực tiếp nghiên cứu kỹ về nó, hoặc chí ít...
GitHub React May Fest OpenSource
Tailwind là một utility-first CSS framework. Khác so với các framework CSS khác như Bootstrap nó không đi kèm với các thành phần được xác định trước. Thay vào đó, Tailwind CSS hoạt động ở cấp độ thấp hơn và cung cấp cho bạn một tập hợp các class hổ trợ CSS. Bằng cách sử dụng class này bạn có thể nhanh chóng tạo thiết kế tùy chỉnh một cách dễ dàng. Tailwind CSS không những tạo ra các class có...
CSS React tailwind
Như đã biết Redux là thư viện dùng để quản lý state cho React. Nhưng để config redux vào react của mình thì khá phức tạp và mất nhiều thời gian, và code cũng cần viết nhiều. Để giải quyết các vấn đề này thì Redux Team đã tạo một package khác là Redux Toolkit. Sau khi generate project xong, nó đã có đầy đủ thư viện và config sẵn cũng như các helper để mình có thể dùng redux một cách hiệu qủa...
React redux redux toolkit
At the end of last year, the react dev team has introduced an exciting new technology called React Server Components (read here) However, this is still on testing phase and not production ready. Still, this will have a huge effect on how we design and write our react apps, so let's have some quick intro today. Server components allow developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server...
ReactJS React May Fest server components
Getting Started Throughout many years React has undergone many development and improvement. Since the release of version 16.8.0, hooks function was introduced and the React community has shift from class based to function based component, but most of the documents that we can find on the web still wrote in the class based style this can make it hard for developers to adapt to the new approach. In this article we will explore on how to migrate code that have written using class to function based...
es6 React May Fest
Trong react, việc quản lý các state qua lại giữa các component luôn là 1 vấn đề cần phải suy nghĩ khi thiết kế component. Việc sử dụng redux sẽ giúp quản lý global state của ứng dụng react, đây cũng là 1 kỹ thuật mà bất cứ lập trình viên nào muốn đi sâu vào react cần phải biết. Mình tiếp cận với redux trong react hook khá nhiều, hôm nay mình sẽ chia sẻ cách tiếp cận redux trong react hook (Mình sẽ...
ReactJS React
Mở đầu Trong khi thực hiện dự án, việc enable https là cần thiết để thực hiện 1 số chức năng cached, sw, web camera, ...nên nay mình giới thiệu 2 cách để thực hiện. Cách làm của mình đứng dưới góc nhìn của 1 dev frontend (ReactJS) nên cách làm còn chưa tốt, có bạn có gì góp ý mình thêm Bắt tay thực hiện: Có 2 cách 1> Https với create-react-app: a> khởi tạo dự án: Khởi tạo dự án mới và...
React https frontned
Viết code sạch và dễ đọc là một trong các yếu tố tiên quyết đảm bảo chất lượng code. Dễ dàng hơn nhiều so với việc test và đảm bảo performance. Vì thế không có lý do gì cho việc bỏ thêm một ít thời gian để refactor code dễ đọc hơn, clean hơn. Sau đây là một vài best practices để cải thiện code React tốt hơn. Đó là: Tận dụng event.target.name khi xử lý event Tránh sử dụng bind this thủ...
React
Chuyển đổi JSX là gì? Browsers không hiểu được mã JSX, vì vậy hầu hết người dùng React dựa vào trình biên dịch như Babel hoặc TypeScript để chuyển đổi mã JSX thành JavaScript thông thường. Nhiều bộ công cụ được cấu hình sẵn như Create React App hoặc Next.js cũng bao gồm một biến đổi JSX. Ở bản release React 17, đã có vài cải tiến đối với chuyển đổi JSX, nhưng không phá vỡ các thiết lập...
React jsx
Có lẽ không ai làm việc với React mà chưa từng tiếp xúc với React Hooks. Hooks xuất hiện giúp các developer làm mọi thứ đều trở nên dễ dàng hơn, từ việc giúp các dòng code trở nên sạch sẽ và dễ đọc hơn, cho đến việc maintain và tái sử dụng tốt như nào. Hiện nay khi Hooks ngày càng phát triển thì đồng nghĩa với việc có rất nhiều thư viện cung cấp Hooks phát triển. Chúng ta sẽ cùng tìm...
React
Today we will learn about a small react package to handle data fetching to make our life easier. React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze. Help you remove many lines of complicated and misunderstood code from your application and replace with just a handful of lines of React Query logic. Make your application more...
React react-query data fetching
Mở đầu Trong những website thông thường khi điều hướng từ page này sang page khác, chúng ta sẽ sử dụng thẻ <a> để làm điều đó, nhưng trong React JS thường được sử dụng để xây dựng nhữmg Single Page Application (SPA) khi chúng ta làm như vậy thì sẽ reloading lại toàn bộ page từ server, điều đó là không hiệu quả đối với 1 SPA. Thực chất SPA chỉ có 1 html page, nhưng bao gồm nhiều page views...
React spa react-router-dom
Development environment: Visual Studio 2022 Preview, .NET 6 , React 17. Create project Press F5 to run debug, result Write first custom middleware, with the presence of AI for Intelli Sense, AI suggesion works as I expected. Write CustomLogger.cs namespace ReactNET6 { public class CustomLogger { private readonly RequestDelegate _next; public CustomLogger(RequestDelegate next) { _next = next ?? throw new ArgumentNullException("next"); ...
React ASP.NET Core