Bài viết được sự cho phép bởi tác giả Sơn Dương Để học React, bạn có rất nhiều cách như: học qua tài liệu chính chủ, học qua sách, video., khóa học online/offline… Với ReactJS, một trong những cách được ưu chuộng là học qua các dự án ví dụ thực tế. Khi đọc mã nguồn của một dự án, bạn sẽ tìm ra nguyên tắc và phương pháp của tác giải để giải quyết một vấn đề. Điều này sẽ giúp bạn học được kỹ năng phân tích và giài quyết vấn đề trong các dự án thực tế. Bài viết này, mình sẽ giới thiệu 10 dự án ReactJS để bạn tìm hiểu. Nhưng trước khi đọc, bạn đến tìm hiểu cơ bản trước về React. Ít nhất bạn cũng nên biết trước về cú pháp React, states, props, component.v.v… Phương pháp học React qua dự án thực tế Nếu chỉ đơn giản bạn clone một dự án trên github về, bạ [...]

Bài viết được sự cho phép của tác giả Thầy Long Web Các kiểu dữ liệu trong TypeScript trình bày các kiểu dữ liệu dùng trong TypeScript, bao gồm các liểu dữ liệu cơ bản và các kiểu bổ sung. Kiểu dữ liệu là gì? Trong lập trình, rất cần có chỗ để lưu các giá trị dùng cho lưu trữ và xử lý. Mỗi nơi lưu trữ này là biến, hằng. Các giá trị trong biến, hằng được xác định thuộc loại nào đó để sử dụng đúng trong các toán tử xử lý. Ví dụ kiểu dữ liệu number (số), kiểu chuỗi (string),… Kiểu chuỗi thì có thể biến thành chữ hoa, kiểu số thì có thể dùng trong các toán tử ++, –… TypeScript có nhiều kiểu dữ liệu phục vụ cho nhiều tính toán rất tốt như boolean, number, string, tuple, array, any… và nhiều kiểu nâng cao khác. Khai báo biến trong typeScript Để khai báo biến trong TypeScript, dùng từ khóa var , let hoặc const. Ví dụ var tenbh = 'Hã [...]

Bài viết được sự cho phép của tác giả Duy Phan Là developer, chúng ta luôn tìm cách để tiết kiệm thời gian cho các dự án của mình. Đó là lý do tại sao các thư viện được tạo ra để giảm bớt các khó khăn khi triển khai những thứ lặp đi lặp lại. Với các frontend framework như React, việc chia sẻ chức năng chung cho các dự án khác nhau trở nên dễ dàng hơn bao giờ hết. Trong bài viết này, mình sẽ hướng dẫn bạn một số thư viện Date Pickers mà mình thấy thực sự hữu ích. Lưu ý rằng chúng ta sẽ chỉ xem qua các thư viện đã được cập nhật gần đây. Điều này nhằm đảm bảo chúng sẽ hoạt động trơn tru trên dự án của bạn mà không phải tốn quá nhiều thời gian giải quyết các vấn đề. Material UI Date/Time picker Nếu bạn đang sử dụng Material UI làm theme chính trong dự án của mì [...]

Angular và React là hai công nghệ phổ biến được sử dụng để xây dựng ứng dụng Web phía Frontend, cả hai đều có những tính năng tương đồng cung cấp cho các nhà phát triển một sự lựa chọn đáng giá để xây dựng dự án Web của mình. Bài viết hôm nay chúng ta cùng nhau so sánh giữa Angular và ReactJS xem bạn sẽ quyết định lựa chọn công nghệ nào cho dự án tiếp theo của mình nhé. Tổng quan về Angular và ReactJS Angular được phát triển bởi Google từ năm 2016, nó là bản thiết kế lại hoàn toàn khác với AngularJS (còn được gọi là Angular 1.0 ra mắt từ năm 2010). ReactJS được Facebook (hiện nay là Meta) phát hành và sử dụng từ năm 2013. Cả 2 nền tảng này ngay từ khi ra mắt đã cho thấy nhiều ưu điểm vượt trội cho việc xây dựng ứng dụng đơn trang (Single Page Application) và được đông đảo lập trình viên Frontend lựa chọn làm công nghệ cho dự án [...]

Bài viết được sự cho phép của tác giả Bùi Thị Huyền Một trong những điều quan trọng nhất cần hiểu về React là về cơ bản nó là JavaScript. Điều này có nghĩa là bạn càng giỏi JavaScript thì bạn càng thành công với React. Hãy chia nhỏ 7 khái niệm cơ bản mà bạn nên biết về JavaScript để thành thạo React. Và khi tôi nói những khái niệm này là cần thiết, ý tôi là chúng được sử dụng trong mọi ứng dụng đơn lẻ mà một nhà phát triển React tạo ra, với rất ít hoặc không có ngoại lệ. Học những khái niệm này là một trong những điều quý giá nhất mà bạn có thể làm để tăng tốc khả năng tạo dự án React và trở thành một nhà phát triển React lành nghề, vì vậy hãy bắt đầu. 1. Khai báo hàm và Arrow Functions Cơ sở của bất kỳ ứng dụng React nào là thành phần. Trong React, [...]

Việc tổ chức, sắp xếp các files, thư mục trong một dự án React là vô cùng quan trọng, nó đảm bảo sự thống nhất khi làm việc nhóm, dễ dàng mở rộng, bảo trì source code. Với các bạn chưa có nhiều kinh nghiệm lập trình thì việc đặt tên thư mục, bố trí các cấp bậc folder là điều không dễ dàng; vì thế trong bài viết hôm nay, mình sẽ chia sẻ một vài kinh nghiệm về cách cấu trúc thư mục trong một dự án React để giúp bạn giải quyết vấn đề trên nhé. Cấu trúc 1: Nhóm theo loại file Đối với các dự án vừa và nhỏ, việc đơn giản nhất để bố trí các files vào folders là cách chia chúng theo loại file. Ví dụ như chúng ta có thể để chung các custom hooks vào 1 folder, các React components vào 1 folder khác, … Cách phân chia này tạo ra sự đơn giản và dễ dàng tìm kiếm file bạn cần; đương nhiê [...]

ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook để tạo giao diện người dùng (UI) động và hiệu quả. Nó đã trở thành một trong những công nghệ phổ biến nhất trong việc phát triển các ứng dụng web hiện đại. Một trong những điểm mạnh chính của ReactJS là hệ thống plugin phong phú của nó. Các plugin này mở rộng khả năng của ReactJS bằng cách cung cấp các tính năng và chức năng bổ sung. Trong bài viết này, chúng ta sẽ khám phá 10 plugin tốt nhất cho ReactJS được các lập trình viên yêu thích hiện nay. ReactJS plugin là gì? Trước khi đi vào danh sách các plugin tốt nhất cho ReactJS, chúng ta cần hiểu rõ về khái niệm "plugin" trong ngữ cảnh của ReactJS. Theo định nghĩa, plugin là một phần mở rộng của mã nguồn mà có thể được tích hợp vào một ứng dụng hoặc framework để cung cấp các tính nă [...]

Bài viết được sự cho phép của tác giả Tống Xuân Hoài Vấn đề Angular, React, Vue, Svelte (A, R, V, S)… là những cái tên mà không quá xa lạ với bạn đọc. Có lẽ mọi người sẽ ngạc nhiên hơn khi nhắc đến một nhân vật như là jQuery- một tượng đài già cỗi, đã lặng lẽ nhường ngôi cho các thanh niên trẻ bấy giờ. Nếu chịu khó tìm hiểu, cuộc đọ sức giữa các tên này không bao giờ hạ nhiệt. Rất nhiều bài viết phân tích cũng như so sánh chúng với nhau. Rằng A có cấu trúc rất chặt chẽ, R rất mạnh mẽ, nhưng V lại cho khả năng phát triển với tốc độ tuyệt vời. Còn S, một cái tên sinh sau đẻ muộn nhưng lại đang thể hiện ưu thế rất lớn khi kết hợp cả hai Back-end và Front-end làm một. Vâng! Trông nó giống như PHP, nhưng lại là… JavaScript. Có rất nhiề [...]

Trong thế giới phát triển web đầy sôi động, reactjs nổi lên như một thư viện JavaScript phổ biến giúp xây dựng các ứng dụng web giao diện người dùng liền mạch và tương tác. Khi nói đến việc tạo kiểu cho các ứng dụng ReactJS, CSS đóng một vai trò quan trọng trong việc xác định giao diện trực quan và khả năng sử dụng tổng thể. Hiểu được cách tích hợp và tối ưu hóa CSS trong ReactJS là điều cần thiết để tạo ra các ứng dụng hiệu quả cao, hấp dẫn về mặt thẩm mỹ. CSS trong ReactJS CSS (Cascading Style Sheets) là một ngôn ngữ tạo kiểu được sử dụng để định nghĩa giao diện trực quan của trang web. Ngôn ngữ này giúp kiểm soát các khía cạnh như màu sắc, kiểu chữ, bố cục và hành vi đáp ứng, tạo ra sự thống nhất và tăng cường khả năng bảo trì trong quá trình phát triển. Vì vậy, việ [...]

Bài viết được sự cho phép của tác giả Sơn Dương Câu chuyện khởi nghiệp luôn bắt đầu bằng vấn đề tài chính – thứ gây đau đầu nhất. Đặc biệt các bạn công nghệ khi muốn khởi nghiệp, việc lựa chọn công nghệ để tối ưu chi phí phát triển và maintainance rất quan trọng. Bài viết này mình sẽ chia sẻ với các bạn một góc nhìn về những lựa chọn khi phát triển ứng dụng mobile, giải pháp cho lập trình mobile đa nền tảng: chọn lập trình React native hay Ionic? Những lựa chọn này sẽ ảnh hưởng trực tiếp đến nhân lực, kinh phí và thời gian của bạn trong tương lai. #1. Dùng Hybrid hay Native? React Native hay Ionic? Chắc hẳn khi bắt đầu dự án thì trong đầu bạn sẽ có nhiều câu hỏi đại loại như thế đúng không? Trong bài viết này, mình sẽ cố gắng tìm câu trả lời cho từng [...]

Angular và React là hai công nghệ được nhiều anh em lập trình Frontend quan tâm, lựa chọn làm định hướng sự nghiệp. Mặc dù đều là những framework/thư viện JavaScript nhưng cách phát triển, xây dựng ứng dụng giữa 2 nền tảng này có sự khác nhau lớn; vì vậy việc lựa chọn theo một hướng ngay từ đầu là điều quan trọng đối với lập trình viên. Bài viết hôm nay chúng ta cùng nhau đi tìm hiểu về 2 công nghệ này để giúp bạn có thể trả lời câu hỏi rằng nên học Angular hay React nhé. Tổng quan về 2 nền tảng ReactJS là một thư viện JavaScript mã nguồn mở được Facebook giới thiệu từ 2013 dành cho việc xây dựng và phát triển giao diện người dùng. Angular là một framework JS được viết bằng TypeScript mà Google phát hành/ nâng cấp vào năm 2016 (phân biệt với bản AngularJS ra đời từ 2009). Angular là 1 phần của MEAN stack (ngăn [...]

Lộ trình học React Native như nào là câu hỏi nhiều anh em newbie khi bước chân vào build app với React Native cần biết. Nắm bắt được nhu cầu đó, tui xin mạn phép viết bài viết này giúp anh em từng bước tiếp cận React Native theo cách đơn giản nhất có thể. Okie, bắt đầu thôi nào! 1. Cài đặt môi trường các kiểu Xin lỗi anh em nếu phần đầu tiên mới chỉ đề cập tới môi trường, cài đặt, ngôn ngữ các kiểu. Nhưng dành cho một số anh em mới, việc thiết lập môi trường, cài đặt hay sử dụng IDE nào cũng khá quan trọng. Nên lướt qua, hoặc nói đúng hơn là liệt kê ra đây cho anh em biết 1.1 Cài đặt môi trường iOS Dưới đây liệt kê các bài viết hướng dẫn thiết lập môi trường iOS  Setting up the environment development - các bước giúp anh em thiết lập môi trườ [...]

Trong thời đại công nghệ số, mobile app đóng vai trò ngày càng quan trọng khi giải quyết được nhiều vấn đề của người dùng. Để đáp ứng nhu cầu ngày càng cao của người dùng, các nhà phát triển ứng dụng di động phải tìm ra giải pháp tối ưu để phát triển ứng dụng trên cả hai nền tảng iOS và Android. React Native là một giải pháp được nhiều người lựa chọn hiện nay. Vậy React Native là gì? Hãy cùng tìm hiểu trong bài viết này. React Native là gì? React Native là một framework phát triển ứng dụng di động đa nền tảng (cross-platform) được phát triển bởi Facebook. Nó cho phép bạn xây dựng ứng dụng di động cho cả nền tảng iOS và Android bằng việc sử dụng JavaScript. React Native sử dụng một ngôn ngữ và mô hình phát triển chung để xây dựng ứng dụng cho cả hai hệ điều hành, điều này giúp giảm bớt công sức và [...]

Tác giả: Trần Anh Tuấn Tiếp nối ở bài trước, chúng ta đã học được cũng nhiều kiến thức về Typescript rồi. Ở bài viết này chúng ta sẽ cùng tìm hiểu thêm về nhiều Types hay ho khác của Typescript như union, intersection, utilitiy,… Lưu ý khi đặt tên Type hoặc Interface thì nên đặt tên dễ hiểu và chữ cái đầu IN HOA nhé. Ví dụ như Permissions, UserName, Role… >> TypeScript là gì? Tại sao nên chọ TypeScript? << Đọc bài viết này để giải đáp Union Type Mình muốn tạo ra một Type có tên là Role để chứa các quyền của người dùng như là Admin, Guest, và User. Người dùng sẽ có 1 trong 3 quyền này cho nên chúng ta sẽ viết nó như sau type Role = "Admin" | "User" | "Guest"; Ngoài ra Union Type còn dùng khi khai báo kiểu dữ liệu cho biến mà mình có đề cập đến cho các bạn ở những bài trước như là let age: number | string = '5'; Đi sâu hơn vào nó thì sẽ có một vài trườ [...]

Tác giả: Trần Anh Tuấn Tiếp nối với Typescript cơ bản phần 1 ở bài trước, chúng ta đã cài đặt và tìm hiểu một số Types cơ bản rồi. Ở bài này chúng ta sẽ tiếp tục tìm hiểu tiếp những Types mới nhé. Any Type Type any là Type mà các bạn có thể điền vào giá trị gì cũng được, và có thể thay đổi sang bất kỳ giá trị nào khác cũng được. Thông thường một dự án người ta sẽ có một vài thiết lập không cho phép dùng thằng any này luôn. Vì khi dùng any là chúng ta sẽ không biết nó sẽ có kiểu như thế nào cả. Tuy nhiên nó vẫn được dùng một số chỗ khi chúng ta chưa biết dữ liệu trả về sẽ là kiểu gì. Hoặc là những bạn mới học không biết cách dùng những Types khác cho nên cứ lạm dụng thằng any này, cứ chỗ nào báo lỗi Types là thay thành any [...]