0. Giới thiệu React
Trang chủ : https://vi.reactjs.org/
1 . Lập Trình ReactJS : Cài Đặt Môi Trường - Công Cụ Phát Triển ( Setting Up React Environment )
* React-detector : Extention của Chrome để biết trang web nào xài React.
Vào extention của chrome: https://chrome.google.com/webstore/category/extensions?hl=en-US
Search tử khóa "react developer tools", và cài đặt extention này
Khi vào trang web nào có sử dụng công nghệ React thì nó sẽ phát sáng
Ngoài ra khi bấm F12 bạn có thể xem tab react, để xem được một số componet và thuộc tính
2 . Node.js
Trang chủ : https://nodejs.org/en/
Mình cần cài nodejs để có môi trường phát triển để chạy React
chứ không học sâu về NodeJs
Cài đặt : https://nodejs.org/en/
Kiểm tra node Js cài đặt xong chưa
node -v : kiểm tra phiên bản node js hiện tại
npm -v : kiểm tra npm , trình quản lý các gói package
2b . Yarn
3 . IDE : Sublime Text
Là trình giúp lập trình React Js cũng như Redux
Trang chủ : https://www.sublimetext.com/3
Down load bản Windows 64 bit, dùng để cài đặt vào máy
bản portable version dùng để mở là chạy lun không cần cài đặt (phù hợp với máy có bảo mật cào ko cho cài trực tiếp)
3b. Cài đặt các gói thư viện package cho Sublime Text : https://packagecontrol.io/installation
Trang đó có hướng dẫn cách cài Package Control cho Sublime Text
+ quay lại ứng dụng IDE : Sublime Text
+ nhấn Ctrl+shift+p => mở ra cửa sổ lệnh command palette
+ nhập lệnh : Install Package Control, và Enter
=> Cài đặt Package Control cho Sublime Text thành công
Kiểm tra cài Package Control thành công chưa. kiểm tra thanh menu References, có Package Control chưa ?
3c. Cài đặt các package cần thiết khác
+ JSX/ Babel Syntax Hightlighting
+ Babel Snippets
+ Emmet
Mở Package Control
Mở Package Control, chọn Install Package
Search và cài đặt các 4 gói package
+ Babel
+ JSX
+ Babel Snippets
+ Emmet (giúp gỡ nhanh code JSX, code HTML)
Kiểm tra đã cài đặt gói Babel và JSX thành công chưa
5 . ReactJS: Tạo project đầu tiên
Vào trang chủ ReactJS : https://reactjs.org/
chọn Get Started
Ở menu bên phải, chọn :
INSTALLATION > Getting Started > Create a New React App
Sẽ ra các lệnh hướng dẫn cài đặt project
Mở cmd và gõ các lệnh đó vào
> npx create-react-app my-app (lệnh này tạo một project ReactJs, ở thư mục C:\Users\xxx\my-app)
> cd my-app
> npm start
Cài đặt thành công với lệnh > npx create-react-app my-app (nếu lỗi, xem bên dưới)
Nếu bị lỗi
npm install Error: rollbackFailedOptional: verb npm-session xxxxxxxxxxxxxxxxxx
Là do mạng của bạn đã bị chặn, có thể là chặn proxy, ...
Gõ các lệnh sau để chỉnh lại cấu hình kết nối cho trình npm, cài đặt gói
> npm cache verify
> npm config rm proxy
> npm config rm https-proxy
> npm config set https-proxy http://proxydomain:80
> npm config set proxy http://proxydomain:80
> npm config set registry https://registry.npmjs.org/
Tạo thư mục G:\TrainingReact
Giả sử chuyển qua ổ G:\TrainingReact
> g:
> cd TrainingReact
Tạo project React tên là lesson1-hello, trong thư mục G:\TrainingReact
quá trình này nhanh hay chậm phụ thuộc vào đường truyền mạng của bạn. Vì nó down các gói package chính là react, react-dom, react-script, ....
> npx create-react-app lesson1-hello
Cài project thành công
Nếu cài thành công với trình cài gói Yark
Chạy tiếp 2 lệnh sau, để chạy project
> cd lesson1-hello
> npm start
Mặc định, project ReactJs đang chạy mặc định với port 3000: http://localhost:3000/
Giả sử sau này mình bị đụng port và cần đổi qua port khác
Mở lại ứng dụng Sublime Text, chọn Project > Add folder >
Tìm đến thư mục project lesson1-hello lúc nãy, nhấn nút Select
Tìm file cấu hình gói package.json
sửa :
"start": "react-scripts start"
thành
"start": "set port=4200 && react-scripts start",
Quay lại cửa sổ cmd : nhấn Ctrl + C
chọn Yes
> Y để dừng server project ReactJS của mình
Nhấn > npm start để bật lại server, kết quả 4200 đã được cập nhật
6 . Cấu trúc thư mục project React.JS
Ngay ở trang chủ project, nó có nói tới file code liên quan tới trang chủ hình logo này
Vô source dự án, mở file src > App.js
Sửa 1-2 dòng text, save . Sẽ thấy trang web cũng được cạp nhật real time theo
Các dòng code bên trong src > App.js không phải HTML code mà là JSX
bật gói Bable JSX Hightlight lên sẽ thấy code có màu sắc dễ nhìn hơn
Giới thiệu các thư mục và file của project ReactJS
6a. Package.Json :
+ name : tên project
+ version : phiên bản project
+ dependencies : là các thư viện, các gói package sử dụng cho project
- trong đó 3 thư viện quan trọng dùng code react là : react, react-dom, react-scripts
+ các script để project chạy khi start, build , test
6b.
+ Readme : ko quan trọng bỏ qua
+ Gitignore : thông tin git, ko quan trọng bỏ qua
6c. Thư mục node _modules là nơi chứa các thư viện package đã cài đặt cho project
6d. Thư mục puplic có file index.html là file chạy đầu tiên
Trong đó :
+ <div id="root"></div> :
là chỗ, React đổ code vào đây gồm các component
+ <noscript>You need to enable JavaScript to run this app.</noscript>
Khi trình duyệt không hỗ trợ React thì nó sẽ show câu này ra
6e. Thư mục src là thư mục quan trọng nhất, mình sẽ làm việc nhiều nhất
+ File index.js này lấy code ReactJS từ file App.Js
=> đổ vào div "root" của file index.html
+ File App.Js là nơi code ReactJS
Code React này sẽ đổ vào div root và ta sẽ hiểu đây là một components
7. . Components
Components hiểu là một bộ phận, 1 phần của trang web
ví dụ : header , menu trên, menu trái, body, ... là những Components
Hiện tại ta có một Components là App.Js hiển thị dữ liệu trong div root
Thư mục src, tạo mới file Demo.js
Viết code ReactJs cho components này
Đã có Export ra biến Demo, thì in nữa sẽ có bước Import vào index.js để sử dụng
Khai báo div demoDiv để hiển thị components Demo.Js
Điều hướng code demo.Js vào div demoDiv
Kết quả, bạn đã có 2 components cùng hiển thị trên 1 trang web
8. Sử dụng resource, template
0 Nhận xét