Chương 1 - Tổng Quan Về ReactJS

LẬP TRÌNH REACTJS
LẬP TRÌNH
REACTJS
Chương 1:
TỔNG QUAN VỀ REACTJS VÀ CÀI ĐẶT
MÔI TRƯỜNG PHÁT TRIỂN
1
KHOA CÔNG NGHỆ THÔNG TIN – Lập trình ReactJS
Nội dung bài học
01 02 03
Những cách khác Tạo project với Create
ReactJS là gì?
nhau để code React React App và Vite
04 05 06
Cài đặt một số Cấu trúc folder của một
“Hello world” với ReactJS
Extension hỗ trợ dự án React cơ bản
2
1. ReactJS là gì?
3
Tổng quan về ReactJS
- Ngôn ngữ phát triển: JavaScript

- React là một library, không phải framework
- Được phát triển bởi Meta (tiền thân là Facebook) và
giới thiệu vào năm 2011
- Nguyên lý xây dựng: component-based approach
- Chuyên dùng làm Single Page Application – SPA
- Offical website: https://react.dev/
- Github: https://github.com/facebook/react
4
ReactJS – VueJS – Angular – nên học cái nào?
5
ReactJS có điểm mạnh gì?
- Tương đối dễ học với beginner

- Có thể sử dụng cả JavaScript và TypeScript
- Cú pháp JSX gần với HTML
- Component tái sử dụng
- Sử dụng Virtual DOM -> cải thiện hiệu suất xử
lý trong website cực kỳ hiệu quả
- Dễ dàng chuyển sang mảng mobile với React
Native hoặc desktop app với ElectronJS
- Cộng đồng đông đảo, thư viện vô số kể, nhiều
tool hỗ trợ test / debug
6
ReactJS có điểm yếu gì?
- Cần tích hợp nhiều thư viện ngoài -> Phải học
và nghiên cứu nhiều loại thư viện cho từng
trường hợp cụ thể
- Không thân thiện với SEO
- Dễ bắt đầu, khó chuyên sâu
7
2. Các cách khác nhau để code ReactJS
8
Online playground - codesandbox.io
9
Online playground - stackblitz.com
10
Online playground - codesandbox.io
11
CDN Link script
12
Tạo project thông qua CRA hoặc Vite trên IDE
13
3. Tạo project với Create React App và Vite
14
Tạo project với Create React App
1. Cài NodeJS environment (https://

nodejs.org/dist/v16.14.0/node-v16.14.0-x86.msi)
2. Cài đặt nvm (Nếu muốn sử dụng nhiều version Node
cùng một lúc) (https://
github.com/coreybutler/nvm-windows/releases)
3. Kiểm tra version của node: `node –v`
4. Kiểm tra version của npm: `npm –v`
5. Cài đặt CRA: `npx install –g create-react-app`
6. `npx create-react-app app-name` hoặc `npm init
react-app my-app`
7. `cd app-name` -> `npm install`
8. `npm start`
15
Tạo project với Create React App
1. Cài NodeJS environment (

https://nodejs.org/dist/v16.14.0/node-v16.14.0-x86.m
si
)
2. Cài đặt nvm (Nếu muốn sử dụng nhiều version Node
cùng một lúc) (
https://github.com/coreybutler/nvm-windows/release
s
)
3. Kiểm tra version của node: `node –v`
4. Kiểm tra version của npm: `npm –v`
5. `npm create vite@latest` -> Input project_name ->
select framework: react -> Select variant: JavaScript
-> Enter
6. `cd project_name` -> `npm install`
7. `npm run dev`
16
Tích hợp TypeScript
1. Đối với Create React App

`npx create-react-app my-app --template typescript`
2. Đối với Vite
Ở bước select variant -> chọn option 2 `TypeScript`
3. Để cài đặt TypeScript cho một dự án ReactJS sẵn có, mở terminal và run
`npm install --save typescript @types/node @types/react @types/react-dom @types/jest`
Tiếp theo đổi đuôi tất cả các file theo mẫu
.jsx -> .tsx (nếu có chứa template JSX)
.js -> .ts (nếu ko chứa template JSX)
Tạm thời đặt kiểu dữ liệu cho param là any, sau đó cập nhật dần dần sang các kiểu dữ liệu khác
17
4. Cài đặt một số Extension hỗ trợ
18
Cài đặt một số Extension hỗ trợ
19
5. Cấu trúc folder của một dự án React cơ bản
20
Cấu trúc folder của một dự án React cơ bản
- node_modules: chứa source thư viện trong dự án

- package.json: định nghĩa các phiên bản thư viện được sử dụng, các lệnh run,…
- public: chứa tệp truy cập công khai
|___index.html: page template - Không được xóa file này
- src: cần đặt các tệp trong này để webpack nhìn thấy và xử lý chúng
|___App.css
|___App.js: Parent component chứa những child component khác trong dự án
|___App.test.js: Unit test cho App.js
|___index.css
|___index.js: JavaScript entry point - Không được xóa file này
- README.md: Tài liệu giới thiệu dự án – hướng dẫn clone – set up – run – test – …
21
6. “Hello world” với ReactJS
22
Hello world với ReactJS – level 1
Bước 1: Cập nhật nội dung HTML nằm trong file src/App.js
Bước 2: Nhấn tổ hợp phím Ctrl + ` để mở terminal, trỏ vào thư mục project -> gõ `npm start`
Bước 3: Mở trình duyệt, gõ đường dẫn http://localhost:3000/ (tự động mở khi run project)
23
Bước 1: Tạo folder src/pages -> Tạo file

HelloWorld.jsx -> Gõ code mẫu
Lưu ý:
1. Tên của page phải đặt ở dạng PascalCase
2. Phải export default function HelloWorld
Bước 2: Tại src/App.js -> Import page

HelloWorld dưới dạng một thẻ tag thông qua
cú pháp
import <page_name> from <path> (ES6)
24
Lưu ý:
– Nếu ko đặt tên ở dạng PascalCase, sẽ
không thể sử dụng cú pháp import …
from ….
– Có thể viết gọn <tag></tag> thành
<tag /> trong trường hợp không chứa
phần tử con trong thẻ
– Có thể viết dưới dạng arrow function
25
26

Chương 1 - Tổng Quan Về ReactJS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chương 1 - Tổng Quan Về ReactJS

Uploaded by

Copyright:

Available Formats

LẬP TRÌNH REACTJS

- Ngôn ngữ phát triển: JavaScript

- Tương đối dễ học với beginner

1. Cài NodeJS environment (https://

1. Cài NodeJS environment (

1. Đối với Create React App

- node_modules: chứa source thư viện trong dự án

Bước 1: Tạo folder src/pages -> Tạo file

Bước 2: Tại src/App.js -> Import page

You might also like