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 đặt HĐH Kali Linux trên máy thật

Để cài đặt được HĐH Kali Linux trên máy thật các bạn chỉ cần chuẩn bị như sau: 1- USB >=4GB 2- Phiên bản Linux muốn cài đặt (Tải tại đây) 3- Tải win32 disk imager  (Tải tại đây)    Vậy là đã chuẩn bị xong ! TIẾP TỤC: Bước 1 . Khởi động chương trình UUI. Chọn I Agree. Bước 2 . Cấu hình UUI. Step 1: Select a Linux Distribution from the dropdown to put on your USB : Chọn hệ điều hành cần tạo, bạn chọn Kali Linux. Step 2: Select your Kali*.iso : Chọn file cài cài đặt Kali Linux. Lưu ý: tên file phải bắt đầu bằng Kali và kết thúc bằng .iso . Step 3: Select your USB Flash Drive Letter Only: Chọn thiết bị USB của bạn. Check vào We will format E:\ Drive as Fat32 để format lại USB của bạn. Cấu hình UUI Cảnh báo Format USB hiện lên, bạn chọn Yes để bắt đầu tiến trình. Cảnh báo format, chọn Yes. Tiến trình format và tạo USB Boot Kali Linux bắt đầu. Format và gắn nhãn UUI. Bắt đầu giải nén file .iso. Quá trình giải nén. Bước 3 . Hoàn t...

Làm thế nào để trở thành một Hacker Pro: 5 kĩ năng hacking cơ bản

Hacker - Thuật ngữ áp dụng cho người sử dụng máy tính và máy tính xách tay của mình để truy cập dữ liệu trái phép. Tìm hiểu về hacking và cố gắng nó không phải là một tội ác, trừ khi bạn đang làm việc đó để có được quyền truy cập trái phép vào dữ liệu. Bạn có thể sử dụng nó cho an ninh của bạn cũng vì vậy mà những người khác không thể hack bạn. Nếu bạn nghĩ rằng hacker chỉ hack vào mạng và đánh cắp dữ liệu, sau đó bạn là sai trong phần đó. Động cơ chính đằng sau cung cấp các khóa học hacking và học tập của mình với mọi người, những người quan tâm để trở thành hacker và đã sẵn sàng để đối phó với tin tặc khác, những người không sử dụng kỹ năng của họ độc đáo. Vì vậy, hôm nay tôi sẽ cho bạn biết về 5 kỹ năng hack mà sẽ cho bạn thấy làm thế nào để trở thành hacker. Bởi vì nếu bạn muốn trở thành một hacker chuyên nghiệp bạn cần phải đánh bại một. Vì vậy, hãy kiểm tra các kỹ năng dưới đây. 5 Skills Required To Become A Pro Hacker 1. Basic Computer and Networking Skills Kiến thức...

Master Proptypes trong React

React là một thư viện JavaScript cho việc xây dựng giao diện người dùng (UI). React giúp quản lý dễ các trạng thái (state) của ứng dụng hơn và sẽ thay đổi UI khi mà state thay đổi. React dựa vào các component và mỗi component có state của nó. Nếu như là state của component dùng setState() và có thể thể props từ component cha. The Problem Từ khi Reatc là một thư viện JavaScript và JS không cung cấp bất cứ thứ gì về type-checking , bỏ qua việc đó khi sử dụng props component có thể khiến bạn gặp bugs trong ứng dụng. Solution Bạn có thể dùng Js extensions như TypeScript cho việc checking, nhưng nếu bạn không muốn sử dụng nó, React cung cấp đầy đủ cho tính năng type-checking verify props của các component chính xác type. Sử dụng PropTypes, bạn có thể chắc chắn các component nhận đúng type của props. Ví dụ, ta có Person component và nhận 2 props: `name` và `age`. Sử dụng PropTypes, ta có thể chắc chắn `name` luôn luôn là `string` và `age` luôn luôn là number. Installing Pr...