Xem trước excel phản ứng

1. Hãy chắc chắn rằng bạn có nút. js trên máy tính của bạn

2. Đảm bảo JavaScript và TypeScript và Trình gỡ lỗi JavaScript . Trang Settings/Preferences | Plugins plugin, tab Đã cài đặt , xem Quản lý plugin để biết chi tiết.

Tạo ứng dụng React với ứng dụng tạo-phản ứng

Cài đặt React trong một dự án IntelliJ IDEA trống

Trong trường hợp này, bạn sẽ phải tự định cấu hình quy trình xây dựng như được mô tả trong phần Xây dựng ứng dụng React bên dưới. Tìm hiểu thêm về cách thêm React vào dự án từ trang web chính thức của React

Mở các nguồn ứng dụng đã có trên máy của bạn

• Nhấp vào Mở hoặc nhập trên màn hình Chào mừng hoặc . Mở File | Open từ menu chính. Trong hộp thoại mở ra, hãy chọn thư mục lưu trữ nguồn của bạn.

Kiểm tra các nguồn ứng dụng từ kiểm soát phiên bản của bạn

1. Nhấp vào Nhận từ VCS trên màn hình Chào mừng .

   Hoặc chọn Tệp. Mới. Dự án từ Kiểm soát phiên bản hoặc Git. Sao chép… từ menu chính.

   Thay vì Git trong menu chính, bạn có thể thấy bất kỳ Hệ thống kiểm soát phiên bản nào khác được liên kết với dự án của bạn. Ví dụ: Mercurial hoặc Perforce .

2. Trong hộp thoại mở ra, hãy chọn hệ thống kiểm soát phiên bản của bạn từ danh sách và chỉ định kho lưu trữ để kiểm tra các nguồn ứng dụng từ. Xem Kiểm tra một dự án (bản sao) để biết chi tiết

Tải xuống các phụ thuộc

1. Nhấp vào Chạy 'cài đặt npm' hoặc Chạy 'cài đặt sợi' in the popup:

   

   Bạn có thể sử dụng npm, Sợi 1 hoặc Sợi 2, xem npm và Sợi để biết chi tiết

2. Chọn Chạy 'cài đặt npm' hoặc Chạy 'cài đặt sợi' from the context menu of package.json trong trình chỉnh sửa hoặc trong cửa sổ công cụ Dự án .

an ninh dự án

Khi bạn mở một dự án được tạo bên ngoài IntelliJ IDEA và được nhập vào dự án đó, IntelliJ IDEA sẽ hiển thị một hộp thoại trong đó bạn có thể quyết định cách xử lý dự án này bằng mã nguồn lạ

Chọn một trong các tùy chọn sau

• Xem trước ở Chế độ an toàn . trong trường hợp này là IntelliJ IDEA, mở dự án ở chế độ xem trước. Điều đó có nghĩa là bạn có thể duyệt các nguồn của dự án nhưng bạn không thể chạy các tác vụ và tập lệnh hoặc chạy/gỡ lỗi dự án của mình.

  IntelliJ IDEA hiển thị thông báo ở đầu khu vực trình chỉnh sửa và bạn có thể nhấp vào liên kết Tin tưởng dự án… và tải dự án của mình bất cứ lúc nào .

• Dự án tin cậy . trong trường hợp này, IntelliJ IDEA sẽ mở và tải một dự án. Điều đó có nghĩa là dự án được khởi tạo, plugin của dự án được giải quyết, các thành phần phụ thuộc được thêm vào và tất cả các tính năng của IntelliJ IDEA đều khả dụng.

• Không mở . trong trường hợp này, IntelliJ IDEA không mở dự án.

Tìm hiểu thêm từ Bảo mật dự án

Dự án được tạo từ màn hình Chào mừng hoặc qua Tệp. Mới. Dự án như được mô tả trong sẽ tự động được coi là đáng tin cậy.

Hoàn thành các phương thức, thuộc tính và sự kiện của React

Theo mặc định, cửa sổ bật lên hoàn thành mã được hiển thị tự động khi bạn nhập. Ví dụ

Trong các thẻ JSX, IntelliJ IDEA cung cấp hỗ trợ mã hóa cho các thuộc tính dành riêng cho React, chẳng hạn như className hoặc classID và các thuộc tính không phải DOM, chẳng hạn như key hoặc npm install --g create-react-app0. Ngoài ra, tính năng tự động hoàn thành cũng hoạt động đối với tên của các lớp được xác định trong tệp CSS của dự án

Tất cả các sự kiện React, chẳng hạn như npm install --g create-react-app1 hoặc npm install --g create-react-app2, cũng có thể được hoàn thành tự động cùng với dấu ngoặc nhọn npm install --g create-react-app3 hoặc dấu ngoặc kép npm install --g create-react-app4

Theo mặc định, dấu ngoặc nhọn được chèn vào. Bạn có thể có IntelliJ IDEA luôn thêm dấu ngoặc kép hoặc chọn giữa dấu ngoặc kép hoặc dấu ngoặc nhọn dựa trên loại từ tệp định nghĩa TypeScript (d. ts). Để thay đổi cài đặt mặc định, hãy mở hộp thoại Cài đặt/Tùy chọn (Ctrl+Alt+S), đi tới Trình chỉnh sửa. Kiểu mã. HTML và chọn tùy chọn áp dụng từ danh sách Thêm cho thuộc tính JSX .

Hoàn thành cũng hoạt động cho các biểu thức JavaScript bên trong dấu ngoặc nhọn. Điều này áp dụng cho tất cả các phương thức và chức năng mà bạn đã xác định

Hoàn thành các thẻ HTML và tên thành phần

IntelliJ IDEA cung cấp khả năng hoàn thành mã cho các thẻ HTML và tên thành phần mà bạn đã xác định bên trong các phương thức trong JavaScript hoặc bên trong các thành phần khác

Hoàn thành cũng hoạt động đối với các thành phần đã nhập với cú pháp kiểu ES6

Hoàn thành thuộc tính thành phần

IntelliJ IDEA cung cấp tính năng hoàn thành mã cho các thuộc tính thành phần được xác định bằng cách sử dụng npm install --g create-react-app5 và giải quyết chúng để bạn có thể nhanh chóng chuyển hoặc xem trước định nghĩa của chúng

Khi bạn tự động điền tên của một thành phần, IntelliJ IDEA sẽ tự động thêm tất cả các thuộc tính bắt buộc của thành phần đó. Nếu một số thuộc tính bắt buộc bị thiếu trong quá trình sử dụng một thành phần, thì IntelliJ IDEA sẽ cảnh báo bạn về điều đó

Tạo cấu trúc mã React từ một đoạn mã

• Nhập từ viết tắt được yêu cầu trong trình chỉnh sửa và nhấn Tab

• Nhấn Ctrl + J và chọn đoạn trích có liên quan. Để thu hẹp phạm vi tìm kiếm, hãy bắt đầu nhập từ viết tắt rồi chọn từ danh sách hoàn thành

Xem Mẫu trực tiếp để biết chi tiết

Xem danh sách tất cả các đoạn mã React có sẵn

• Trong hộp thoại Cài đặt/Tùy chọn (Ctrl+Alt+S), nhấp vào Mẫu trực tiếp< . under Editor, and then expand the React node.

• Để chuyển đến phần khai báo của một phương thức hoặc một biểu thức JavaScript bên trong dấu ngoặc nhọn create-react-app1, hãy chọn phương thức hoặc biểu thức đó rồi nhấn Ctrl+B

  Để chuyển đến phần khai báo của một thành phần, hãy chọn tên thành phần và nhấn Ctrl+B

  Ngoài ra, sử dụng Ctrl+Click. nhấn giữ Ctrl, di con trỏ chuột lên biểu tượng. Khi biểu tượng biến thành siêu liên kết, phần khai báo của nó sẽ được hiển thị trong chú giải công cụ. Nhấp vào siêu liên kết mà không nhả khóa để mở tờ khai trong trình chỉnh sửa. Tìm hiểu thêm từ Đi đến khai báo và loại của nó

• Để xem định nghĩa thành phần, nhấn Ctrl+Shift+I

  
  

• Để xem tài liệu nhanh cho một thành phần, hãy nhấn Ctrl+Q. Tìm hiểu thêm từ tra cứu tài liệu JavaScript

  

• IntelliJ IDEA cho phép bạn dễ dàng điều hướng qua các thẻ JSX bằng cách sử dụng breadcrumbs và đánh dấu đầy màu sắc cho cây thẻ trong trình chỉnh sửa

  

ESLint

Bên cạnh việc cung cấp tính năng kiểm tra mã tích hợp, IntelliJ IDEA còn tích hợp với các linters, chẳng hạn như ESLint, dành cho mã JSX. ESLint mang đến một loạt các quy tắc xơ vải cũng có thể được mở rộng bằng các plugin. IntelliJ IDEA hiển thị các cảnh báo và lỗi do ESLint báo cáo ngay trong trình chỉnh sửa khi bạn nhập. Với ESLint, bạn cũng có thể sử dụng JavaScript Standard Style cũng như lint mã TypeScript của mình

Xem ESLint để biết chi tiết

Để ESLint hiểu đúng cú pháp React JSX, bạn cần eslint-plugin-react. Ví dụ: với plugin này, bạn được cảnh báo khi tên hiển thị không được đặt cho thành phần React hoặc khi một số thuộc tính JSX nguy hiểm được sử dụng

Nếu bạn đã tạo ứng dụng của mình bằng ứng dụng tạo phản ứng, thì môi trường phát triển của bạn đã được định cấu hình sẵn để sử dụng ESLint

Đổi tên một thành phần

Dưới đây là một ví dụ về đổi tên một thành phần được xác định và sử dụng chỉ trong một tệp

Theo cách tương tự, bạn có thể đổi tên các thành phần được xác định trong một tệp và sau đó được nhập vào một tệp khác bằng cách sử dụng lệnh xuất có tên

Đổi tên một giá trị trạng thái

Khi bạn đổi tên một giá trị trạng thái, IntelliJ IDEA đề xuất đổi tên setter tương ứng (hàm cập nhật giá trị trạng thái này trong hook useState của React)

Trích xuất một thành phần

Bạn có thể tạo một thành phần React mới bằng cách trích xuất mã JSX từ phương thức kết xuất của một thành phần hiện có. Thành phần mới có thể được định nghĩa là một hàm hoặc một lớp, xem Thành phần hàm và lớp trên trang web chính thức của React

Chuyển đổi một hàm thành một thành phần lớp

Với quá trình tái cấu trúc Chuyển đổi thành thành phần lớp , IntelliJ IDEA tạo một lớp ES6 có tên của hàm mà bạn muốn chuyển đổi. Lớp này mở rộng npx create-react-app 0 và chứa một phương thức npx create-react-app 1 trong đó thân hàm được di chuyển. Tìm hiểu thêm từ trang web chính thức của React.

Chuyển đổi một lớp thành một thành phần chức năng

Với quá trình tái cấu trúc Chuyển đổi thành Thành phần Chức năng , IntelliJ IDEA tạo một hàm có tên của lớp mà bạn muốn chuyển đổi và di chuyển .

Chạy một ứng dụng React

Chỉ dành cho các ứng dụng được tạo bằng create-react-app

Nhờ Thay thế mô-đun nóng Webpack, khi máy chủ phát triển đang chạy, ứng dụng của bạn sẽ tự động được tải lại ngay khi bạn thay đổi bất kỳ tệp nguồn nào và lưu các bản cập nhật

Gỡ lỗi ứng dụng React

• Chỉ dành cho các ứng dụng được tạo bằng create-react-app

• Gỡ lỗi mã JavaScript chỉ được hỗ trợ trong Google Chrome và trong các trình duyệt dựa trên Chromium khác

Bạn có thể bắt đầu phiên sửa lỗi theo nhiều cách khác nhau tùy thuộc vào nơi ứng dụng của bạn đang chạy

• Nếu ứng dụng của bạn đang chạy trên npx create-react-app 8, bạn cũng có thể khởi động trình gỡ lỗi từ Terminal tích hợp sẵn hoặc từ Run tool window. See Debug applications running on localhost below.

• Để gỡ lỗi các ứng dụng chạy trên các URL tùy chỉnh, hãy tạo một cấu hình thuộc loại Gỡ lỗi JavaScript và chỉ định địa chỉ URL nơi ứng dụng của bạn đang thực sự chạy. Xem phần Gỡ lỗi ứng dụng chạy trên URL tùy chỉnh bên dưới

  Quy trình làm việc chung này cũng hoạt động đối với các ứng dụng chạy trên npx create-react-app 8 và đối với các ứng dụng được tạo bằng ứng dụng tạo-phản ứng

Khi điểm dừng đầu tiên được nhấn, hãy chuyển sang cửa sổ công cụ Gỡ lỗi và tiếp tục như bình thường. xem qua chương trình, dừng và tiếp tục thực thi chương trình, kiểm tra chương trình khi bị treo, khám phá ngăn xếp cuộc gọi và các biến, đặt đồng hồ, đánh giá các biến, xem HTML DOM thực, v.v.

Chạy thử nghiệm từ trình chỉnh sửa

• Nhấp vào

  
  hoặc
  
  trong máng xối và chọn Chạy from the list.
  

  Bạn cũng có thể xem thử nghiệm đạt hay không đạt ngay trong trình chỉnh sửa nhờ biểu tượng trạng thái thử nghiệm

  
  and
  
  in the gutter.

Tạo cấu hình chạy/gỡ lỗi Jest

1. Mở hộp thoại Cấu hình Chạy/Gỡ lỗi ( Chạy. Chỉnh sửa cấu hình trên menu chính), nhấp vào ở ngăn bên trái và chọn Jest from the list. The Run/Debug Configuration: Jest dialog opens.

   Hoặc chọn một tệp thử nghiệm trong cửa sổ công cụ Dự án và chọn Tạo from the context menu.

2. Chỉ định trình thông dịch Node sẽ sử dụng và thư mục làm việc của ứng dụng. Theo mặc định, trường Thư mục làm việc hiển thị thư mục gốc của dự án. Để thay đổi cài đặt được xác định trước này, hãy chỉ định đường dẫn đến thư mục mong muốn.

3. Trong trường gói Jest , chỉ định đường dẫn đến tập lệnh phản ứng package.

4. Trong trường Tùy chọn trò chơi , hãy nhập cd 0.

   

Chạy thử nghiệm

1. Chọn cấu hình chạy/gỡ lỗi Jest từ danh sách trên thanh công cụ chính và nhấp vào

   
    ở bên phải danh sách.

2. Giám sát việc thực hiện kiểm tra và phân tích kết quả kiểm tra trong tab Người chạy kiểm tra của Chạy tool window, see Explore test results for details.

kiểm tra gỡ lỗi

1. Chọn cấu hình chạy/gỡ lỗi Jest từ danh sách trên thanh công cụ chính và nhấp vào  ở bên phải danh sách.

2. Trong cửa sổ công cụ Gỡ lỗi mở ra, hãy tiếp tục như bình thường. bước qua các bài kiểm tra, dừng và tiếp tục thực hiện kiểm tra, kiểm tra bài kiểm tra khi bị treo, chạy các đoạn mã JavaScript trong Bảng điều khiển, v.v.