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ạ [...]

ELSA, ứng dụng học phát âm tiếng Anh hàng đầu với hàng triệu người dùng toàn cầu, đã và đang đối mặt với những thách thức lớn trong việc mở rộng mobile app của mình để đáp ứng nhu cầu ngày càng tăng của người dùng. Bằng cách chuyển đổi từ nền tảng Native sang Flutter, một framework đa nền tảng, có khả năng tối ưu hiệu suất và đẩy nhanh tốc độ phát triển sản phẩm, ELSA đã giải quyết được bài toán scale up của mình. Thách thức scale up và bài toán của ELSA Trong bối cảnh thị trường ứng dụng di động cạnh tranh khốc liệt, việc mở rộng ứng dụng là yếu tố then chốt để giữ vững vị thế và thu hút người dùng mới. Khả năng mở rộng (scalability) của ứng dụng được đánh giá dựa trên khả năng hoạt động ổn định, mượt mà khi: Số lượng người dùng tăng đột biến: Ứng dụng phải đảm bả [...]

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à [...]

Bài viết được sự cho phép của tác giả Sơn Dương React Hook là một “luồng gió” mà nhà phát hành React đã giới thiệu trong thời gian gần đây. Trên VNTALKING cũng có một bài viết giới thiệu về React Hook mà bạn nên đọc: React Hook là gì? So với thời điểm mới ra mắt, hiện tại có rất nhiều thư viện hỗ trợ React Hook, giúp cho bạn phát triển dự án với React được dễ dàng hơn rất nhiều. Khi tìm kiếm trên internet về React, bạn sẽ gặp nhan nhản các từ khóa, các kỹ thuật liên quan tới “Hooks”, đây cũng là xu hướng mà chính nhà hành React cũng mong muốn như vậy. Nếu dự án của bạn chưa sử dụng Hook, có lẽ bạn nên suy nghĩ lại. Hook giúp cho mã nguồn dự án trở nên rõ ràng, đảm bảo khả năng đọc code, khả năng bảo trì, khả năng tái sử dụng và có ít dòng mã hơn. Đâ [...]

Bài viết được sự cho phép của tác giả Sơn Dương Khi ứng dụng cần thông tin từ người dùng, ví dụ như điền mẫu đơn đăng ký khóa học, đăng ký đặt mua hàng, viết bình luận… Phổ biến nhất là sử dụng form. Form là tập hợp component input như: input fields, checkbox… để người dùng cung cấp thông tin. Tuy nhiên, vấn đề bị spam sẽ nảy sinh nếu không có biện pháp ngăn chặn. Ứng dụng sẽ bị spam hàng loạt thông tin rác bởi các bot. Tất nhiên, cái gì cũng có cách khắc phục hết. Giải pháp hiệu quả nhất là tích hợp công cụ Google reCaptcha vào form. Trong bài viết này, mình sẽ hướng dẫn cách tích hợp Google reCaptcha đơn giản nhất cho các ứng dụng được viết bằng React. Google reCaptcha là gì Google ReCaptcha là phần mềm do Google phát hành, mục đích là hạn chế việc spam thông tin khi đăng ký form. Đồng thời, [...]