Web Programing
  • Tổng quan
    • 1. SPA vs MPA
    • 2. Phương thức create Element()
  • Project 01
    • 1. Tổng quan về React Js
      • 1.1. Giới thiệu về React Js
      • 1.2. Cài đặt môi trường phát triển
      • 1.3. Tạo dự án đơn giản với create-react-app
  • 2. Kiến trúc và Component
    • 2.1. Cấu trúc dự án
    • 2.2. React hiển thị lên trình duyệt thế nào ?
    • 2.3. JSX là gì ?
    • 2.2. Tìm hiểu về component
    • 2.4. Ứng dụng component vào dự án đơn giản
  • 3. State và xử lý sự kiện React Event
    • 3.1. Tổng quan về State
    • 3.2. Quản lý state trong class component
    • 3.3. Quản lý state trong functional component
    • 3.4. Xử lý sự kiện với React Event
    • 3.5. Thực hành
  • PROJECT 2
    • 1. Tổng quan về Node.js và Express.js
      • 1.1. Giới thiệu về Node.js và các tính năng chính
      • 1.2. Cài đặt node.js và npm
      • 1.3. Khởi tạo ứng dụng node.js với Hello world
      • 1.4. Giới thiệu về express.js và các tính năng chính
      • 1.5. Cài đặt và triển khai ứng dụng với express
  • 2. Tạo RESTful API với Express.js
    • 2.1. Giới thiệu về API và RESTful API
    • 2.2. Tạo các endpoint cơ bản
    • 2.3. Hướng dẫn sử dụng Postman để kiểm tra API
    • 2.5.Auto Reload
  • 3. Kết nối CSDL MySQL với Express.js
    • 3.1. Giới thiệu về Hệ Quản Trị Cơ Sở Dữ Liệu SQL và MySQL
    • 3.2. Cài đặt MySQL
    • 3.3. Tạo bảng To-do list với MySQL
    • 3.4. Kết nối MySQL với ứng dụng Express.js
    • 3.5. Triển khai endpoint CRUD cho To do list App
    • 3.6. Kiểm tra endpoint với postman
  • Thực hành
    • Bài thực hành số 01
    • Bài thực hành số 02
Powered by GitBook
On this page
  • 1. Cài đặt
  • 2. Chạy ứng dụng
  1. Project 01
  2. 1. Tổng quan về React Js

1.3. Tạo dự án đơn giản với create-react-app

Previous1.2. Cài đặt môi trường phát triểnNext2. Kiến trúc và Component

Last updated 8 months ago

Create React App là một công cụ do Facebook phát triển để tạo dự án React nhanh chóng mà không cần cấu hình phức tạp.

1. Cài đặt

Cài đặt Create React App bằng lệnh:

npx create-react-app ptit_react_app
ptit_react_app là tên của app khi tạo ra. Bạn có thể sử dụng tên khác tùy ý. Mặc định tên folder chứa code sẽ trùng tên với tên project

Bạn sẽ mất 1-2 phút cho quá trình tự động cài đặt và tạo ra một ứng dụng mẫu đơn giản bằng React.

Sau khi cài đặt thành công, bạn sẽ nhận được 1 thư mục chứa code như hình dưới

2. Chạy ứng dụng

Sau khi tạo được dự án từ mục 1, bạn di chuyển vào thư mục dự án bằng lệnh sau:

cd ptit_react_app

Sau đó chạy ứng dụng bằng lệnh sau:

npm start

Khi này ta thấy ứng dụng React sẽ tự động mở một trang chạy trên trình duyệt với đường dẫn: http://localhost:3000/, kết quả hiển thị như bên dưới là bạn đã cài đặt thành công.

Giao diện này chính là giao diện gọi từ /public/index.html, tuy nhiên nội dung được "lấy" từ file /src/App.js thông qua id="root". Ở các phần sau, chúng ta sẽ hiểu rõ hơn về nguyên lý hoạt động của chúng.

Phần này, các bạn có thể thay đổi một số nội dung đơn giản từ fiel src/App.js và xem kết quả.

Quá trình cài đặt và tạo ứng dụng React
Cấu trúc thư mục dự án React vừa tạo