-----
2.6 NPX
Đọc thêm về npx ở đây: https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b
Nhắc lại, NPM là chương trình quản lý thư viện trong môi trường Nodejs. NPM gồm hai thành phần: một là kho chứa các thư viện, hay các gói (package) (https://www.npmjs.com/), hai là chương trình chạy ở chế độ dòng lệnh.
Các package trong kho chứa được quản lý bằng cơ sở dữ liệu
trực tuyến có tên là npm registry.
Chương trình chạy ở chế độ dòng lệnh dùng để tương tác với
kho chứa nhằm cài đặt các package, quản lý phiên bản, quản lý các dependency.
Trong Node, mỗi mô-đun chứa trong một tập tin. Ví dụ các
mô-đun Circle, Rectangle và Square chứa trong các tập tin sau: Circle.js,
Rectangle.js, Square.js.
Package là một thư viện (hay gói), chứa một hoặc nhiều
mô-đun. Ví dụ package Shapes sẽ chứa ba mô-đun là Circle, Rectangle và Square.
Nhiều trường hợp thường dùng lẫn lộn giữa mô-đun và package.
Để tải, cài đặt và chạy một package bằng NPM thì cần phải thực
hiện một số bước. Ví dụ:
(tham khảo thêm: https://www.youtube.com/watch?v=GNR5iY0N26U&list=PLJ5qtRQovuEOoKffoCBzTfvzMTTORnoyp&index=3)
– Để tải, cài đặt package có tên là create-react-app, gõ lệnh
sau (tham số -g có nghĩa là global, giúp chạy được lệnh create-react-app ở mọi vị
trí trong máy tính):
npm install -g
create-react-app
– Sau khi cài đặt được package create-react-app, để tạo một
dự án mới có tên my-react-app1, gõ lệnh sau:
create-react-app my-react-app1
Lệnh trên sẽ tải, cài đặt các package cần thiết khác (ví dụ:
react, react-dom, react-scripts), các dependence, để tạo ra dự án react có tên
là my-react-app1, mở thư mục my-react-app1 để xem các thư mục, tập tin đã được
tạo ra.
[Kết quả - nội dung của thư mục my-react-app1]
my-react-app1/
– .git/
– node_modules/
– public/
– src/
– .gitignore
– package.json
– package-lock.json
– README.md
Vậy có cách nào đơn giản hơn để có chạy một package không? NPX
đã được tạo ra để đáp ứng yêu cầu này.
NPX (Node Package Execute): cũng giống như NPM, NPX là công
cụ dùng để cài đặt và quản lý các package trong môi trường Node.
NPX được đóng gói sẵn trong công cụ NPM từ phiên bản 5.2 trở
đi. NPX sẽ chạy các package, dù là package đó đã được cài đặt trong nội bộ dự
án, chưa được cài đặt hoặc đoạn mã đang đặt trên Github.
Như vậy NPX sẽ tìm các package đã có sẵn trong dự án, hoặc các
package đã được khai báo trong biến môi trường $PATH để chạy. Trong trường hợp
không tìm thấy package, NPX sẽ tải và cài đặt tạm thời package để chạy.
Vậy khi nào nên sử dụng NPM, khi nào thì nên sử dụng NPX?
– Những package nào chỉ cần chạy một lần trong dự án thì nên
sử dụng NPX
– Những package nào cần chạy nhiều lần trong dự án thì nên sử
dụng NPM
Ví dụ,
Sử dụng package create-react-app để tạo ra một dự án react,
thay vì dùng 2 lệnh (npm để cài đặt, và create-react-app để tạo dự án), thì bạn
có thể sử dụng duy nhất một lệnh NPX theo cú pháp sau:
npx create-react-app
my-react-app1
2.7 Chương trình react đầu tiên
Nhắc lại, React là một thư viện JavaScript được sử dụng để
xây dựng phần giao diện người dùng cho một ứng dụng web.
Để xây dựng phần giao diện web bằng React, bạn cần nhúng thư
viện React vào dự án. Vì thư viện React gồm nhiều thành phần, nếu nhúng thủ
công sẽ phức tạp và mất thời gian.
Thay vì vậy, bạn sẽ sử dụng package có tên là
create-react-app để nhúng React vào dự án.
Muốn sử dụng package create-react-app, bạn cần tải và cài đặt
package này bằng công cụ NPM hoặc NPX.
Ví dụ,
– Tạo một thư mục mới (ví dụ: learnReact)
– Mở chương trình dòng lệnh (cmd), chuyển vào thư mục learnReact
– Gõ lệnh npx
create-react-app my-react-app1 để tải, cài đặt package create-react-app, và
tạo dự án có tên my-react-app1
– Chuyển vào thư mục my-react-app1,
gõ lệnh npm start để chạy ứng dụng web
đã nhúng React. Nếu chạy thành công, bạn sẽ thấy một trang web trên trình duyệt,
với đường dẫn mặc định (ví dụ: http://localhost:3000/),
nội dung trang web đơn giản chỉ có dòng chữ “Edit src/App.js and save to
reload. Learn React”.
– Bạn có thể đổi cổng mặc định (từ 3000) thành một cổng khác
(8000), bằng cách sửa nội dung trong tập tin package.json. Trong tập tin
package.json, thay thế dòng ["start":
"react-scripts start"] thành ["start":
"set port=8000 && react-scripts start"]
– Vào cửa sổ dòng lệnh để dừng ứng dụng web đang chạy trước
đó bằng lệnh Ctrl + C, sau đó chạy lại ứng dụng bằng lệnh npm start, xem đường dẫn trên trình duyệt để kiểm tra cổng đã được
đổi.
Lab 1. Tạo một dự án web có sử dụng
React, cấu hình để có thể truy cập bằng cổng 8888.
Các thành phần chính
của một dự án có sử dụng React:
Xem thêm [view]
– .git, .gitignore, README.md: là các thành phần của phần mềm
Git, dùng để quản lý phiên bản (không liên quan đến React)
– package.json: chứa các khai báo của dự án, như tên dự án,
các thư viện, các dependencies, các package dự án đang sử dụng, các đoạn script
thực thi
– node_modules: nơi chứa các package của dự án
– public: chứa tập tin index.html, là tập tin được chạy đầu
tiên của ứng dụng (website); và các tài nguyên khác
– src: chứa các tập tin mã nguồn
Lưu ý: ở đây bạn mới học cách sử dụng React để xây dựng (develop)
giao diện trang web, tuy nhiên để có giao diện sản phẩm, thì bạn phải thực hiện
kết xuất ra trang web sản phầm (build).
Thứ tự thực thi các tập tin trong một ứng dụng React: bắt đầu
từ index.html > src/index.js > App.js
Làm giao diện bằng React là tạo ra các component, rồi ghép
các component này lại với nhau theo mục đích sử dụng.
Lab 2. Tạo trang “Chào bác Tèo”.
[Hướng dẫn]
– Tạo component ChaoBacTeo: trong thư mục src, tạo mới tập
tin ChaoBacTeo.js
[ChaoBacTeo.js]
import React from 'react';
function ChaoBacTeo() {
return (
<div>
<h1>Chào bác Tèo teo teo!</h1>
<p>Đây là component đầu tiên</p>
</div>
);
}
export default ChaoBacTeo;
– Vào tập tin index.js để nhúng component ChaoBacTeo
Nhúng component ChaoBacTeo:
import ChaoBacTeo from './ChaoBacTeo';
Đổ component ChaoBacTeo vào vị trí id= “root”, tại trang index.html,
ReactDOM.render(
<React.StrictMode>
<ChaoBacTeo />
</React.StrictMode>,
document.getElementById('root')
)
[index.js]
import React from 'react';
import ReactDOM from 'react-dom';
import ChaoBacTeo from './ChaoBacTeo';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<ChaoBacTeo />
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
– Mở chương trình cửa sổ dòng lệnh, chuyển vào thư mục dự
án, gõ lệnh “npm start” để xem kết quả.
D:\Code_react\codes\react\myproject\my-react-app1>npm
start
– Vì Create React App luôn lấy trình duyệt mặc định của hệ
điều hành để chạy, nên muốn xem kết quả trên trình duyệt nào, thì chỉ cần cấu
hình lại trình duyệt mặc định của hệ điều hành. Cách làm: bấm phím “cửa sổ”
trên bàn phím > gõ Settings > trong cửa sổ Settings gõ default > chọn Choose
a default web browser > bấm chuột trái vào mục Web browser, chọn trình duyệt
mong muốn.
[Kết quả: http://localhost:8000/]
Chào bác Tèo teo teo!
Đây là component đầu tiên
Xem thêm: Danh sách bài học