Tạo ứng dụng React, tạo ứng dụng đầu tiên của bạn với React trong Ubuntu 20.04

tạo ứng dụng phản ứngcreate react app

Trong phần tiếp theo, chúng ta sẽ xem xét cách chúng ta có thể tạo ứng dụng đầu tiên của mình với ReactJS trên Ubuntu 20.04 bằng Tạo ứng dụng React. ReactJS là một thư viện JavaScript mã nguồn mở được sử dụng để tạo giao diện người dùng, được duy trì bởi Facebook và cộng đồng nhà phát triển. ReactJS có thể được sử dụng trong việc phát triển các ứng dụng web hoặc ứng dụng di động.

Trong React, còn được gọi là ReactJS, dữ liệu được xử lý trong DOM. Cần có các thư viện bổ sung để định tuyến và quản lý trạng thái để chạy ứng dụng React. Một số ví dụ về các thư viện này là Redux y Bộ định tuyến phản ứng.

Cài đặt React trên Ubuntu 20.04

Để cài đặt React trên hệ thống của mình, trước tiên chúng ta phải biết npm là gì và hiểu tại sao chúng ta cần chúng. Npm là viết tắt của Node Package Manager, và nó là cơ quan đăng ký phần mềm nguồn mở lớn nhất thế giới. Chứa hơn 800.000 gói mã. Npm được sử dụng miễn phí và bất kỳ phần mềm công cộng nào cũng có thể được tải xuống và sử dụng mà không cần đăng ký hoặc đăng nhập.

Npm là một công cụ quản lý phụ thuộc cho các ứng dụng javascript, giúp cài đặt tất cả các thư viện và các công cụ khác để hỗ trợ sự phát triển của các ứng dụng JS.

Cài đặt npm

đến cài đặt nodejs, bao gồm npmChúng tôi sẽ chỉ phải mở một thiết bị đầu cuối (Ctrl + Alt + T) và thực hiện lệnh sau:

sudo apt install nodejs

Sau khi hoàn tất cài đặt npm, chúng ta có thể kiểm tra phiên bản của bạn và của nút. Chúng ta có thể thực hiện việc này bằng lệnh:

phiên bản npm được cài đặtversión de npm instalada

npm -v

Phiên bản npm được cài đặt phụ thuộc vào ngày cài đặt, vì quá trình cập nhật được thực hiện thường xuyên. Chúng tôi cần đảm bảo rằng chúng tôi đã cài đặt phiên bản cao hơn 5.

đến kiểm tra phiên bản đã cài đặt của nút, lệnh sử dụng sẽ là:

phiên bản nút đã cài đặtversión de node instalado

node -v

Nếu bạn chưa cài đặt phiên bản npm mới nhất trên hệ thống của mình, bạn có thể cập nhật Node Package Manager (npm) lên phiên bản mới nhất chạy lệnh này trong terminal:

cập nhật npmactualizar npm

sudo npm install -g npm@latest

Cài đặt ứng dụng tạo-phản ứng

Để cài đặt một môi trường React hiệu quả, chúng ta sẽ cần phải cấu hình các công cụ như babel, webpack, v.v. … rất phức tạp để cấu hình cho người mới bắt đầu trong thế giới React. Nhưng chúng tôi có thể tìm thấy một số công cụ sẽ giúp chúng tôi trong việc cấu hình. Trong số đó, chúng tôi sẽ tìm thấy create-react-app, là công cụ dễ sử dụng và cấu hình nhất.

Tạo ứng dụng React là một môi trường thoải mái để học Reactvà đó là cách tốt nhất để bắt đầu xây dựng một ứng dụng trang đơn mới bằng React.

Tạo ứng dụng React định cấu hình môi trường phát triển của bạn để bạn có thể sử dụng các tính năng Javascript mới nhất, mang lại trải nghiệm phát triển tốt và tối ưu hóa ứng dụng của bạn để sản xuất. Như đã chỉ ra trên trang web của họ, cần phải cài đặt Node> = 8.10 và npm> = 5.6 trên máy của bạn.

Chúng ta có thể cài đặt ứng dụng tạo-phản ứng bằng npm. Để thực hiện việc này, trong một terminal (Ctrl + Alt + T), chúng ta sẽ chỉ cần thực hiện lệnh cài đặt sau:

cài đặt tạo ứng dụng phản ứnginstalar create react app

sudo npm install -g create-react-app

Sau khi cài đặt xong ứng dụng create-react-app trong hệ thống của chúng tôi, chúng tôi có thể kiểm tra phiên bản đã cài đặt chạy lệnh sau:

tạo phiên bản ứng dụng phản ứngversión create react app

create-react-app --version

Tạo ứng dụng React đầu tiên

Ứng dụng React đầu tiên của chúng tôi có thể được tạo đơn giản bằng cách sử dụng create-react-app. Chúng tôi sẽ chỉ phải sử dụng lệnh sau:

tạo ứng dụng đầu tiên của tôi với reactjs bằng cách sử dụng ứng dụng tạo phản ứngcreando mi primera app con reactjs utilizando create react app

create-react-app mi-primera-app

Lệnh trên sẽ tạo một ứng dụng React có tên là ứng dụng đầu tiên của tôi. Đồng thời một thư mục mới sẽ được tạo cùng tên với ứng dụng bao gồm tất cả các tệp, cài đặt và thư viện cần thiết.

Chạy ứng dụng React

Sau khi dự án React được tạo, chúng ta sẽ phải chuyển đến thư mục dự án và chạy ứng dụng React bằng lệnh sau trong terminal (Ctrl + Alt + T):

npm start

Lệnh npm bắt đầu khởi động máy chủ phát triển sẽ thực hiện toàn bộ quá trình xây dựng.

biên dịch ứng dụng đầu tiên của tôi với reactjscompilación de mi primera app con reactjs

Thiết bị đầu cuối sẽ cho chúng ta biết rằng chúng ta phải mở trình duyệt và tải ứng dụng sẽ chạy tại URL http: // localhost: 3000 theo mặc định. Khi trình duyệt mở ra, chúng ta sẽ thấy biểu tượng React và các văn bản trên màn hình.

ứng dụng đầu tiên được nhìn thấy từ trình duyệtprimera app vista desde el navegador

Gỡ cài đặt ứng dụng tạo-phản ứng và npm

Người sử dụng chúng tôi có thể gỡ cài đặt bất kỳ thư viện nào được cài đặt từ npm bằng lệnh gỡ cài đặt npm. Chạy lệnh sau trong terminal (Ctrl + Alt + T) để gỡ cài đặt tạo-phản ứng-ứng dụng:

loại bỏ tạo ứng dụng phản ứngremove create react app

sudo npm uninstall -g create-react-app

Tương tự, chúng ta có thể gỡ cài đặt npm bằng cách sử dụng lệnh khác này trong cùng một thiết bị đầu cuối:

gỡ cài đặt nodejsdesinstalar nodejs

sudo apt remove nodejs

Bạn có thể tìm thêm thông tin về thư viện JavaScript này để tạo giao diện người dùng trong tài liệu dự án.