Buổi 2

1. Trả lời câu hỏi

• Câu if else react - anonymous function

(function() {
    console.log('IIFE');
})();

• HandleChange, HandleSubmit :

  • Tên hàm : handle + nhiệm vụ

  • Dùng Expression {} : attribute

  • Hàm trong JS là 1 object --> function component dùng thay cho class component

  • Vì trong javascript con trỏ this không rõ ràng

    • -> sử dụng bind

    • Sử dụng arrow function ở hàm

    • Arrow function ở trong Expression

    • prevent Default : form -> login : post dữ liệu + link url thay đổi-> dữ liệu trang thay đổi , router

    • AJAX : không load lại trang, Router React JS

• Form : input -> handle Change

• State: dữ liệu, SetState báo react thay đổi render lại.

2. Giải lại bài Todo list

Mỗi App React chia làm 3 phần:

• Draw UI: hiển thị được, nhúng data, đảm data thay đổi. Render

  • Component:

    • Todo

      • Todo List

    • Render lên được UI (Static)

• Data Binding : Data (fetch lấy dữ liệu từ API server), State, Props (Read only) Constructor

  • Todo

    • Items -> Todo List

    • text -> Input

    • choice -> Choice

  • Todo List

    • props-> ds items, duyệt mảng React map

  • Dynamic

    • Thay dữ liệu trong state, hàm tính ra dữ liệu cần thêm vào, xử lý phức tạp tách components.

• Viết Business: onClick, onChange, ...

  • handleChange -> Input

  • Form --> handle Submit

  • Button Choice --> Handle Choice

  --> Xử lý + SetState cập nhật lại Data.

3. Fetch Từ điển API

https://api.dictionaryapi.dev/api/v2/entries/en/hello

• UI

• Data

• Business

4. Bài tập

Nâng cao :

• Nhiều từ

• Nhiều nghĩa

• Nhiều Phát âm (audio, html audio tag)

• Post server chạy

Heroku

• Đăng lên github

• Connect

• Deploy

• Open app

Cài đặt

• Nodejs cài lại

• npx create-react-app myapp

• tạo thư mục componets

• rồi chạy