ReactJS: Cách thiết lập một dự án React với Create React App

React là một framework JavaScript phổ biến để tạo các ứng dụng front-end. Ban đầu được tạo ra bởi Facebook, nó đã trở nên phổ biến bằng cách cho phép các nhà phát triển tạo ra các ứng dụng nhanh chóng bằng cách sử dụng mô hình lập trình trực quan liên kết JavaScript với một cú pháp giống HTML được gọi là JSX.

Bắt đầu một dự án React mới từng là một quá trình phức tạp gồm nhiều bước liên quan đến việc thiết lập hệ thống xây dựng, trình chuyển mã để chuyển đổi cú pháp hiện đại thành mã có thể đọc được bởi tất cả các trình duyệt và cấu trúc thư mục cơ sở. Nhưng bây giờ, Create React App đã bao gồm tất cả các gói JavaScript bạn cần để chạy một dự án React, bao gồm chuyển mã, linting cơ bản, thử nghiệm và xây dựng hệ thống. Nó cũng bao gồm một máy chủ có tải lại nóng sẽ làm mới trang của bạn khi bạn thực hiện các thay đổi mã lệnh. Cuối cùng, nó sẽ tạo cấu trúc cho các thư mục và thành phần của bạn để bạn có thể bắt đầu viết mã chỉ trong vài phút.

Nói cách khác, bạn không phải lo lắng về việc cấu hình một hệ thống xây dựng như Webpack. Bạn không cần thiết lập Babel để truyền mã của bạn để có thể sử dụng trên nhiều trình duyệt. Bạn không phải lo lắng về hầu hết các hệ thống phức tạp của sự phát triển front-end hiện đại. Bạn có thể bắt đầu viết mã React với sự chuẩn bị tối thiểu.

Đến cuối hướng dẫn này, bạn sẽ có một ứng dụng React đang chạy mà bạn có thể sử dụng làm nền tảng cho bất kỳ ứng dụng nào trong tương lai. Bạn sẽ thực hiện những thay đổi đầu tiên đối với mã React, cập nhật kiểu và chạy một bản dựng để tạo ra một phiên bản hoàn chỉnh của ứng dụng. Bạn cũng sẽ sử dụng một máy chủ có tải lại nóng để cung cấp cho bạn phản hồi tức thì và sẽ khám phá sâu hơn các phần của một dự án React. Cuối cùng, bạn sẽ bắt đầu viết các thành phần tùy chỉnh và tạo một cấu trúc có thể phát triển và thích ứng với dự án của bạn.

Điều kiện tiên quyết:

Để làm theo bài hướng dẫn này, bạn sẽ cần những điều sau:

• Node.js phiên bản từ 10.16.0 được cài đặt trên máy tính của bạn. Để cài đặt phần mềm này trên macOS hoặc Ubuntu 18.04, hãy làm theo các bước trong Cách cài đặt Node.js và Tạo Môi trường Phát triển Cục bộ trên macOS hoặc phần Cài đặt Sử dụng PPA của Cách Cài đặt Node.js trên Ubuntu 18.04.
• Bạn cần có hiểu biết cơ bản về JavaScript, cùng với kiến ​​thức cơ bản về HTML và CSS.

Bước 1 - Tạo một dự án mới với Create React App

Trong bước này, bạn sẽ tạo một ứng dụng mới bằng trình quản lý gói npm để chạy một tập lệnh từ xa. Tập lệnh sẽ sao chép các tệp cần thiết vào một thư mục mới và cài đặt tất cả các tệp phụ thuộc.

Khi bạn cài đặt Node, bạn cũng đã cài đặt một ứng dụng quản lý gói có tên là npm. npm sẽ cài đặt các gói JavaScript trong dự án của bạn và cũng theo dõi các thông tin chi tiết về dự án. Nếu bạn muốn tìm hiểu thêm về npm, hãy xem Cách sử dụng Mô-đun Node.js với hướng dẫn npm và package.json của chúng tôi.

npm cũng bao gồm một công cụ gọi là npx, sẽ chạy các gói thực thi. Điều đó có nghĩa là bạn sẽ chạy mã Create React App mà không cần tải xuống dự án trước.

Gói thực thi sẽ chạy cài đặt create-react-app vào thư mục mà bạn chỉ định. Nó sẽ bắt đầu bằng cách tạo một dự án mới trong một thư mục, mà trong hướng dẫn này sẽ được gọi là v1study-tutorial. Một lần nữa, thư mục này không cần phải tồn tại trước; gói thực thi sẽ tạo nó cho bạn. Tập lệnh cũng sẽ chạy npm ins tall bên trong thư mục dự án, thư mục này sẽ tải xuống bất kỳ phần phụ thuộc bổ sung nào.

Để cài đặt dự án cơ sở, hãy chạy lệnh sau:

npx create-react-app v1study-tutorial

Lệnh này sẽ bắt đầu một quá trình xây dựng sẽ tải xuống mã cơ sở cùng với một số phụ thuộc.

Khi tập lệnh kết thúc, bạn sẽ thấy một thông báo thành công dạng như sau:

Trong đó your_file_path sẽ là đường dẫn hiện tại của bạn. Nếu bạn là người dùng macOS, nó sẽ có dạng như /Users/your_username; nếu bạn đang sử dụng máy chủ Ubuntu, nó sẽ có dạng như /home/your_username.

Bạn cũng sẽ thấy danh sách các lệnh npm cho phép bạn chạy, xây dựng, khởi động và kiểm tra ứng dụng của mình. Bạn sẽ khám phá những điều này nhiều hơn trong phần tiếp theo.

Lưu ý: Có một trình quản lý gói khác cho JavaScript được gọi là yarn. Nó được hỗ trợ bởi Facebook và thực hiện nhiều điều tương tự như npm. Ban đầu, yarn cung cấp chức năng mới như tệp khóa, nhưng bây giờ chúng cũng được triển khai bằng npm. Yarn cũng bao gồm một số tính năng khác như bộ nhớ đệm ngoại tuyến. Các khác biệt khác có thể được tìm thấy trên tài liệu về yarn.

Nếu trước đó bạn đã cài đặt yarn trên hệ thống của mình, bạn sẽ thấy danh sách các lệnh yarn, chẳng hạn như bắt đầu yarn hoạt động giống như lệnh npm. Bạn có thể chạy lệnh npm ngay cả khi bạn đã cài đặt yarn. Nếu bạn thích yarn, chỉ cần thay thế npm bằng yarn trong bất kỳ lệnh nào trong tương lai. Kết quả sẽ giống nhau.

Bây giờ dự án của bạn đã được thiết lập trong một thư mục mới. Thay đổi vào thư mục mới:

cd v1study-tutorial

Bây giờ bạn đang ở bên trong thư mục gốc của dự án của bạn. Tại thời điểm này, bạn đã tạo một dự án mới và thêm tất cả các phụ thuộc. Nhưng bạn không thực hiện bất kỳ hành động nào để chạy dự án. Trong phần tiếp theo, bạn sẽ chạy các tập lệnh tùy chỉnh để xây dựng và kiểm tra dự án.

Bước 2 - Sử dụng react-scripts

Trong bước này, bạn sẽ tìm hiểu về các react-scripts khác nhau được cài đặt với repo. Đầu tiên bạn sẽ chạy lệnh test để thực thi mã thử nghiệm. Sau đó, bạn sẽ chạy lệnh build để tạo phiên bản thu nhỏ. Cuối cùng, bạn sẽ xem cách lệnh eject có thể cung cấp cho bạn quyền kiểm soát hoàn toàn đối với việc tùy chỉnh.

Bây giờ bạn đã ở bên trong thư mục dự án, hãy xem tổng quan thư mục nhé. Bạn có thể mở toàn bộ thư mục trong trình soạn thảo văn bản hoặc nếu bạn đang ở trên thiết bị đầu cuối, bạn có thể liệt kê các tệp ra với lệnh sau:

ls -a

Cờ -a đảm bảo rằng đầu ra cũng bao gồm các tệp ẩn. Trường hợp lỗi lệnh do không nhận diện được cờ -a bạn có thể bỏ qua cờ -a, nghĩa là lúc này lệnh đơn giản là: ls

Dù bằng cách nào, bạn sẽ thấy một cấu trúc như thế này:

Giải thích chi tiết:

• node_modules/ chứa tất cả các thư viện JavaScript bên ngoài được ứng dụng sử dụng. Bạn sẽ hiếm khi cần phải mở nó.
• Thư mục public/ chứa một số tệp HTML, JSON và hình ảnh cơ sở. Đây là gốc rễ của dự án của bạn. Bạn sẽ có cơ hội khám phá chúng nhiều hơn trong Bước 4.
• Thư mục src/ chứa mã JavaScript React cho dự án của bạn. Hầu hết công việc bạn làm sẽ nằm trong thư mục này. Bạn sẽ khám phá thư mục này chi tiết trong Bước 5.
• Tệp .gitignore chứa một số thư mục và tệp mặc định mà git - kiểm soát nguồn của bạn - sẽ bỏ qua, chẳng hạn như thư mục node_modules. Các mục bị bỏ qua có xu hướng là các thư mục lớn hơn hoặc tệp nhật ký mà bạn không cần trong kiểm soát nguồn. Nó cũng sẽ bao gồm một số thư mục mà bạn sẽ tạo bằng một số tập lệnh React.
• README.md là một tệp đánh dấu chứa nhiều thông tin hữu ích về Create React App, chẳng hạn như tóm tắt các lệnh và liên kết đến cấu hình nâng cao. Hiện tại, tốt nhất bạn nên để lại tệp README.md khi bạn nhìn thấy nó. Khi dự án của bạn tiến triển, bạn sẽ thay thế thông tin mặc định bằng thông tin chi tiết hơn về dự án của bạn.

Hai tệp cuối cùng được sử dụng bởi trình quản lý gói của bạn. Khi bạn chạy lệnh npx, bạn đã tạo dự án cơ sở, nhưng bạn cũng cài đặt các phần phụ thuộc bổ sung. Khi bạn cài đặt các phần phụ thuộc, bạn đã tạo một file package-lock.json. Tệp này được sử dụng bởi npm để đảm bảo rằng các gói khớp với các phiên bản chính xác. Bằng cách này nếu người khác cài đặt dự án của bạn, bạn có thể đảm bảo rằng chúng có các phụ thuộc giống hệt nhau. Vì tệp này được tạo tự động, bạn sẽ hiếm khi chỉnh sửa tệp này trực tiếp.

Tệp cuối cùng là package.json. Điều này chứa siêu dữ liệu về dự án của bạn, chẳng hạn như tiêu đề, số phiên bản và phần phụ thuộc. Nó cũng chứa các tập lệnh mà bạn có thể sử dụng để chạy dự án của mình.

Mở tệp package.json trong trình soạn thảo văn bản của bạn, bạn sẽ thấy một đối tượng JSON chứa tất cả siêu dữ liệu. Nếu bạn nhìn vào đối tượng script, bạn sẽ thấy có 4 tập lệnh khác nhau: start, build, test, và eject.

Các tập lệnh này được liệt kê theo thứ tự quan trọng. Tập lệnh đầu tiên bắt đầu môi trường phát triển cục bộ; ta sẽ làm điều này trong bước tiếp theo. Tập lệnh thứ hai sẽ xây dựng dự án của bạn. Bạn sẽ khám phá điều này một cách chi tiết trong Bước 4, nhưng bạn nên chạy ngay bây giờ để xem điều gì sẽ xảy ra.

Tập lệnh build

Để chạy bất kỳ tập lệnh npm nào, bạn chỉ cần dùng lệnh npm run script_name vào thiết bị đầu cuối của bạn. Có một số tập lệnh đặc biệt mà bạn có thể bỏ qua phần chạy của lệnh, nhưng nó luôn tốt để chạy lệnh đầy đủ. Để chạy tập lệnh build, hãy nhập nội dung sau vào thiết bị đầu cuối của bạn:

npm run build

Bạn sẽ thấy ngay thông báo sau:

Điều này cho bạn biết rằng Create React App đang biên dịch mã của bạn thành một gói có thể sử dụng được.

Khi hoàn tất, bạn sẽ thấy kết quả sau:

Liệt kê lại nội dung dự án và bạn sẽ thấy một số thư mục mới:

ls -a

Kết quả:

Bây giờ bạn có một thư mục build. Nếu bạn đã mở tệp .gitignore, bạn có thể nhận thấy rằng thư mục build bị bỏ qua bởi git. Đó là bởi vì thư mục build chỉ là một phiên bản thu nhỏ và tối ưu hóa của các tệp khác. Không cần sử dụng kiểm soát phiên bản vì bạn luôn có thể chạy lệnh build. Bạn sẽ khám phá đầu ra nhiều hơn sau; bây giờ, đã đến lúc chuyển sang Tập lệnh test.

Tập lệnh test

Tập lệnh test là một trong những tập lệnh đặc biệt không yêu cầu từ khóa run, nhưng hoạt động ngay cả khi bạn đưa vào từ khóa đó. Tập lệnh này sẽ khởi động một trình chạy thử nghiệm được gọi là Jest. Trình chạy thử nghiệm xem qua dự án của bạn để tìm bất kỳ tệp nào có phần mở rộng .spec.js hoặc .test.js, sau đó chạy các tệp đó.

Để chạy tập lệnh thử nghiệm, hãy nhập lệnh sau:

npm test

Sau khi chạy tập lệnh này, thiết bị đầu cuối của bạn sẽ có đầu ra của bộ thử nghiệm và dấu nhắc thiết bị đầu cuối sẽ biến mất. Nó sẽ trông giống như thế này:

Có một số điều cần lưu ý ở đây. Đầu tiên, như đã lưu ý ở trên, nó tự động phát hiện bất kỳ tệp nào có phần mở rộng là .test.js và .spec.js. Trong trường hợp này, chỉ có một bộ test - nghĩa là, chỉ một tệp có phần mở rộng .test.js - và bộ test đó chỉ chứa một test. Jest có thể phát hiện các test trong hệ thống phân cấp mã của bạn, vì vậy bạn có thể lồng các test vào một thư mục và Jest sẽ tìm thấy chúng.

Thứ hai, Jest không chạy bộ test của bạn một lần rồi thoát. Thay vào đó, nó tiếp tục chạy trong thiết bị đầu cuối. Nếu bạn thực hiện bất kỳ thay đổi nào trong mã nguồn, nó sẽ chạy lại các test một lần nữa.

Bạn cũng có thể giới hạn các test bạn chạy bằng cách sử dụng một trong các tùy chọn bàn phím. Ví dụ: nếu bạn gõ o, bạn sẽ chỉ chạy các test trên các tệp đã thay đổi. Điều này có thể giúp bạn tiết kiệm rất nhiều thời gian khi các bộ test của bạn phát triển.

Cuối cùng, bạn có thể thoát khỏi trình chạy thử nghiệm bằng cách nhập q.

Tập lệnh eject

Tập lệnh cuối cùng là npm eject. Tập lệnh này sao chép các tệp phụ thuộc và tệp cấu hình của bạn vào dự án của bạn, cho phép bạn toàn quyền kiểm soát mã của mình nhưng loại bỏ dự án khỏi chuỗi công cụ tích hợp Create React App. Bạn sẽ không chạy thao tác này ngay bây giờ vì sau khi chạy tập lệnh này, bạn không thể hoàn tác hành động này và bạn sẽ mất mọi bản cập nhật Create React App trong tương lai.

Giá trị của Create React App là bạn không phải lo lắng về số lượng cấu hình đáng kể. Việc xây dựng các ứng dụng JavaScript hiện đại đòi hỏi rất nhiều công cụ từ hệ thống xây dựng, chẳng hạn như Webpack, đến các công cụ biên dịch, chẳng hạn như Babel. Create React App sẽ xử lý tất cả các cấu hình cho bạn, vì vậy việc loại bỏ có nghĩa là bạn tự giải quyết sự phức tạp này.

Nhược điểm của Create React App là bạn sẽ không thể tùy chỉnh hoàn toàn dự án. Đối với hầu hết các dự án, đó không phải là vấn đề, nhưng nếu bạn muốn kiểm soát tất cả các khía cạnh của quá trình xây dựng, bạn sẽ cần phải loại bỏ mã. Tuy nhiên, như đã đề cập, khi bạn gỡ mã ra, bạn sẽ không thể cập nhật lên các phiên bản mới của Create React App và bạn sẽ phải tự thêm bất kỳ cải tiến nào theo cách thủ công.

Tại thời điểm này, bạn đã thực thi các tập lệnh để xây dựng và kiểm tra mã của mình. Trong bước tiếp theo, bạn sẽ bắt đầu dự án trên một máy chủ trực tiếp.

Bước 3 - Khởi động máy chủ

Trong bước này, bạn sẽ khởi tạo một máy chủ cục bộ và chạy dự án trong trình duyệt của mình.

Bạn bắt đầu dự án của mình với một tập lệnh npm khác. Giống như npm test, tập lệnh này không cần lệnh run. Khi bạn chạy tập lệnh, bạn sẽ khởi động máy chủ cục bộ, thực thi mã dự án, khởi động trình theo dõi lắng nghe các thay đổi mã và mở dự án trong trình duyệt web.

Bắt đầu dự án bằng cách gõ lệnh sau vào thư mục gốc của dự án của bạn. Đối với hướng dẫn này, thư mục gốc của dự án của bạn là thư mục v1study-tutorial. Đảm bảo mở tệp này trong một thiết bị đầu cuối hoặc tab riêng biệt, vì tập lệnh này sẽ tiếp tục chạy miễn là bạn cho phép:

npm start

Bạn sẽ thấy một số văn bản trình giữ chỗ trong giây lát trước khi máy chủ khởi động, đưa ra kết quả sau:

Nếu bạn đang chạy tập lệnh cục bộ, nó sẽ mở dự án trong cửa sổ trình duyệt của bạn và chuyển tiêu điểm từ thiết bị đầu cuối sang trình duyệt.

Nếu điều đó không xảy ra, bạn có thể truy cập http://localhost: 3000/ để xem trang web đang hoạt động. Nếu bạn đã tình cờ có một máy chủ khác đang chạy trên cổng 3000, điều đó không sao cả. Create React App sẽ phát hiện cổng có sẵn tiếp theo và chạy máy chủ với cổng đó. Nói cách khác, nếu bạn đã có một dự án đang chạy trên cổng 3000, thì dự án mới này sẽ bắt đầu trên cổng 3001.

Nếu bạn đang chạy điều này từ một máy chủ từ xa, bạn vẫn có thể thấy trang web của mình mà không cần bất kỳ cấu hình bổ sung nào. Địa chỉ sẽ là http://your_server_ip:3000. Nếu bạn đã định cấu hình tường lửa, bạn sẽ cần mở cổng trên máy chủ từ xa của mình.

Trong trình duyệt, bạn sẽ thấy dự án mẫu React như sau:

Miễn là tập lệnh đang chạy, bạn sẽ có một máy chủ cục bộ đang hoạt động. Để dừng tập lệnh, bạn đóng cửa sổ terminal đầu cuối hoặc tab hoặc nhập CTRL + C trong cửa sổ đầu cuối hoặc tab đang chạy tập lệnh của bạn.

Tại thời điểm này, bạn đã khởi động máy chủ và đang chạy mã React đầu tiên của mình. Nhưng trước khi thực hiện bất kỳ thay đổi nào đối với mã JavaScript của React, bạn sẽ thấy cách React hiển thị trên trang ngay từ đầu.

Bước 4 - Sửa đổi Trang chủ

Trong bước này, bạn sẽ sửa đổi mã trong thư mục /public. Thư mục public chứa trang HTML cơ sở của bạn. Đây là trang sẽ đóng vai trò là trang gốc cho dự án của bạn. Bạn sẽ hiếm khi chỉnh sửa thư mục này trong tương lai, nhưng nó là cơ sở mà từ đó dự án bắt đầu và là một phần quan trọng của một dự án React.

Nếu bạn đã hủy máy chủ của mình, hãy tiếp tục và khởi động lại nó với npm start, sau đó mở thư mục public/ trong trình soạn thảo văn bản yêu thích của bạn.

Ngoài ra, bạn có thể liệt kê các tệp bằng lệnh ls (bạn cần mở một terminal mới):

ls public/

Bạn sẽ thấy danh sách các tệp như sau:

favicon.ico, logo192.png và logo512.png là các biểu tượng mà người dùng sẽ thấy trong tab của trình duyệt hoặc trên điện thoại của họ. Trình duyệt sẽ chọn các biểu tượng có kích thước phù hợp. Cuối cùng, bạn sẽ muốn thay thế các biểu tượng này bằng các biểu tượng phù hợp hơn với dự án của mình. Còn hiện tại bạn hẵng để yên nhé.

Tệp manifest.json là một tập hợp siêu dữ liệu có cấu trúc mô tả dự án của bạn. Trong số những thứ khác, nó liệt kê biểu tượng nào sẽ được sử dụng cho các tùy chọn kích thước khác nhau.

Tệp robots.txt là thông tin dành cho trình thu thập thông tin web. Nó cho trình thu thập thông tin biết những trang nào được phép hoặc không được phép lập chỉ mục. Bạn sẽ không cần phải thay đổi một trong hai tệp trừ khi có lý do thuyết phục để làm như vậy. Ví dụ: nếu bạn muốn cung cấp cho một số người dùng URL đến nội dung đặc biệt mà bạn không muốn dễ dàng truy cập, bạn có thể thêm nó vào robots.txt và nó sẽ vẫn có sẵn công khai, nhưng không được lập chỉ mục bởi các công cụ tìm kiếm.

Tệp index.html là gốc của ứng dụng của bạn. Đây là tệp mà máy chủ đọc và là tệp mà trình duyệt của bạn sẽ hiển thị. Bạn hãy mở nó trong trình soạn thảo văn bản của bạn và xem.

Đây là những gì bạn sẽ thấy:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Tệp này khá ngắn. Không có hình ảnh hoặc từ nào trong <body>. Đó là bởi vì React tự xây dựng toàn bộ cấu trúc HTML và đưa nó vào với JavaScript. Nhưng React cần biết nơi đưa mã vào và đó là vai trò của index.html.

Trong trình soạn thảo văn bản của bạn, hãy thay đổi nội dung trong thẻ <title> từ React App thành Sandbox.

<title>Sandbox</title>

Lưu và kiểm tra trình duyệt của bạn. Tiêu đề là tên nằm trên tab trình duyệt. Nó sẽ tự động cập nhật. Nếu không, hãy làm mới trang để thấy sự thay đổi.

Bây giờ quay lại trình soạn thảo văn bản của bạn. Mọi dự án React đều bắt đầu từ một phần tử gốc. Có thể có nhiều phần tử gốc trên một trang, nhưng cần phải có ít nhất một phần tử. Đây là cách React biết nơi đặt mã HTML đã tạo. Tìm phần tử <div id = "root">. Đây là div mà React sẽ sử dụng cho tất cả các bản cập nhật trong tương lai. Thay đổi id từ root thành base:

<div id="base"></div>

Lưu các thay đổi. Bạn sẽ thấy một lỗi trong trình duyệt của mình:

React tìm kiếm một phần tử có id là root. Bây giờ nó đã biến mất, React không thể bắt đầu dự án.

Thay đổi tên trở lại từ base thành root:

<div id="root"></div>

Lưu và quay trở lại trình duyệt để kiểm tra xem đã hết lỗi chưa.

Như vậy, bạn đã khởi động máy chủ và thực hiện một vài thay đổi nhỏ đối với trang HTML gốc. Bạn vẫn chưa thay đổi bất kỳ mã JavaScript nào. Trong phần tiếp theo, bạn sẽ cập nhật mã JavaScript của React.

Bước 5 - Sửa đổi thẻ tiêu đề và Style

Trong bước này, bạn sẽ thực hiện thay đổi đầu tiên đối với một thành phần React trong thư mục src/. Bạn sẽ thực hiện một thay đổi nhỏ đối với CSS và mã JavaScript sẽ tự động cập nhật trong trình duyệt của bạn bằng tính năng tải lại nóng được tích hợp sẵn.

Nếu bạn đã dừng máy chủ, hãy đảm bảo khởi động lại nó sử dụng lệnh npm start. Bây giờ, hãy dành chút thời gian để xem các thành phần của thư mục src/. Bạn có thể mở thư mục đầy đủ trong trình soạn thảo văn bản yêu thích của mình hoặc bạn có thể liệt kê dự án trong một thiết bị đầu cuối bằng lệnh sau:

ls src

Bạn sẽ thấy các tệp sau trong thiết bị đầu cuối hoặc trình soạn thảo văn bản của bạn:

Chúng ta hãy xem xét từng tệp một.

Tệp reportWebVitals.js có thể quan trọng khi bạn bắt đầu tạo các ứng dụng web tiến bộ, bởi vì service worker có thể làm nhiều việc bao gồm thông báo đẩy và bộ nhớ đệm ngoại tuyến. Tuy nhiên hiện tại ta chưa cần quan tâm đó file này.

Các tệp tiếp theo cần tìm hiểu là setupTests.js và App.test.js. Chúng được sử dụng cho các tệp test. Khi bạn chạy lệnh npm test ở Bước 2, thì tập lệnh đã chạy các tệp này. Tệp setupTests.js có nội dung ngắn gọn; nó chỉ bao gồm một vài phương thức mong đợi tùy chỉnh. Bạn sẽ tìm hiểu thêm về những điều này trong các hướng dẫn trong tương lai của loạt bài này.

Tiếp theo ta mở file App.test.js ra, bạn sẽ thấy một test cơ bản:

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

Test đang tìm kiếm cụm từ learn react có trong tài liệu. Nếu bạn quay lại trình duyệt đang chạy dự án của mình, bạn sẽ thấy cụm từ này trên trang. React test khác với unit tests. Vì các thành phần có thể bao gồm thông tin trực quan, chẳng hạn như đánh dấu, cùng với logic để thao tác dữ liệu, các test đơn vị truyền thống không hoạt động dễ dàng. React test gần với một form chức năng hoặc kiểm thử tích hợp.

Tiếp theo, bạn sẽ thấy một số tệp tạo style: App.css, index.css và logo.svg. Có nhiều cách để làm việc với việc tạo style trong React, nhưng cách dễ nhất là viết CSS thuần túy vì điều đó không yêu cầu cấu hình bổ sung.

Có nhiều tệp CSS vì bạn có thể import các style vào một component giống như việc import các tệp JavaScript khác. Vì bạn có quyền import CSS trực tiếp vào một component, bạn cũng có thể tách CSS để chỉ áp dụng cho một thành phần riêng lẻ. Những gì bạn đang làm là tách rời những mối quan tâm. Bạn không giữ tất cả CSS tách biệt với JavaScript. Thay vào đó, bạn đang giữ tất cả CSS, JavaScript, đánh dấu và hình ảnh có liên quan được nhóm lại với nhau.

Mở App.css trong trình soạn thảo văn bản của bạn, bạn sẽ thấy nó dạng như sau:

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Đây là tệp CSS tiêu chuẩn không có bộ tiền xử lý CSS đặc biệt. Bạn có thể thêm chúng sau nếu muốn, nhưng lúc đầu, bạn chỉ có CSS ​​thuần túy. Create React App cố gắng không được tích hợp trong khi vẫn cung cấp một môi trường độc đáo.

Quay lại App.css, một trong những lợi ích của việc sử dụng Create React App là nó xem tất cả các tệp, vì vậy nếu bạn thực hiện thay đổi, bạn sẽ thấy nó trong trình duyệt của mình mà không cần tải lại.

Để thực hiện điều này, hãy thực hiện một thay đổi nhỏ đối với màu nền trong App.css. Thay đổi nó từ #282c34 thành màu blue rồi lưu tệp:

.App-header {
  background-color: blue;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

Kiểm tra trình duyệt của bạn, bạn sẽ thấy màu nền là blue.

Hãy tiếp tục và thay đổi màu nền trở lại thành #282c34 rồi lưu lại.

Bạn đã thực hiện một thay đổi CSS nhỏ. Bây giờ đã đến lúc thực hiện các thay đổi đối với mã React JavaScript. Bắt đầu bằng cách mở index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Ở dòng trên cùng ta có import React, ReactDOM, index.css, App và reportWebVitals. Bằng cách import React, bạn thực sự đang lấy mã để chuyển đổi JSX sang JavaScript. JSX là các phần tử giống HTML. Ví dụ: lưu ý cách khi bạn sử dụng App, bạn coi nó như một phần tử HTML <App />. Bạn sẽ khám phá điều này nhiều hơn trong các hướng dẫn tiếp theo của loạt bài này.

ReactDOM là mã kết nối mã React của bạn với các phần tử cơ sở, như trang index.html mà bạn đã thấy ở thư mục public/. Nhìn vào dòng sau:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Đoạn mã này hướng dẫn React tìm một phần tử có id là root và đưa mã React vào đó. <App /> là phần tử gốc của bạn và mọi thứ sẽ phân nhánh từ đó. Đây là điểm khởi đầu cho tất cả các mã React trong tương lai.

Ở trên đầu file bạn đã thấy các import. Ở đây ta import index.css, nhưng ta đang không thực sự làm gì với nó. Bằng cách import nó, bạn đang yêu cầu Webpack thông qua các tập lệnh React đưa mã CSS đó vào gói được biên dịch cuối cùng. Nếu bạn không import nó, nó sẽ không hiển thị.

Tiếp theo ta mở file App.js. Mã trong tệp này sẽ giống như một chuỗi các phần tử HTML thông thường. Đây là những gì bạn sẽ thấy:

import logo from './logo.svg';
import './App.css';

function App() {
return (
<div className="App">
  <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <p>
      Edit <code>src/App.js</code> and save to reload.
    </p>
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
  </header>
</div>
);
}

export default App;

Thay đổi nội dung của thẻ <p> từ:

    <p>
      Edit <code>src/App.js</code> and save to reload.
    </p>

thành:

    <p>
      Hello, world
    </p>

rồi lưu lại.

Đi tới trình duyệt của bạn và bạn sẽ thấy sự thay đổi.

Bây giờ bạn đã thực hiện bản cập nhật đầu tiên của mình cho một thành phần React.

Nhưng trước tiên ta cần lưu ý một số điều nữa. Trong component này, ta thấy có import tệp logo.svg và gán nó cho một biến có tên logo. Sau đó, trong phần tử <img>, bạn thêm biến logo vào thuộc tính src.

Có một vài điều đang diễn ra ở đây. Nhìn vào phần tử img:

<img src={logo} className="App-logo" alt="logo" />

Hãy lưu ý cách truyền logo vào cặp ngoặc xoắn {}. Bất cứ khi nào bạn truyền các thuộc tính không phải là chuỗi hoặc số, bạn cần sử dụng cặp ngoặc xoắn {}. React sẽ coi chúng là JavaScript thay vì chuỗi. Trong trường hợp này, bạn không thực sự import hình ảnh; thay vào đó bạn đang tham chiếu hình ảnh. Khi Webpack xây dựng dự án, nó sẽ xử lý hình ảnh và đặt nguồn vào nơi thích hợp.

Nếu bạn nhìn vào các phần tử DOM trong trình duyệt của mình, bạn sẽ thấy nó thêm một đường dẫn. Nếu đang sử dụng Chrome, bạn có thể kiểm tra phần tử bằng cách nhấp chuột phải vào phần tử và chọn Kiểm tra.

Bạn sẽ thấy nó thế này:

DOM có dòng này:

<img src = "/static/media/logo.6ce24c58.svg" class = "App-logo" alt = "logo" >

Mã của bạn sẽ hơi khác vì biểu trưng sẽ có tên khác. Webpack muốn đảm bảo rằng đường dẫn hình ảnh là duy nhất. Vì vậy, ngay cả khi bạn import các hình ảnh có cùng tên, chúng sẽ được lưu bằng các đường dẫn khác nhau.

Như vậy đến đây thì bạn đã thực hiện một thay đổi nhỏ đối với mã JavaScript của React. Trong bước tiếp theo, bạn sẽ sử dụng lệnh build để rút gọn mã thành một tệp nhỏ có thể được triển khai tới máy chủ.

Bước 6 - Xây dựng dự án

Trong bước này, bạn sẽ xây dựng mã thành một gói có thể được triển khai đến các máy chủ bên ngoài.

Quay lại thiết bị đầu cuối của bạn và xây dựng dự án. Bạn đã chạy lệnh này trước đây, nhưng xin nhắc lại, lệnh này sẽ thực thi tập lệnh build. Nó sẽ tạo một thư mục mới với các tệp được kết hợp và rút gọn. Để thực hiện, hãy chạy lệnh sau từ thư mục gốc của dự án của bạn:

npm run build

Lúc này sẽ có thể có độ trễ khi mã biên dịch và khi hoàn tất, bạn sẽ có một thư mục mới có tên là build/.

Mở build/index.html ra bạn sẽ thấy nội dung file sẽ có dạng thế này:

<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Sandbox</title><link href="/static/css/main.a617e044.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,i,a=t[0],c=t[1],l=t[2],s=0,p=[];s<a.length;s++)i=a[s],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&p.push(o[i][0]),o[i]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(t);p.length;)p.shift()();return u.push.apply(u,l||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,a=1;a<r.length;a++){var c=r[a];0!==o[c]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.e=function(e){var t=[],r=o[e];if(0!==r)if(r)t.push(r[2]);else{var n=new Promise((function(t,n){r=o[e]=[t,n]}));t.push(r[2]=n);var u,a=document.createElement("script");a.charset="utf-8",a.timeout=120,i.nc&&a.setAttribute("nonce",i.nc),a.src=function(e){return i.p+"static/js/"+({}[e]||e)+"."+{3:"de9026dd"}[e]+".chunk.js"}(e);var c=new Error;u=function(t){a.onerror=a.onload=null,clearTimeout(l);var r=o[e];if(0!==r){if(r){var n=t&&("load"===t.type?"missing":t.type),u=t&&t.target&&t.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,r[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:a})}),12e4);a.onerror=a.onload=u,document.head.appendChild(a)}return Promise.all(t)},i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/",i.oe=function(e){throw console.error(e),e};var a=this["webpackJsonpv1study-tutorial"]=this["webpackJsonpv1study-tutorial"]||[],c=a.push.bind(a);a.push=t,a=a.slice();for(var l=0;l<a.length;l++)t(a[l]);var f=c;r()}([])</script><script src="/static/js/2.712461ef.chunk.js"></script><script src="/static/js/main.60c24fa8.chunk.js"></script></body></html>

Thư mục build lấy tất cả mã của bạn và biên dịch và thu nhỏ nó thành trạng thái có thể sử dụng nhỏ nhất. Không quan trọng nếu một người có thể đọc nó, vì đây không phải là một đoạn mã công khai. Việc thu nhỏ như vậy sẽ làm cho mã chiếm ít dung lượng hơn trong khi vẫn cho phép nó hoạt động. Không giống như một số ngôn ngữ như Python, khoảng trắng không thay đổi cách máy tính diễn giải mã.

Phần kết luận

Trong hướng dẫn này, bạn đã tạo ứng dụng React đầu tiên của mình, định cấu hình dự án của bạn bằng các công cụ xây dựng JavaScript mà không cần đi sâu vào chi tiết kỹ thuật. Đó là giá trị trong Create React App: bạn không cần phải biết mọi thứ để bắt đầu. Nó cho phép bạn bỏ qua các bước xây dựng phức tạp để bạn có thể tập trung hoàn toàn vào mã React.

Bạn đã học các lệnh để bắt đầu, kiểm tra và xây dựng một dự án. Bạn sẽ sử dụng các lệnh này thường xuyên, vì vậy hãy ghi chú cho các hướng dẫn sau này. Quan trọng nhất, bạn đã cập nhật component React đầu tiên của mình.