Giới thiệu Chào mọi người. Hiện nay trong môi trường phát triển có rất nhiều công cụ giúp chúng ta có thể viết code nổi tiếng như Sublime, Atom, Visual Code và nhiều công cụ khác nữa nhưng có lẽ trong vài năm gần đây Visual Code đang nổi lên như 1 công cụ phổ biến mà rất nhiều người ban đầu từ dùng những công cụ khác cũng đã thử với Visual Code và dần thích nó. Hôm nay mình xin giới thiệu...
JavaScript CSS ReactJS visual code
Introduction Trong bài viết này chúng ta sẽ học cách sử dụng React datepicker trong ứng dụng React. Tìm hiểu từ cơ bản đến 1 trường hợp củ thề là hotel booking component sử dụng React-Datepicker. React-datepicker là một thư viện phổ biến nhất cho các dự án React, thư viện này hiện có khoảng trên 700.000 lượt donwload. Prequisities Trong hướng dẫn này bạn sẽ cần biết Javascript & React cơ bản. Bước...
ReactJS
Ở bài này, vì thời gian có hạn nên mình sẽ không giới thiệu lại Firebase là gì nữa và sẽ đi thẳng luôn vào việc làm thế nào để có thể deploy được ReactJs app lên Firebase một cách nhanh nhất. Chuẩn bị: Trước khi bắt đầu, hãy chắc chắn rằng bạn đã cài đặt 2 module create-react-app và firebase-tools Ở terminal, chạy 2 lệnh sau: npm i -g create-react-app npm i -g firebase-tools Tiếp theo, hãy chuẩn...
Happy New Year Firebase ReactJS
Trong bài chia sẻ lần trước mình có nói về một hooks là useMemo. Hôm nay mình sẽ giới thiệu thêm cho các bạn về một chút Advance Hooks trong React. Chúng mình cùng đi tìm hiểu nhé. useState import React, {useState} form 'react'; function Count() { const [count, setCount] = useState(0); return( <div> <p>Click {count}</> <button onClick={() => setCount(count + 1)}> Click me </button> <div> ) } Trên đây là một...
Happy New Year ReactJS
Trong dự án single page hầu hết chúng ta sẽ xử lý form cho vào hết store để tiện cho việc xử lý sau này, thường sẽ liên quan nhiều đến việc validate form, format lại định dang dữ liệu trước khi submit dữ liệu lên server. Mọi việc tưởng chừng rất đơn giản, nhưng khi QA log bug liên quan đến clear form data thì mọi việc trở nên phức tạp hơn rồi Các kiểu log bug của QA thường có 2 dạng, mình xin...
nextjs ReactJS FormData
Hello mọi người, đây là bài viết thứ 3 trong seri tìm hiểu về reactjs của mình. Trong bài viết trước mình đã giới thiệu sơ qua về State, Props và vòng đời của component, hôm nay chúng ta sẽ cùng tìm hiểu về cách handle event trong Reactjs nha. OK chúng ta bắt đầu ngay thôi nào Event Về cơ bản thì việc bắt các sự kiện trong React elements thì cũng tương tự như với việc bắt sự kiện trong DOM elements....
ReactJS Event
III. Memoization và React.memo. Nó là 1 kỹ thuật nó giúp mình tăng tốc, tốc độ xử lý máy tính lên bằng cách nó sẽ lưu trử lại cái dử liệu, kết quả của những lần tính toán trước đó, để những lần sau mình không cần phải tính toán lại nếu như chúng ta gặp lại bộ input củ. 1. Memoization là gì? "In computing, memoization or memoisation is an optimization technique used primarily to speed up computer...
Tips ReactJS React Native trick tip
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
Trong lập trình web ngày nay, Javascript đang trở nên phổ biến và đóng vai trò hết sức quan trọng. Với sự phát triển của công nghệ, có rất nhiều framework cũng như ngôn ngữ lập trình khác xuất hiện và khó để nắm bắt được hết. Mỗi framework cũng như ngôn ngữ lập trình lại có những công dụng khác nhau, trong đó React.js và Vue.js là phổ biến nhất. Tìm hiểu về React.js React được facebook...
JavaScript ReactJS VueJS Developer Virtual Dom
Nếu các bạn đã quen dùng React vào các bài tập, dự án của mình hoặc team, và thích khám phá những điều thú vị xung quanh React thì hôm nay mình xin giới thiệu đến các bạn 1 thư viện khá thú vị của React - React Speech Recognition Đầu tiên, mình sẽ bắt đầu với việc đó là gì và dùng để làm gì. Nếu bạn đã từng thử code gì đó có dính dáng tới các task liên quan đến speech-to-text hoặc...
ReactJS
Requirement Để tạo được một dự án mới dùng reactjs bạn cần phải có Node version >= 10.16 npm version >= 5.6 bạn có thể cài version mới nhất của node hiện tại (14.17.0) Create project npx create-react-app react-app cd react-app npm start Sau khi chạy npm start sẽ mở một tab hôm page như ảnh dưới Cấu trúc của project src/Index.js : react nó sẽ bắt đầu chạy từ trong file index.js này. src/ .css : những file có...
ReactJS May Fest basic reactjs create reactjs project
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
CSS Box-sizing Xin chào các bạn, hôm nay mình sẽ tìm hiểu về thuộc tính Box-sizing của css. Để hiểu rõ tính ứng dụng, cũng như tác dụng của nó khi thêm vào thì mình xin đưa ra một ví dụ như sau: Mình sẽ tạo 1 thẻ <div class="box">Đây là nội dung bài viết</div> Thêm luôn cho nó css: .box{ width: 100px; height: 100px; color: white; background-color: darkorchid; } Bây giờ mình muốn thêm...
Front-end CSS ReactJS SCSS Box-sizing
Hôm nay chúng ta cùng nhau tìm hiểu về HOC nhé Các thành phần bậc cao hơn là các hàm JavaScript được sử dụng để thêm các chức năng bổ sung vào thành phần hiện có. Các hàm này thuần túy, có nghĩa là chúng đang nhận dữ liệu và trả về các giá trị theo dữ liệu đó. Nếu dữ liệu thay đổi, các hàm bậc cao hơn sẽ được chạy lại với đầu vào dữ liệu khác nhau. Nếu chúng ta muốn cập nhật...
ReactJS
Trong bài trước Getting start với Redux Toolkit, chúng ta đã làm quên và làm demo về cách sử dụng cũng như cách hoạt động của Redux Toolkit rồi. Trong bài này, chúng ta sẽ tiếp tục tìm hiểu sâu hơn về cách làm việc với API, cách fetch API sẽ làm như thế nào. Usage Khi làm việc với API, chúng ta sẽ cần phải chờ đến khi API thực hiện xong, mới tiếp tục thao tác gì đó. Việc như thế này được gọi...
ReactJS redux toolkit
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
Ngày nay, có rát nhiều ứng dụng web cung cấp các tùy chọn xem PDF có sẵn cho người dùng của họ. Tuy nhiên, việc chọn một thư viện cho việc đps không phải là dễ dàng vì chúng ta sẽ cần nhiều hơn là chỉ mỗi hiển thị một tệp PDF Vì vậy, trong bài viết này, mình sẽ gợi ý 5 thư viện PDF Viewer cho React với các so sánh tính năng để giúp bạn chọn cái tốt nhất cho yêu cầu của mình 1....
ReactJS Libraries pdf
Đối với một web developer, nếu bạn muốn tìm kiếm một công việc có giờ giấc linh hoạt, được trả một mức lương cao, thì điều đó hết sức dễ dàng để biến thành sự thật. Tuy nhiên, cái khó ở chỗ là bạn cần phải xác định được đâu là những kỹ năng cần thiết và quan trọng để bạn tìm kiếm được một công việc phù hợp với nhu cầu mong muốn của bạn. Nếu bạn đang lên kế...
JavaScript ReactJS