🌞

# react

Những bí ẩn trong việc re-render trong React
Bạn có bao giờ bị bối rối như mình trong khi phát hiện component bị re-render, dù đã useMemo, useCallback, memo đủ kiểu. Hãy cùng tìm lời giải cho những ẩn số này.
Re-render trong React
Những pattern quan trọng giúp tránh re-render và những anti-pattern dẫn đến re-render không cần thiết
React Transition
Một tính năng mới trong React 18, cho phép chúng ta đánh giấu một thay đổi là transition
Sử dụng React-Query để fetch data
Một giải pháp để chúng ta có thể đơn giản hóa việc lưu trữ dữ liệu từ server và inject vào trong component dễ dàng
typeof của React element để làm gì?
Bài viết dành cho những bạn tò mò thích khám phá những gì diễn ra trong thế giới ngầm
Làm tính năng Theme trong React?
Sẽ có nhiều tiếp cận để làm theme cho trang web, mổ xẻ 2 cách phổ biến hiện nay trong React, chọn cách nào cho nó đơn giản nhưng mang lại hiệu quả cao
Hướng dẫn kỹ thuật FLIP animation với React
Nếu bạn là người làm animation có tâm, bạn không muốn animation làm ảnh hưởng đến tốc độ của ứng dụng, bạn cần biết đến FLIP animation
Hướng dẫn sử dụng useMemo trong React
Nếu bạn thấy app của mình bắt đầu chậm, đó là lúc bạn nên bắt đầu cân nhắc các phương pháp để tối ưu tốc độ và đọc bài viết này.
Mental model trong React
Nếu lập trình đủ lâu, bạn sẽ ít nhiều nghe đến khái niệm mental model, và nếu bạn đã và đang viết React, bạn càng thấy thuật ngữ này xuất hiện rất nhiều. Đây là một khái niệm không chỉ trong hữu dụng trong React, mà nó còn là chìa khóa để bạn tự tin khi làm việc với những thư viện như React.
Hướng dẫn viết unit test trong React
Một bài viết tổng hợp, sẽ cố gắng đề cập càng nhiều càng tốt các vấn đề có thể gặp khi đụng đến unit test với React.
useEffect từ a tới z
Đây là một bài viết tương đối dài dòng về useEffect, bạn cần biết và đã đọc qua tài liệu về useEffect trên trang chính thức của React trước, và nếu chỉ thực sự cần biết sử dụng useEffect ra sao, bạn không cần đọc bài viết phân tách mổ xẻ sâu kiểu này.
Sử dụng React Context như thế nào cho hiệu quả
Để có thể quản lý được state của ứng dụng một cách tốt nhất, chúng ta cần sự phân chia phù hợp giữa local state (internal state của component) và state cửa ứng dụng đặt trong React Context. Một vài điều muốn chia sẽ để nâng cao khả năng bảo trì và trải nghiệm nếu sử dụng đến context trong React.
Thiết đặt ESLint khi sử dụng với Javascript, Typescript, React
Chúng ta bắt đầu với Javascript trước, sau đó sẽ là TypeScript, và React. Mục tiêu là làm đúng, tránh trường hợp cài package không cần thiết hoặc copy/paste các config tới khi nó chạy được thì thôi.
Chỉ dẫn viết Redux sao cho chuẩn
Đây không phải là quan điểm cá nhân, bài viết được dịch thuật từ tài liệu chính thức của Redux
9 câu hỏi lắc léo về Promise
Vài câu hỏi Promise, ôn tập kiến thức cho bạn cần đi phỏng vấn
Cách viết React render props
Một trong những pattern để chúng ta có thể sử dụng lại logic
Làm sao để fetch dữ liệu bằng React Hook
Trong bài này chúng ta sẽ sử dụng React.useState, React.useEffect, React.useReducer để fetch dữ liệu từ API, đồng thời cũng viết một custom hook để có thể sử dụng ở bất kỳ đâu
Tại sao lại sinh ra React hook
Tại sao và lợi ích mà react hook đem lại là gì, mà thiên hạ cứ rần rần lên vậy?
Tại sao lại viết Super(props)
Bài cũ, dịch cũng lâu rồi, giờ mới đăng lên trang cá nhân của mình
Sử dụng React Hook Effect
Bài này mình contribute cho http://vi.reactjs.org về cách sử dụng React Hook Effect
Cách sử dụng ref trong React
Công dụng của ref là để truy cập đến DOM thật trong React, một vài tính huống sử dụng và dùng ref
Tạo React Boilerplate - Từ a tới z
Một ngày nào đó bạn ko muốn dùng create-react-app để khởi tạo project nữa, thì đây chính là bài hướng dẫn bạn cần đọc: setup một project từ a tới z mà không dùng create-react-app
Function Component khác Class component như thế nào trong React
Ngày xưa khi chưa có hook, thì rất dễ để trả lời câu này, nhưng từ ngày hook được sử dụng, câu hỏi lại này lại được đặt ra, ủa vậy 2 thằng nó khác nhau ở điểm nào.
Làm quen với React Hook bằng ví dụ
Chúng ta cùng bắt đầu học sử dụng React Hook, nó giải quyết vấn đề gì, sử dụng nó ra sao
this.setState trong React chạy như thế nào
Giải đáp thắc mắc vì sao this.setState có thể update DOM, chạy được trên mobile, chạy được trên bất kỳ môi trường nào
Em có muốn hỏi câu gì không?
Một câu bạn sẽ được hỏi trong lúc phỏng vấn, một cơ hội để bạn tìm hiểu về công ty, vậy nên hỏi những câu nào?
Hướng dẫn lazy load component trong React
Sự là hôm rồi đi phỏng vấn, được hỏi câu này mà mình đó giờ chưa làm nên không biết, nay có thời gian rảnh rỗi tìm hiểu, chia sẻ lại cho các bạn chưa biết.
Nâng cao tốc độ Component
Bài viết của team làm Facebook Ads chia sẽ, cùng điểm qua các vấn đề căn bản để tối ưu component
Xử lý tập dữ liệu lớn trong React
Tình huống: bạn có một table với rất nhiều dữ liệu đổ vào, nếu bạn thấy component đó render chậm trên màn hình, đó là lúc cần tái cấu trúc
Chỉ dẫn để thiết kế React Component
Tốt hơn, tốt nữa, tốt mãi, luôn là điều mình muốn, ngoài chuyện viết cho nó chạy đúng, viết thế nào tốt nhất nên là mục tiêu khi làm việc
Giới thiệu React Profiler
Từ version React 16.5 bổ sung thêm một plugin DevTool profiler. Plugin này được dùng để thu thập các thông tin về thời gian render một component, xác định nguyên nhân làm trì trệ performance.
Sử dụng Flow để check type trong React Redux
Chúng ta sẽ không nói nhiều cách sử dụng Redux trong bài này, các bạn có thể xem các bài trước, ở đây mình chỉ đi đến vấn đề đưa Flow vào để check type trong Redux
Làm toast notification system trong React/Redux
Có lẽ ko có ứng dụng web nào lại ko cần thông báo đến user kết quả của một thao tác nào đó, xây một notification system để sử dụng là hết sức cần thiết
Con đường để trở thành React developer ( phiên bản 2018)
Hướng dẫn, soi sáng cho các bạn muốn trở thành FrontEnd Developer. Nếu đã chọn FrontEnd làm nghiệp, React làm món ăn mỗi sáng, mà chưa biết cần học cái gì, hy vọng bài viết này sẽ có ích cho các bạn còn đang ko biết học cái gì
Tạo một animation cho component trong React
Sử dụng React, styled-components, react-flip-toolkit để tạo animation giống như mên trên trang chủ của Stripe
Giới thiệu RxJS và Redux Observer
Một middleware mạnh hơn redux-thunk, ít phức tạp hơn redux-saga. Chúng ta sẽ điểm qua những khái niệm chính để bắt đầu với middleware này
Tiếp tục luận bàn về cách tổ chức thư mục, đặt tên component trong React
Hổm đã viết về vấn đề này rồi, giờ lại viết tiếp, vì bản thân React cũng không ra bất cứ rule nào về việc này, bạn tự do tổ chức sao mà mình thấy hợp lý, bài trước là của tác giả đó thấy vậy là hay, bài này thì tác giả thích tổ chức thế này
Làm việc với CSS Modules trong React
Sau rất nhiều năm kiếm cơm với CSS, và hiện tại vẫn thế, CSS vẫn luôn là niềm hứng thú của cá nhân mình. Ngày nảy ngày nay để làm việc với Component của React, chúng ta sẽ có nhiều lựa chọn hơn khi 'CSS trong JS' đang là lựa chọn hàng đầu. Trong thời đại của component phủ sóng khắp các mặt trận, CSS Modules hứa hiện là món ngon
Giới thiệu React Portal
Tìm hiểu về Portals, bản hỗ trợ chính thức của react-dom
Cải thiện performance của React App
Trong bài này, chúng ta cùng đi qua các bước để fix những issue liên quan đến performance thường thấy.
Google Maps và React
Hướng Sử dụng google maps api trong React
Giới thiệu Expo, nhập môn React Native
Để bắt đầu với React Native, cách nhanh nhất không cần cài Android Studio, Xcode có ngay môi trường để chạy test React Native thì Expo chính là cái bạn cần
Query String với React Router
Cách sử dụng query string với React Router siêu căn bản
React Authentication với Amazon Cognito - Phần 2
Implement authentication 2 factor sử dụng React, React Router, Amazone Cognito, phần 2 tiếp tục với Routing và TOTP để có thể làm Google Authenticator.
Redux vận hành như thế nào
Actions, reducers, action creators, middleware, pure functions, immutability,... những ngoại ngữ làm rối bất kỳ ai nếu chưa biết redux
Giới thiệu Higher-Order Component trong React
Higher-Order Component (HOC) là kỹ thuật mà các bạn lập trình viên Việt Nam rất thích khi nhắc đến React, riêng mình thì không
Giới thiệu React Router v4 (react router dom)
Trước đây có bài giới thiệu về React Router rồi, nhưng giờ React Router 4 ra, gần như đập đi làm lại chứ ko kế thừa nhiều.
7 khái niệm JavaScript cần biết
Một vài khái niệm căn bản trong javascript cần nắm nếu bạn là frontend developer
Giới thiệu React Router
React không phải một framework, nó chỉ là một thư viện javascript, bởi vì vậy nó không thể giải quyết tất cả các yêu cầu một ứng dụng. Việc mà React làm rất tốt là tạo component và cách thức quản lý state của component, nhưng để tạo một Single Page App (sẽ viết tắt là SPA) phức tạp, nó cần những thư viện khác nữa, đầu tiên cần nhắc đến là React Router
Interview React Developer thì hỏi gì?
Một vài câu hỏi để kiểm tra mức độ am hiểu react của một lập trình viên frontend
Nắm vững 5 khái niệm sau, xem như master React
Sạo vậy thôi chứ làm gì mà trở thành master ngay lập tức được, lý lẽ bình thường muốn master bất cứ thứ gì cũng cần mồ hôi và nước mắt. Hiểu được 5 khái niệm được cho là căn cơ nhất này sẽ giúp bạn dễ xa lầy hơn.
Luu Binh An

VuiLapTrinh

Đời cho ta quá nhiều thứ, ta chưa cho đời được nhiều