ReactJS là một thư viện JavaScript dùng để xây dựng giao diện người dùng (User Interface – UI) cho các ứng dụng web. Nó được phát triển bởi Facebook và được sử dụng rộng rãi trong các dự án web lớn. Trong series này, bạn sẽ học cách lập trình với ReactJS một cách nhanh chóng.
Khởi tạo dự án reactjs
Để bắt đầu một dự án ReactJS mới, bạn có thể sử dụng công cụ cài đặt create-react-app để tạo một dự án mới một cách nhanh chóng.
Để cài đặt create-react-app, bạn cần cài đặt Node.js trên máy tính của mình (xem hướng dẫn).
Sau đó, mở terminal và gõ lệnh sau để cài đặt create-react-app:
npm install -g create-react-appSau khi cài đặt xong, bạn có thể tạo một dự án ReactJS mới bằng lệnh sau:
create-react-app my-reactjsChuyển vào thư mục của dự án và chạy dự án lần đầu tiên:
cd my-reactjs
npm startBạn sẽ thấy thông tin sau đây được in ra màn hình, bao gồm đường URL để truy cập ứng dụng reactjs của mình:
Compiled successfully!
You can now view my-reactjs in the browser.
Local: http://localhost:3002
On Your Network: http://192.168.1.55:3002Mở trình duyệt và vào URL được cung cấp ở trên, bạn sẽ thấy ứng dụng:
Cài đặt bootstrap
Chúng ta sẽ sử dụng thư viện css bootstrap 5 cho ứng dụng web này. Để dùng bootstrap 5, bạn cần chạy lệnh cài đặt sau ở thư mục gốc của dự án:
npm install bootstrapTrong tệp src/index.js của dự án, thêm dòng sau để nhúng Bootstrap vào dự án:
import 'bootstrap/dist/css/bootstrap.min.css';Lưu ý: Nếu bạn muốn sử dụng Bootstrap 4 thay vì Bootstrap 5, bạn có thể thay đổi lệnh npm install thành npm install bootstrap@4.