React + Redux cơ bản – Phần 1: Component, JSX, Props & State

Mình sẽ dành 1 chuỗi bài để viết về React, kết hợp với mô hình Redux, sử dụng Webpack để đóng gói và kết hợp với Sails.js để làm RESTful APIServer. Một số kiến thức cần nằm trước – Node.js, NPM – Sails.js: Xem lại bài giới thiệu Sails.js – Webpack – Sử dụng Ubuntu (Windows tương tự) # React Component React.JS là một thư viện Javascript dùng để xây dựng giao diện người dùng. React được ví như phần View của mô hình MVC. React được xây dựng xung quanh các Component, chứ không dùng…

Read More

Hướng dẫn tạo ứng dụng chat trong React kết hợp với Firebase – Phần 1

Như các bạn đã biết, hiện nay trên các mạng xã hội hay bất cứ đâu thì ứng dụng chat là điều không thể thiếu, bất cứ ngôn ngữ nào cũng đều có thể viết ra được một ứng dụng chat đơn giản, nhưng hôm nay mình xin hướng dẫn viết bằng React. Do mới học React đang còn non kém nên có gì sai sót mong mọi người đóng góp ý kiến. Những dòng code đầu tiên Việc khởi tạo ứng dụng của React khá là đơn giản, bạn…

Read More

Hướng dẫn tạo ứng dụng chat trong React kết hợp với Firebase – Phần 2

Xin chào các bạn, bây giờ tiếp tục với bài viết ở phần 1, hôm nay mình sẽ tiếp tục với phần 2, để xử lí các sự kiện khi người dùng nhập message vào, lưu message cũng như tên user vào firebase. Ở phần trước mình chỉ làm phần thô khi cho hiển thị message cũng như user ra, giao diện ở phần 1 sẽ như sau: Bây giờ chúng ta sẽ bắt đầu từ việc nhập và lưu message mà người dùng nhập vào, như các bạn đã biết…

Read More

React Native – Phần 1 – Hướng dẫn cài đặt môi trường phát triển ứng dụng với React Native

Loạt bài về phát triển ứng dụng di động sử dụng React Native Như chúng ta đã biết, hiện nay hai nền tảng di động đang thống trị thị trường là Android và iOS. Việc phát triển ứng dụng trên hai nền tảng này đòi hỏi người lập trình viên có những hiểu biết rất khác nhau về ngôn ngữ, nguyên tắc chạy của ứng dụng trên mỗi hệ điều hành. Điều này đôi khi sẽ là trở ngại về mặt nhân lực khi muốn phát triển một ứng dụng…

Read More

LÀM QUEN VỚI REACT VÀ JSX

Reactjs là gì? Reactjs là một thư viện mã nguồn mở dùng để xây dựng giao diện người dùng. Nó cho phép bạn tạo view ( giao diện người dùng ) một cách nhanh chóng, có thể reuse mà vẫn đảm bảo rằng nó đồng bộ với dữ liệu bên dưới ( model ). Bài viết này hướng đến những người mới bắt đầu với react, giới hạn ở việc giới thiệu cú pháp cơ bản của React và JSX. Làm quen với React Có lẽ, cách dễ nhất để bắt đầu…

Read More

VÒNG ĐỜI CỦA COMPONENT TRONG REACTJS VỚI ES6

Có thể nói, khái niệm component trong React là một trong những thành phần quan trọng nhất của React. Do vậy, việc hiểu rõ vòng đời của component sẽ giúp cho bạn hiểu rõ hơn về React. Bạn có thể tham khảo tài liệu chính thức (Không ES6) tại đây: http://facebook.github.io/react/docs/component-specs.html Đây là một trang rất rõ ràng, chi tiết khác (Không ES6) http://busypeoples.github.io/post/react-component-lifecycle/ Tuy nhiên, các tài liệu trên không viết cho ES6, nên bài viết này sẽ viết lại với code thuộc ES6, về cơ bản chỉ khác ở…

Read More

HƯỚNG DẪN SỬ DỤNG REDUX HIỆU QUẢ TRONG ỨNG DỤNG REACT

Câu hỏi: Khi nào thì nên sử dụng Application State (Redux Store), khi nào thì nên sử dụng Local State khi áp dụng Redux cho React (React Js & React Native)? Câu trả lời ngắn gọn: tùy thuộc vào bạn, làm sao viết code thoải mái để Application State tối giản nhất có thể mà không làm mất tính tin tưởng vào ứng dụng. (Bài viết này sử dụng cho cả React Js và React Native) Nội dung chính [ẩn] Một số khái niệm Khi nào nên sử dụng Redux Sử dụng Redux…

Read More

HƯỚNG DẪN CÀI ĐẶT WEBPACK ĐỂ VIẾT REACTJS/ES6

Trên trang chủ của Reactjs thì các mã ví dụ đều được viết bằng ES5, mặc dù viết bằng ES5 hay ES6 thì đều tuỳ thuộc vào bạn vì phải mất thời gian học ES6, nhưng với những điểm lợi mà ES6 mang lại mình khuyến nghị bạn nên sử dụng luôn ES6 để viết mã. Bài này mình sẽ hướng dẫn cài đặt Webpack để viết ReactJs bằng ES6. Các bài viết khác liên quan nền tảng nên đọc: ES6 là gì? ReactJs là gì? Vòng đời của 1 component…

Read More

HƯỚNG DẪN CẤU TRÚC THƯ MỤC VÀ CÁCH VIẾT COMPONENT CHUẨN TRONG REACT

Sau một thời gian tìm hiểu và áp dụng rất hiệu quả, hôm nay mình chia sẻ với các bạn cấu trúc thư mục và cách viết component chuẩn trong React. Mục tiêu là làm sao cho dự án dễ quản lý, cũng như dễ hiểu để cộng tác làm việc với nhau, cũng như tăng tính tái sử dụng của một component React, việc áp dụng theo hay không thì tùy bạn – tất nhiên, nhưng nếu bạn không sử dụng một quy luật nào đó thống nhất, một ngày…

Read More

HƯỚNG DẪN HỌC REACT JS

HƯỚNG DẪN HỌC REACT JS SAO CHO HIỆU QUẢ! Nếu bạn mới làm quen với React (hoặc phần front-end nói chung) thì bạn sẽ thấy hệ sinh thái tương đối khó hiểu, đó là lý do vì sao có bài viết hướng dẫn học reactjs sao cho hiệu quả này, cơ bản có một vài lí do khiến ReactJs khó nuốt: Trước đây, React mục tiêu hướng tới nhóm đối tượng tiếp cận sớm và các chuyên gia Facebook chỉ thực hiện chuyển thành mã nguồn mở khi mà React được…

Read More