GALAXY TECH
Chuyên gia Công nghệ
Thứ hai, 30/03/2020 | 00:00 GMT+7

Cách thiết lập một dự án React với Tạo ứng dụng React

React là một khung 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 gắn 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 cài đặt 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 folder 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 server có reload nóng sẽ làm mới trang web khi bạn thực hiện thay đổi mã. Cuối cùng, nó sẽ tạo một cấu trúc cho các folder 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 cài đặt Babel để chuyển mã của bạn để có thể sử dụng được 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 một version hoàn chỉnh của ứng dụng. Bạn cũng sẽ sử dụng một server có tính năng reload 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.

Yêu cầu

Để làm theo hướng dẫn này, bạn cần những thứ sau:

Bước 1 - Tạo một dự án mới với Tạo ứng dụng React

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 file cần thiết vào một folder mới và cài đặt tất cả các file 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 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 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 ta .

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

Gói thực thi sẽ chạy cài đặt create-react-app vào folder 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 folder , mà trong hướng dẫn này sẽ được gọi là digital-ocean-tutorial . , folder 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 install bên trong folder dự án, folder này sẽ download 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 digital-ocean-tutorial

Lệnh này sẽ bắt đầu một quá trình xây dựng sẽ download 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 cho biết:

Output
... Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial Inside that directory, you can run several commands:    npm start     Starts the development server.    npm run build     Bundles the app into static files for production.    npm test     Starts the test runner.    npm run eject     Removes this tool and copies build dependencies, configuration files     and scripts into the app directory. If you do this, you can’t go back!  We suggest that you begin by typing:    cd digital-ocean-tutorial   npm start  Happy hacking!

your_file_path sẽ là đường dẫn hiện tại của bạn. Nếu bạn là user macOS, nó sẽ giống như /Users/ your_username ; nếu bạn đang sử dụng server Ubuntu, nó sẽ nói thông tin 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 bạn . 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ư file 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 offline . Các khác biệt khác có thể được tìm thấy trên tài liệu yarn .

Nếu trước đó bạn đã cài đặt yarn trên hệ thống của bạn, bạn sẽ thấy một danh sách các yarn lệnh như yarn start rằng công việc tương tự như npm lệnh. Bạn có thể chạy các 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 cài đặt trong một folder mới. Thay đổi vào folder mới:

  • cd digital-ocean-tutorial

Đến đây bạn đang ở bên trong folder root của dự án của bạn. Đế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 tập lệnh test để thực thi mã thử nghiệm. Sau đó, bạn sẽ chạy tập lệnh build để tạo version thu nhỏ. Cuối cùng, bạn sẽ xem cách tập 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.

Đến đây bạn đang ở bên trong folder dự án, hãy nhìn xung quanh. Bạn có thể mở toàn bộ folder trong editor của bạn hoặc nếu bạn đang ở trên terminal , bạn có thể liệt kê các file ra bằng lệnh sau:

  • ls -a

Cờ -a đảm bảo kết quả cũng bao gồm các file ẩn.

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

Output
node_modules/ public/ src/ .gitignore README.md package-lock.json package.json

Hãy giải thích từng cái mộ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 mở nó.

  • Thư mục public/ chứa một số file HTML, JSON và hình ảnh cơ sở. Đây là root 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 folder đó. Bạn sẽ khám phá folder này chi tiết trong Bước 5 .

  • Tệp .gitignore chứa một số folder và file mặc định mà git — kiểm soát nguồn của bạn — sẽ bỏ qua, chẳng hạn như folder node_modules . Các mục bị bỏ qua có xu hướng là các folder lớn hơn hoặc file log mà bạn không cần trong kiểm soát nguồn. Nó cũng sẽ bao gồm một số folder mà bạn sẽ tạo bằng một số tập lệnh React.

  • README.md là một file đánh dấu chứa nhiều thông tin hữu ích về Tạo Ứng dụng React, 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 file 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 file 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 ban đầu, bạn đã tạo dự án cơ sở, nhưng bạn cũng cài đặt các 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 trùng với các version 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 họ có các phụ thuộc giống hệt nhau. Vì file này được tạo tự động, bạn sẽ hiếm khi chỉnh sửa file này trực tiếp.

Tệp cuối cùng là package.json . Điều này chứa metadata về dự án của bạn, chẳng hạn như tiêu đề, số version và 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 bạn .

Mở file package.json trong editor yêu thích của bạn:

  • nano package.json

Khi mở file , bạn sẽ thấy một đối tượng JSON chứa tất cả metadata . Nếu bạn nhìn vào đối tượng scripts , bạn sẽ tìm thấy bốn script 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 local ; bạn sẽ đạt được điều đó trong bước tiếp theo. Kịch bản thứ hai sẽ xây dựng dự án của bạn. Bạn sẽ khám phá chi tiết điều này 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 nhập npm run script_name vào terminal của bạn . Có một số tập lệnh đặc biệt mà bạn có thể bỏ qua phần run của lệnh, nhưng chạy toàn bộ lệnh luôn luôn ổn. Để chạy tập lệnh build , hãy nhập nội dung sau vào terminal của bạn:

  • npm run build

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

Output
> digital-ocean-tutorial@0.1.0 build your_file_path/digital-ocean-tutorial > react-scripts build  Creating an optimized production build... ...

Đ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:

Output
... Compiled successfully.  File sizes after gzip:    39.85 KB  build/static/js/9999.chunk.js   780 B      build/static/js/runtime-main.99999.js   616 B     build/static/js/main.9999.chunk.js   556 B     build/static/css/main.9999.chunk.css  The project was built assuming it is hosted at the server root. You can control this with the homepage field in your package.json. For example, add this to build it for GitHub Pages:    "homepage" : "http://myname.github.io/myapp",  The build folder is ready to be deployed. You may serve it with a static server:    serve -s build  Find out more about deployment here:    bit.ly/CRA-deploy

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

  • ls -a 
Output
build/ node_modules/ public/ src/ .gitignore README.md package-lock.json package.json

Đến đây bạn có một folder build . Nếu bạn đã mở file .gitignore , bạn có thể nhận thấy rằng folder build bị bỏ qua bởi git. Đó là bởi vì folder build chỉ là một version thu nhỏ và tối ưu hóa của các file khác. Không cần sử dụng kiểm soát version vì bạn luôn có thể chạy lệnh build . Bạn sẽ khám phá kết quả 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 bao gồm nó. Tập lệnh này sẽ khởi động một trình chạy thử nghiệm được gọi là Jest . Người chạy thử nghiệm xem qua dự án của bạn để tìm các file nào có .spec.js hoặc .test.js , sau đó chạy các file đó.

Để chạy tập lệnh test , hãy nhập lệnh sau:

  • npm test

Sau khi chạy tập lệnh này, terminal của bạn sẽ có kết quả của bộ thử nghiệm và dấu nhắc terminal sẽ không xuất hiện . Nó trông giống như sau :

Output
 PASS  src/App.test.js   ✓ renders learn react link (67ms)  Test Suites: 1 passed, 1 total Tests:       1 passed, 1 total Snapshots:   0 total Time:        4.204s Ran all test suites.  Watch Usage  › Press f to run only failed tests.  › Press o to only run tests related to changed files.  › Press q to quit watch mode.  › Press p to filter by a filename regex pattern.  › Press t to filter by a test name regex pattern.  › Press Enter to trigger a test run.

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

Thứ hai, Jest không chạy bộ thử nghiệm của bạn một lần rồi thoát. Đúng hơn, nó tiếp tục chạy trong terminal . 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 bài kiểm tra .

Bạn cũng có thể giới hạn các bài kiểm tra 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 bài kiểm tra trên các file đã 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ộ thử nghiệm 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ử bằng lệnh q . Làm điều này ngay bây giờ để lấy lại dấu nhắc lệnh của bạn.

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 file phụ thuộc và file 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 bạn nhưng loại bỏ dự án khỏi chuỗi công cụ tích hợp Tạo ứng dụng React. 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 Tạo ứng dụng React trong tương lai.

Giá trị trong 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 . Tạo Ứng dụng React xử lý tất cả cấu hình cho bạn, vì vậy việc loại bỏ 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 cần phải loại bỏ mã. Tuy nhiên, như đã đề cập trước đây, khi bạn gỡ bỏ mã, bạn sẽ không thể cập nhật lên các version 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.

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

Bước 3 - Khởi động server

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

Bạn bắt đầu dự án của bạn 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 server local , 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 lệnh lệnh sau vào folder root của dự án của bạn. Đối với hướng dẫn này, folder root của dự án của bạn là folder digital-ocean-tutorial . Đảm bảo mở file này trong một terminal hoặc tab riêng biệt, bởi 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 giữ chỗ trong giây lát trước khi server khởi động, đưa ra kết quả sau:

Output
Compiled successfully!  You can now view digital-ocean-tutorial in the browser.    http://localhost:3000  Note that the development build is not optimized. To create a production build, use npm run build.

Nếu bạn đang chạy tập lệnh local , 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ừ terminal 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 server 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 server 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 server từ xa, bạn vẫn có thể thấy trang web của bạn 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 đã cấu hình firewall , bạn cần mở cổng trên server từ xa của bạn .

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

Dự án mẫu phản ứng

Miễn là tập lệnh đang chạy, bạn sẽ có một server local hoạt động. Để dừng tập lệnh, hãy đóng cửa sổ hoặc tab terminal hoặc nhập CTRL+C hoặc ⌘-+c trong cửa sổ hoặc tab terminal đang chạy tập lệnh của bạn.

Đến đây, bạn đã khởi động server và đang chạy mã React đầu tiên của bạn . 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 folder public/ . Thư mục public chứa trang HTML cơ sở của bạn. Đây là trang sẽ đóng role là trang root cho dự án của bạn. Bạn sẽ hiếm khi chỉnh sửa folder 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 server của bạn , hãy tiếp tục và khởi động lại nó với npm start , sau đó mở public/ trong editor yêu thích của bạn trong một cửa sổ terminal mới:

  • nano public/

Ngoài ra, bạn có thể liệt kê các file bằng ls :

  • ls public/

Bạn sẽ thấy một danh sách các file như sau:

Output
favicon.ico logo192.png manifest.json index.html logo512.png robots.txt

favicon.ico , logo192.png và logo512.png là các biểu tượng mà user 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 cầ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 bạn . Còn bây giờ, bạn có thể để chúng yên.

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 họ được phép hoặc không được phép lập index . Bạn sẽ không cần phải thay đổi một trong hai file trừ khi có lý do thuyết phục để thực hiện . Ví dụ: nếu bạn muốn cung cấp cho một số user 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 URL đó vào robots.txt và nó sẽ vẫn có sẵn công khai, nhưng không được công cụ tìm kiếm lập index .

Tệp index.html là file root của ứng dụng của bạn. Đây là file mà server đọc và là file mà trình duyệt của bạn sẽ hiển thị. Mở nó trong editor của bạn và xem.

Nếu bạn đang làm việc từ dòng lệnh, bạn có thể mở nó bằng lệnh sau:

  • nano public/index.html

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

digital-ocean-tutorial / public / index.html
<!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à chèn nó với JavaScript. Nhưng React cần biết nơi đưa mã vào và đó là role của index.html .

Trong editor của bạn, hãy thay đổi <title> từ React App thành Sandbox :

digital-ocean-tutorial / public / index.html
<!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" />     ...     <title>Sandbox</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>

Lưu và thoát khỏi editor của bạn. 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 và nhận thấy sự thay đổi.

Bây giờ quay lại editor của bạn. Mọi dự án React đều bắt đầu từ một phần tử root . Có thể có nhiều phần tử root 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 :

digital-ocean-tutorial / public / index.html
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="utf-8" />     ...   <body>     <noscript>You need to enable JavaScript to run this app.</noscript>     <div id="base"></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>

Lưu các thay đổi.

Bạn sẽ thấy một lỗi trong trình duyệt của bạn :

Thông báo lỗi cho biết "Vùng chứa mục tiêu không phải là phần tử DOM"

React đang tìm kiếm một phần tử có id 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 :

digital-ocean-tutorial / public / index.html
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="utf-8" />     ...   <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>

Lưu và thoát khỏi index.html .

Đến đây, bạn đã khởi động server và thực hiện một thay đổi nhỏ đối với trang HTML root . 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à kiểu

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 folder 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 cách sử dụng reload nóng được tích hợp sẵn.

Nếu bạn đã dừng server , hãy đảm bảo khởi động lại nó với npm start . Bây giờ, hãy dành chút thời gian để xem các phần của folder src/ . Bạn có thể mở folder đầy đủ trong editor yêu thích của bạn hoặc bạn có thể liệt kê dự án trong một terminal bằng lệnh sau:

  • ls src/

Bạn sẽ thấy các file sau trong terminal hoặc editor của bạn .

Output
App.css App.js App.test.js index.css index.js logo.svg serviceWorker.js setupTests.js

Ta hãy xem xét từng file một.

Lúc đầu, bạn sẽ không mất nhiều thời gian với file serviceWorker.js , nhưng nó có thể quan trọng khi bạn bắt đầu tạo các ứng dụng web tiến bộ . Service worker có thể làm nhiều việc bao gồm thông báo đẩy và bộ nhớ đệm offline , nhưng hiện tại tốt nhất là bạn nên để nó một mình.

Các file tiếp theo cần xem là setupTests.js và App.test.js Chúng được sử dụng cho các file thử nghiệm. Trên thực tế, khi bạn chạy npm test ở Bước 2, tập lệnh đã chạy các file này. Tệp setupTests.js ngắn; tất cả những gì nó bao gồm là một vài phương pháp expect 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.

Mở App.test.js :

  • nano src/App.test.js

Khi bạn mở nó, bạn sẽ thấy một bài kiểm tra cơ bản:

digital-ocean-tutorial / src / App.test.js
import React from 'react'; import { render } from '@testing-library/react'; import App from './App';  test('renders learn react link', () => {   const { getByText } = render(<App />);   const linkElement = getByText(/learn react/i);   expect(linkElement).toBeInTheDocument(); });

Bài kiểm tra đ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 bạn , bạn sẽ thấy cụm từ trên trang. Thử nghiệm phản ứng khác với hầu hết các thử nghiệm đơn vị . 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 bài kiểm tra đơn vị truyền thống không hoạt động dễ dàng. React testing gần với một dạng kiểm thử chức năng hoặc tích hợp .

Tiếp theo, bạn sẽ thấy một số file tạo kiểu: App.css , index.css và logo.svg . Có nhiều cách làm việc với việc tạo kiểu 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 file CSS vì bạn có thể nhập các kiểu vào một thành phần giống như chúng là một file JavaScript khác. Vì bạn có quyền nhập CSS trực tiếp vào một thành phần, nên 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 group lại với nhau.

Mở App.css trong editor của bạn. Nếu bạn đang làm việc từ dòng lệnh, bạn có thể mở nó bằng lệnh sau:

  • nano src/App.css

Đây là mã bạn sẽ thấy:

digital-ocean-tutorial / src / App.css
.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à file 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. Tạo Ứng dụng React cố gắng không được tích hợp sẵn 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 file , 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 bạn mà không cần reload .

Để xem điều này đang hoạt động, hãy thực hiện một thay đổi nhỏ đối với background-color trong App.css . Thay đổi nó từ #282c34 thành blue rồi lưu file . Kiểu cuối cùng sẽ như thế này:

digital-ocean-tutorial / src / App.css
.App {   text-align: center; } ... .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; } ...  @keyframes App-logo-spin {   from {     transform: rotate(0deg);   }   to {     transform: rotate(360deg);   } }

Kiểm tra trình duyệt của bạn. Đây là cách nó trông như thế nào trước đây:

Ứng dụng phản ứng với nền tối

Đây là cách nó sẽ trông như thế nào sau khi thay đổi:

Ứng dụng React với nền màu xanh lam

Hãy tiếp tục và thay đổi background-color trở lại #282c34 .

digital-ocean-tutorial / src / App.css
.App {   text-align: center;  ...  .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; }  ...  @keyframes App-logo-spin {   from {     transform: rotate(0deg);   }   to {     transform: rotate(360deg);   } }

Lưu và thoát khỏi file .

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

  • nano src/index.js

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

digital-ocean-tutorial / src / index.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker';  ReactDOM.render(<App />, 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();

Ở trên cùng, bạn đang nhập React , ReactDOM , index.css , App và serviceWorker . Bằng lệnh 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 trong tương lai 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 đã xem ở chế độ public/ . Nhìn vào dòng được đánh dấu sau:

digital-ocean-tutorial / src / index.js
... import * as serviceWorker from './serviceWorker';  ReactDOM.render(<App />, document.getElementById('root')); ... serviceWorker.unregister();

Đoạn mã này hướng dẫn React tìm một phần tử có id root và đưa mã React vào đó. <App/> là phần tử root 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.

Ở đầu file , bạn sẽ thấy một vài lần nhập. Bạn nhập index.css , nhưng không thực sự làm gì với nó. Bằng lệnh 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 nhập nó, nó sẽ không hiển thị.

Thoát khỏi src/index.js .

Đến đây, bạn vẫn chưa thấy bất kỳ thứ gì bạn đang xem trong trình duyệt của bạn . Để xem điều này, hãy mở App.js :

  • nano src/App.js

Mã trong file 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:

digital-ocean-tutorial / src / App.js
import React from 'react'; 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 <p> từ Edit <code>src/App.js</code> and save to reload. để Hello, world và lưu các thay đổi .

digital-ocean-tutorial / src / App.js
...  function App() {   return (     <div className="App">       <header className="App-header">         <img src={logo} className="App-logo" alt="logo" />         <p>             Hello, world         </p>         <a           className="App-link"           href="https://reactjs.org"           target="_blank"           rel="noopener noreferrer"         >           Learn React         </a>       </header>     </div>   ); } ...

Truy cập trình duyệt của bạn và bạn sẽ thấy sự thay đổi:

Phản ứng ứng dụng với "Hello, world" trong thẻ đoạn văn

Đến đây bạn đã thực hiện bản cập nhật đầu tiên cho một thành phần React.

Trước khi đi, hãy lưu ý một số điều nữa. Trong thành phần này, bạn nhập file logo.svg và gán nó cho một biến. Sau đó, trong phần tử <img> , bạn thêm mã đó làm src .

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

digital-ocean-tutorial / src / App.js
... function App() {   return (     <div className="App">       <header className="App-header">         <img src={logo} className="App-logo" alt="logo" />         <p>             Hello, world         </p> ...

Lưu ý cách bạn chuyển logo vào dấu ngoặc nhọn. Khi nào bạn chuyển các thuộc tính không phải là chuỗi hoặc số, bạn cần sử dụng dấu ngoặc nhọ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ự nhập hình ảnh; thay vào đó bạn đang tham khảo 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.

Thoát khỏi editor .

Nếu bạn nhìn vào các phần tử DOM trong trình duyệt của bạn , 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 .

Đây là cách nó sẽ trông như thế nào trong trình duyệt:

Kiểm tra phần tử bằng công cụ chrome dev

DOM có dòng này:

<img src="/static/media/logo.5d5d9eef.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 đường dẫn hình ảnh là duy nhất. Vì vậy, ngay cả khi bạn nhập 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.

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

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 cho các server bên ngoài.

Quay lại terminal 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 folder mới với các file được kết hợp và rút gọn. Để thực hiện bản dựng, hãy chạy lệnh sau từ folder root của dự án của bạn:

  • npm run build

Sẽ có độ trễ khi mã biên dịch và khi hoàn tất, bạn sẽ có một folder mới có tên là build/ .

Mở build/index.html trong editor .

  • nano build/index.html

Bạn sẽ thấy thông tin như thế này:

digital-ocean-tutorial / build / index.html
<!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>React App</title><link href="/static/css/main.d1b05096.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 r(r){for(var n,a,p=r[0],l=r[1],c=r[2],i=0,s=[];i<p.length;i++)a=p[i],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,p=1;p<t.length;p++){var l=t[p];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/";var p=this["webpackJsonpdo-create-react-app"]=this["webpackJsonpdo-create-react-app"]||[],l=p.push.bind(p);p.push=r,p=p.slice();for(var c=0;c<p.length;c++)r(p[c]);var f=l;t()}([])</script><script src="/static/js/2.c0be6967.chunk.js"></script><script src="/static/js/main.bac2dbd2.chunk.js"></script></body></html>

Thư mục xây dựng 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ã.

Kết luận

Trong hướng dẫn này, bạn đã tạo ứng dụng React đầu tiên của bạn , 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 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. Quan trọng nhất, bạn đã cập nhật thành phần React đầu tiên của bạn .

Nếu bạn muốn thấy React đang hoạt động, hãy thử Cách hiển thị dữ liệu từ API DigitalOcean với hướng dẫn React của ta .

Tags:

Các tin liên quan