hocvietcode.com
  • Trang chủ
  • Học lập trình
    • Lập trình C/C++
    • Lập trình HTML
    • Lập trình Javascript
      • Javascript cơ bản
      • ReactJS framework
      • AngularJS framework
      • Typescript cơ bản
      • Angular
    • Lập trình Mobile
      • Lập Trình Dart Cơ Bản
        • Dart Flutter Framework
    • Cơ sở dữ liệu
      • MySQL – MariaDB
      • Micrsoft SQL Server
      • Extensible Markup Language (XML)
      • JSON
    • Lập trình PHP
      • Lập trình PHP cơ bản
      • Laravel Framework
    • Lập trình Java
      • Java Cơ bản
    • Cấu trúc dữ liệu và giải thuật
    • Lập Trình C# Cơ Bản
    • Machine Learning
  • WORDPRESS
    • WordPress cơ bản
    • WordPress nâng cao
    • Chia sẻ WordPress
  • Kiến thức hệ thống
    • Microsoft Azure
    • Docker
    • Linux
  • Chia sẻ IT
    • Tin học văn phòng
      • Microsoft Word
      • Microsoft Excel
    • Marketing
      • Google Adwords
      • Facebook Ads
      • Kiến thức khác
    • Chia sẻ phần mềm
    • Review công nghệ
    • Công cụ – tiện ích
      • Kiểm tra bàn phím online
      • Kiểm tra webcam online
Đăng nhập
  • Đăng nhập / Đăng ký

Please enter key search to display results.

Home
  • ReactJS
Tìm hiểu các Script trong ReactJS

Tìm hiểu các Script trong ReactJS

  • 20-09-2022
  • Toanngo92
  • 0 Comments

Mục lục

  • ‘build’ Script
  • ‘test’ Script
  • ‘eject’ script

‘build’ Script

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

npm run build

Bạn sẽ ngay lập tức thấy thông báo hiển thị trên terminal:

> [email protected] build
> react-scripts build  
Creating an optimized production build...

Điều này cho bạn biết 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:


Compiled successfully.

File sizes after gzip:

  46.38 kB  build\static\js\main.2df6b2a9.js
  1.78 kB   build\static\js\787.fad1ebcf.chunk.js
  541 B     build\static\css\main.073c9b0a.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

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:

 https://cra.link/deployment

Kiểm tra lại cấu trúc thư mục dự án, bạn sẽ thấy xuất hiện một thư mục mới là build, đây chỉ là phiên bản mã nguồn đã được minified và optimized cho môi trường chạy. Bạn có thể chạy lệnh dưới để bắt đầu tiến trình phục vụ:

serve -s build

‘test’ Script

Test script là một trong những script đặ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 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:

test npm

Sau khi chạy tập lệnh này, terminal 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:

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 bất kỳ tệp 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 tệp có phần mở rộng .test.js — và bộ thử nghiệm đó chỉ chứa một thử nghiệm.

Thứ hai, Jest không chạy bộ thử nghiệm 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 bài kiểm tra sau đó

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 nhập o, bạn sẽ chỉ chạy các bài kiểm tra 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ộ 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ử nghiệm bằng cách nhập 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.

‘eject’ script

Script 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 Tạo ứng dụng React trong tương lai (Nói chung, script này ít khi được sử dụng hơn).

Bài viết liên quan:

useMemo trong ReactJS
Định tuyến trong ứng dụng React với React Router
Giới thiệu Redux và quản lý state với Redux trong React
Gọi API trong React với useEffect Hook
Xử lý tải dữ liệu bất đồng bộ (Async Data Loading), lazyload trong React
Xử lý Form (biểu mẫu) trong React
Xử lý các sự kiện trong DOM và Window bằng React
Debug (gỡ lỗi) React component thông qua React Developer Tools
khái niệm React Context và chia sẻ state qua các component với React Context
Cách quản lý state(trạng thái) bằng Hooks trên React Component
React strict mode (chế độ phát triển) trong React
Quản lý state (trạng thái) trong React Class Component

THÊM BÌNH LUẬN Cancel reply

Dịch vụ thiết kế Wesbite

NỘI DUNG MỚI CẬP NHẬT

2. PHÂN TÍCH VÀ ĐẶC TẢ HỆ THỐNG

1. TỔNG QUAN KIẾN THỨC THỰC HÀNH TRIỂN KHAI DỰ ÁN CÔNG NGHỆ THÔNG TIN

Hướng dẫn tự cài đặt n8n comunity trên CyberPanel, trỏ tên miền

Mẫu prompt tạo mô tả chi tiết bối cảnh

Một số cải tiến trong ASP.NET Core, Razor Page, Model Binding, Gabbage collection

Giới thiệu

hocvietcode.com là website chia sẻ và cập nhật tin tức công nghệ, chia sẻ kiến thức, kỹ năng. Chúng tôi rất cảm ơn và mong muốn nhận được nhiều phản hồi để có thể phục vụ quý bạn đọc tốt hơn !

Liên hệ quảng cáo: [email protected]

Kết nối với HỌC VIẾT CODE

© hocvietcode.com - Tech888 Co .Ltd since 2019

Đăng nhập

Trở thành một phần của cộng đồng của chúng tôi!
Registration complete. Please check your email.
Đăng nhập bằng google
Đăng kýBạn quên mật khẩu?

Create an account

Welcome! Register for an account
The user name or email address is not correct.
Registration confirmation will be emailed to you.
Log in Lost your password?

Reset password

Recover your password
Password reset email has been sent.
The email could not be sent. Possible reason: your host may have disabled the mail function.
A password will be e-mailed to you.
Log in Register
×