Reactjs

Học lập trình Reactjs – xây dựng ứng dụng web

January 11, 2023
josephpnc

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

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

Học lập trình ứng dụng web với ReactJS

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.

Bài tiếp theo: