ReactJS Bài 1: Khởi động dự án với reactjs

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 seroes này, bạn sẽ học cách lập trình với ReactJS một cách nhanh chóng.

Xem mục lục của khoá học này: Học lập trình ReactJS – khoá học ReactJS cơ bản

ReactJS có ưu điểm là có thể dễ dàng tái sử dụng các component, giúp cho việc phát triển và bảo trì dự án trở nên dễ dàng hơn. Nó cũng hỗ trợ việc dựng giao diện người dùng trên nhiều thiết bị khác nhau, bao gồm cả điện thoại di động và máy tính bảng.

Trong series bài học này, bạn sẽ được trang bị các kiến thức cơ bản về ReactJS để có thể làm giao diện và kết nối với web service backend api cho ứng dụng của mình.

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-app

Sau 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-reactjs

Chuyển vào thư mục của dự án và chạy dự án lần đầu tiên:

cd my-reactjs
npm start

Bạ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:3002

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

Mở trình duyệt và vào URL được cung cấp ở trên, bạn sẽ thấy ứng dụng được hiển thị tương tự như sau:

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 bootstrap

Trong 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.

• ReactJS Bài 2: Tạo cấu trúc giao diện chung cho ứng dụng (Layout)