# ✅ Checkpoint: nền tảng JavaScript và tư duy React

By Better Wise



## Quiz

1. Đoạn code sau in ra gì?

```js
const user = { ten: "Lan", tuoi: 20 };
user.tuoi = 21;
console.log(user.tuoi);
```
   - 20, vì const làm object bất biến hoàn toàn
   - Báo lỗi TypeError ngay ở dòng gán
   - 21, vì const chỉ chặn gán lại biến chứ không đóng băng nội dung object
   - undefined, vì thuộc tính không được cập nhật
2. Arrow function nào trả về đúng một object literal `{ id: 1 }`?
   - `() => { id: 1; }`
   - `() => ({ id: 1 })`
   - `() => { return { id: 1 } }` viết trên một dòng không có dấu chấm phẩy
   - `() => { id: 1 }`
3. Với mảng `congViec` gồm các object có `title` và `done`, đoạn code nào tạo mảng mới chỉ gồm công việc đã xong?
   - `congViec.filter((cv) => { cv.done })`
   - `congViec.filter((cv) => cv.done)`
   - `congViec.reduce((cv) => cv.done)`
   - `congViec.map((cv) => cv.done)`
4. Vì sao nên luôn truyền initial value (ví dụ `0`) làm tham số thứ hai cho `reduce`?
   - Để reduce tự động sửa mảng gốc
   - Để kết quả luôn là mảng thay vì một giá trị
   - Vì reduce bắt buộc phải có hai tham số, thiếu là lỗi cú pháp
   - Để tránh lỗi với mảng rỗng và tránh kiểu dữ liệu của acc bị đoán sai
5. Trong dự án Vite mặc định, file nào gắn ứng dụng React vào DOM và render component gốc?
   - `index.html`, vì đây là file trình duyệt mở đầu tiên
   - `src/App.jsx`, vì App là component gốc
   - `src/main.jsx`, render vào thẻ có id `root` trong `index.html`
   - `vite.config.js`, vì đây là file cấu hình dự án
6. Để tạo bản sao object `hoaDon` rồi ghi đè trường `daThanhToan` thành `true` mà không sửa object gốc, ta viết: `const moi = { ____hoaDon, daThanhToan: true };`
7. Lệnh tạo dự án React bằng Vite có dạng: `npm create vite@latest khoa-hoc-app -- --template ____`.
8. Hãy tự đánh giá khả năng chia giao diện thành cây component và khởi tạo dự án Vite của bạn. Với một trang chi tiết khóa học (tiêu đề, ảnh bìa, mô tả, danh sách 5 bài học, nút Đăng ký, chân trang), bạn có vẽ được cây component và dựng được dự án chạy được không?


---

## Contents

Part of [⚛️ React từ con số 0 cho người chỉ biết HTML](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html.md)

- **🧱 Nền tảng JavaScript và tư duy React**
  - [✨ ES6 thiết yếu cho React: let, const, arrow function, destructuring, spread](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/es6-thiet-yeu-cho-react.md)
  - [🔁 Hàm và mảng trong thực tế: map, filter, reduce](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/ham-mang-map-filter-reduce.md) (sign-in required)
  - [🧩 Tư duy component và khởi tạo dự án với Vite](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/tu-duy-component-va-khoi-tao-vite.md)
  - [✅ Checkpoint: nền tảng JavaScript và tư duy React](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/checkpoint-nen-tang-javascript-va-react.md) — this lesson
- **🧩 Component, JSX, props và state**
  - [📄 JSX và component đầu tiên](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/jsx-va-component-dau-tien.md)
  - [📦 Props và composition: truyền dữ liệu giữa component](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/props-va-composition.md)
  - [🔄 State với useState và xử lý sự kiện](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/state-usestate-va-su-kien.md)
  - [📋 Render danh sách và key trong React](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/render-danh-sach-va-key.md)
  - [✅ Checkpoint: component, JSX, props và state](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/checkpoint-component-va-state.md)
- **🚀 Form, useEffect, gọi API và dự án nhỏ**
  - [📝 Form và controlled components](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/form-va-controlled-components.md)
  - [⚙️ useEffect và side effects](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/useeffect-va-side-effects.md)
  - [🌐 Gọi API với fetch: loading, error và cleanup](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/goi-api-voi-fetch.md) (premium content)
  - [🛠️ Dự án: ứng dụng quản lý nhỏ với Vite](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/du-an-ung-dung-quan-ly-voi-vite.md) (premium content)
  - [✅ Checkpoint: form, useEffect, gọi API và dự án](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/checkpoint-form-api-va-du-an.md) (premium content)
- [Course cheatsheet](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/cheatsheet.md) (premium content)