Giới thiệu về ReactJS

ReactJS là một thư viện front-end phổ biến được sử dụng để xây dựng giao diện người dùng và các ứng dụng một trang. Trong bài viết này, chúng ta sẽ khám phá những điều cơ bản của ReactJS và tạo một dự án hoàn chỉnh từ đầu.

Thiết lập dự án

Để bắt đầu, chúng ta cần cài đặt Node.js và một trình soạn thảo code tùy chọn trên máy tính của mình. Trong trường hợp này, chúng ta sẽ sử dụng Visual Studio Code. Chúng ta tạo một thư mục mới có tên là "react-youtube" và mở trực tiếp nó trong Visual Studio Code.

Setting Up the Project

Sau đó, chúng ta mở terminal trực tiếp từ Visual Studio Code và sử dụng Vite, nhanh hơn Create React App, để khởi chạy các lệnh sau: npm create vite@latest my-react-app. Lệnh này sẽ tạo một dự án React mới.

Tạo Component Đầu Tiên

Chúng ta bắt đầu bằng cách tạo một component mới có tên là WelcomeMessage.jsx. Chúng ta tạo một thư mục có tên là components, nơi chúng ta sẽ chèn tất cả các component của mình. Trong file WelcomeMessage.jsx, chúng ta xuất một function trả về một đoạn JSX.

Creating the First Component

Sau đó, chúng ta chuyển đến file App.jsx và import component WelcomeMessage. Chúng ta gọi component WelcomeMessage và truyền một message prop cho nó.

Truyền Props vào Components

Chúng ta giới thiệu khái niệm về props, cho phép chúng ta truyền các tham số khác nhau vào cùng một component. Chúng ta truyền một message prop cho component WelcomeMessage và sử dụng nó để hiển thị một message động.

Passing Props to Components

Tạo một Counter Component

Chúng ta tạo một component mới có tên là Counter.jsx và sử dụng hook useState để tạo một biến trạng thái count. Sau đó, chúng ta sử dụng function setCount để tăng biến count khi nút được nhấp.

Creating a Counter Component

Sử dụng hook useState

Chúng ta giới thiệu hook useState, cho phép chúng ta tạo một biến trạng thái và một function để cập nhật nó. Chúng ta sử dụng hook useState để tạo một biến trạng thái count và một function setCount để cập nhật nó.

Using the useState Hook

Lấy Dữ Liệu từ một API

Chúng ta giới thiệu hook useEffect, cho phép chúng ta lấy dữ liệu từ một API khi component được mount. Chúng ta sử dụng hook useEffect để lấy dữ liệu từ Random User API và hiển thị tên và hình ảnh của người dùng.

Fetching Data from an API

Kết luận

Tóm lại, chúng ta đã học cách tạo một dự án React hoàn chỉnh từ đầu. Chúng ta đã học cách tạo các component, truyền props vào các component, sử dụng hook useState và lấy dữ liệu từ một API bằng hook useEffect.

Conclusion

Là một dự án cuối cùng, chúng ta tạo một component danh sách việc cần làm cho phép người dùng thêm và xóa các task. Chúng ta sử dụng hook useState để tạo một biến trạng thái tasks và một function setTasks để cập nhật nó.

Final Project

Tôi hy vọng bài viết này hữu ích cho bạn. Nếu bạn có bất kỳ câu hỏi nào hoặc muốn tìm hiểu thêm về React, vui lòng để lại comment bên dưới.