Skip to main content

Tạo ứng dụng Todo List đơn giản bằng ReactJS

Xin chào cả nhà !

Đây là phần đầu tiên trong Tutorials lập trình ReactJS cơ bản của mình. Mọi người có thể tham khảo sơ qua cú pháp tại trang chủ của React để hiểu hơn. Reactjs.org

Đầu tiên mình sẽ thử tạo 1 ứng dụng todo list cực kì đơn giản mới chức năng như thêm công việc vào todo list, hiển thị dữ liệu ra.

1. Component with a state and render methods


Chúng ta có thể thấy state là một object gồm 2 giá trị là term items:

  + term là giá trị  lưu tạm khi chúng ta nhập dữ liệu vào input.
  + items chính là mảng để lưu trữ toàn bộ dữ liệu todo list.

2. Input with value and onChange method


   + onChange là một function giúp thay đổi giá trị chính là term. Khi chúng ta thay đổi giữ liệu là state thì ta cần gọi đến hàm this.setState để thay đổi giá trị. 

3. Form with onSubmit method


   + onSubmit là một function có 3 nhiệm vụ chính như sau:

   1. Làm sạch trường input khi chúng ta nhấn Submit bằng cách resetting term về giá trị rỗng như             ban đầu.
   2. Thêm giá trị term và mảng items chính là danh sách todo list của chúng ta.
   3. Hàm preventDefault() có nhiệm vụ là dừng hành động khi một element diễn ra.

4. Separate component to show our list


Chúng ta tạo ra một Component mới ví dụ như List.js

Nó có tác dụng là nhận giá trị props từ Component cha, ở đây chính là class App. Sau đó render ra các phần tử có trong đó.

Oki, chúng ta có thể nhìn qua toàn bộ các component như sau:




Vậy là đã xong 1 ví dụ rất đơn giản về ReactJS. Bạn có thể tham khảo rất nhiều các ví dụ khác trên mạng bằng từ khóa "Simple React to list" sẽ có rất nhiều cách viết khác nhau và chuyên nghiệp hơn.

Đây chỉ là một ví dụ điển hình cho cú pháp trong ReactJS và dử dụng state với props.

Cảm ơn tất cả mọi người !

Comments


  1. Nice breakdown. I use 👉👉👉 Crypto Market Monitor daily to track volume and price action.

    ReplyDelete

Post a Comment

Popular posts from this blog

Hướng dẫn cài LibreOffice trên Kali Linux

Xin chào mọi người ! Một số bạn không biết cài bộ công cụ văn phòng nào cho máy tính cài HĐH Kali Linux. Hôm nay mình sẽ hướng dẫn cho các bạn cài  LibreOffice trên Kali Linux. Nó giống như bộ Office của Microsoft và trên thực tế thì không bằng Microsoft được đâu. Việc cài đặt bộ Office này khá là đơn giản. Đầu tiên để cài thì bạn hãy tải LibreOffice phù hợp với phiên bản của máy tính đang sử dụng. Như của mình hiện tại là phiên bản LibreOffice_5.2.4 + Link Download (Download) Hãy tải phiên bản mới nhất có đuôi *.deb cho dễ cài đặt. Sau khi tải xong có 2 cách để các bạn cài đặt nó: + Cách 1: Sử dụng phần mềm Gdebi để cài đặt các file *.deb một cách dễ dàng. Tuy nhiên rất hay bị lỗi và không cài đặt được. + Cách 2: (Nên theo cách này) 1- Giải nén file LibreOffice ra. 2- Mở Terminal ra gõ:   ~# cd Downloads Các bạn có thể dùng lệnh ls để biết chính xác tên thư mục của mình và copy paste cho chuẩn. Tiếp sau đó thì gõ:   ~# cd LibreOffice_5....

Tạo ứng dụng realtime với Firebase Database và ReactJS

Hello cả nhà ! Như các bạn cũng đã biết thì Firebase được tạo bởi "Ông lớn Google", bởi vậy lên việc sử dụng Firebase khá an toàn và tiên dụng. Mọi người có thể vô trang chủ của Firebase tại địa chỉ:  Firebase Google  . Firebase có rất nhiều tính năng vô cùng tuyệt vời như: Storage, Database, Hosting, Function, Authentication, ML Kit. Hôm nay mình xin phép làm một demo nhỏ cho tạo ứng dụng realtime bằng cách sử dụng Firebase Database với ReactJS . Bài viết này mình xin hướng dẫn các bước chuẩn bị trước khi vô code. Đầu tiên các bạn vô trang chủ của Firebase, và tới Firebase console. Sau khi vô tới Console Firebase các bạn nhấn vô Add a Project để tạo 1 dự án mới. Các bạn nhập tên cho project của mình,  nó sẽ tự random ID project cho các bạn theo tên của project mà các bạn đã đặt. Điền hoàn tất thì nhấn Tạo và chờ vài giây để cho nó tạo Thành công. Tạo project xong các bạn chọn tiếp tới tạo Database, và chúng ta cũng chỉ quan tâm đến nó ...

Javascript kiểm tra Array chính xác hơn bằng Array.isArray

Các dev Javascript có thể điều biết, arrays is not true arrays . Mọi thứ trong javascript đều là object. Một cách điều hiểu điều đó rõ nhất là sử dụng typeof để kiểm tra nó, và tất nhiên nó sẽ là object. LOL Vậy làm sao để kiểm tra chính xác một phần tử có phải là array hay không trong javascript ? Đó đã không còn là vấn đề với Array.isArray(). Đây là các đơn giản để kiểm tra chính xác giá trị có phải là mảng hay không. Array is not true array Hãy xem ví dụ dưới để hiểu hơn, array is not true array Đó chính là lý do tại sao ta không lên dùng typeof để kiểm tra array. Array.isArray() demo Ví dụ dưới đây đều là array và đều return về true