Cách xây dựng một dự án React với Tạo ứng dụng React trong 10 bước – cách tạo ứng dụng phản ứng

Gói Create React App giúp việc tạo và phát triển các ứng dụng React trở nên dễ dàng. Đây là một trong những cách dễ nhất để tạo ra một dự án React mới và là một lựa chọn lý tưởng để sử dụng cho các dự án cá nhân của riêng bạn cũng như cho các ứng dụng nghiêm túc, quy mô lớn. Chúng tôi sẽ đề cập đến,

Bạn đang xem: cách tạo ứng dụng React

Gói Tạo ứng dụng React giúp việc tạo và phát triển ứng dụng React trở nên dễ dàng. < / p>

Đây là một trong những cách dễ nhất để tạo ra một dự án React mới và là một lựa chọn lý tưởng để sử dụng cho các dự án cá nhân của riêng bạn cũng như cho các ứng dụng nghiêm túc, quy mô lớn.

Chúng tôi sẽ trình bày từng bước, cách sử dụng tất cả các tính năng chính của Tạo ứng dụng React để nhanh chóng và dễ dàng xây dựng các dự án React của riêng bạn.

Trong suốt hướng dẫn này, tôi cũng bao gồm rất nhiều mẹo hữu ích mà tôi đã học được thông qua việc xây dựng ứng dụng bằng Create React App để giúp quy trình làm việc của bạn dễ dàng hơn.

Hãy bắt đầu.

Muốn tìm hiểu cách tạo ấn tượng, sản xuất- ứng dụng sẵn sàng với React bằng cách sử dụng Tạo ứng dụng React? Xem The React Bootcamp .

  • Nút được cài đặt trên máy tính của bạn. Bạn có thể tải xuống Node tại nodejs.org . Tạo ứng dụng React yêu cầu phiên bản Node ít nhất là 10.
  • Trình quản lý gói có tên npm. Nó tự động được đưa vào cài đặt Node của bạn. Bạn cần có phiên bản npm ít nhất là 5.2.
  • Một trình soạn thảo mã tốt để làm việc với các tệp dự án của chúng tôi. Tôi thực sự khuyên bạn nên sử dụng trình soạn thảo Visual Studio Code. Bạn có thể lấy nó tại code.visualstudio.com .

Bước 1 . Cách cài đặt Tạo ứng dụng React

Để sử dụng Tạo ứng dụng React, trước tiên chúng ta cần mở dòng lệnh hoặc thiết bị đầu cuối trên máy tính của mình.

Để tạo một dự án React mới, chúng ta có thể sử dụng công cụ npx , với điều kiện bạn phải có phiên bản npm ít nhất là 5.2.

Lưu ý: Bạn có thể kiểm tra phiên bản npm của mình bằng cách chạy trong thiết bị đầu cuối npm - v

npx cung cấp cho chúng tôi khả năng sử dụng gói create-react-app mà không cần phải cài đặt trước trên máy tính của chúng tôi, điều này rất tiện lợi.

Sử dụng npx cũng đảm bảo rằng chúng tôi đang sử dụng phiên bản Tạo Ứng dụng React mới nhất để tạo dự án của mình:

  npx create-react-app my-react -app  

Khi chúng tôi chạy lệnh này, một thư mục có tên “my-react-app” sẽ được tạo ở nơi chúng tôi đã chỉ định trên máy tính của mình và tất cả các gói mà nó yêu cầu sẽ là automa được cài đặt cẩn thận.

Lưu ý: Việc tạo một ứng dụng React mới với create-react-app thường sẽ mất 2-3 phút, đôi khi có thể lâu hơn.

Tạo Ứng dụng React cũng cung cấp cho chúng tôi một số mẫu để sử dụng cho các loại dự án React cụ thể.

Ví dụ: nếu chúng tôi muốn tạo một dự án React sử dụng công cụ TypeScript, chúng tôi có thể sử dụng một mẫu cho công cụ đó thay vì phải cài đặt TypeScript theo cách thủ công.

Để tạo ứng dụng React sử dụng TypeScript, chúng ta có thể sử dụng mẫu Tạo ứng dụng React TypeScript:

  npx create-react-app my-react- app --template typecript  

Bước 2. Xem lại cấu trúc dự án

Khi tệp dự án của chúng tôi có đã được tạo và các phần phụ thuộc của chúng tôi đã được cài đặt, cấu trúc dự án của chúng tôi sẽ trông giống như sau:

  my-react-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── công khai
└── src  

Mỗi tệp và thư mục này dùng để làm gì?

  • README.md là một tệp đánh dấu bao gồm rất nhiều mẹo và liên kết hữu ích có thể giúp bạn khi học cách sử dụng Create React App.
  • node_modules là một thư mục bao gồm tất cả các mã liên quan đến phụ thuộc mà Create React App đã cài đặt. Bạn sẽ không bao giờ cần phải truy cập vào thư mục này.
  • package.json quản lý các phần phụ thuộc ứng dụng của chúng tôi và những gì được bao gồm trong thư mục node_modules cho dự án của chúng tôi, cùng với các tập lệnh mà chúng tôi cần chạy ứng dụng của chúng tôi.
  • .gitignore là một tệp được sử dụng để loại trừ các tệp và thư mục khỏi bị Git theo dõi. Chúng tôi không muốn bao gồm các thư mục lớn như thư mục node_modules
  • public là một thư mục mà chúng tôi có thể sử dụng để lưu trữ các nội dung tĩnh của mình, chẳng hạn như hình ảnh, svgs và phông chữ cho ứng dụng React của chúng tôi.
  • src là một thư mục chứa mã nguồn của chúng tôi. Đó là nơi tất cả các mã liên quan đến React của chúng tôi sẽ tồn tại và là thứ chúng tôi sẽ làm việc chủ yếu để xây dựng ứng dụng của mình.

Lưu ý: Một kho lưu trữ Git mới được tạo bất cứ khi nào bạn thực hiện một dự án mới với Tạo ứng dụng React. Bạn có thể bắt đầu lưu các thay đổi vào ứng dụng của mình ngay lập tức bằng cách sử dụng git add. git commit -m "your commit message" .

Bước 3. Cách chạy Dự án React

Khi bạn đã kéo dự án của mình vào trình soạn thảo mã, bạn có thể mở thiết bị đầu cuối của mình (trong VSCode, đi tới Xem & gt; Thiết bị đầu cuối).

Để bắt đầu dự án React của bạn , bạn có thể chỉ cần chạy:

  npm start  

Khi chúng tôi chạy dự án của mình, một tab trình duyệt mới sẽ tự động mở trên trình duyệt mặc định của máy tính của chúng tôi để xem ứng dụng của chúng tôi.

Máy chủ phát triển sẽ khởi động trên localhost: 3000 và ngay lập tức, chúng tôi có thể thấy trang chủ bắt đầu cho ứng dụng của mình.

Ở đâu nội dung ứng dụng của chúng tôi đến từ?

Nó đến từ tệp App.js trong thư mục src. Nếu chúng ta xem tệp đó, chúng ta có thể bắt đầu thực hiện các thay đổi đối với mã ứng dụng của mình.

  // src / App.js

nhập logo từ "./logo.svg";
nhập "./App.css";

function App () {
  trở về (
    & lt; div className = "Ứng dụng" & gt;
      & lt; header className = "App-header" & gt;
        & lt; img src = {logo} className = "App-logo" alt = "logo" / & gt;
        & lt; p & gt;
          Chỉnh sửa & lt; mã & gt; src / App.js & lt; / code & gt; và lưu để tải lại.
        & lt; / p & gt;
        & lt; a
          className = "Liên kết ứng dụng"
          href = "https://reactjs.org"
          target = "_ blank"
          rel = "noopener noreferrer"
        & gt;
          Học React
        & lt; / a & gt;
      & lt; / tiêu đề & gt;
    & lt; / div & gt;
  );
}

xuất Ứng dụng mặc định;  

Đặc biệt, hãy xóa các thẻ p a và thêm một mã h1 phần tử có tên ứng dụng của chúng tôi, "Người chia sẻ bài viết phản ứng":

  // src / App.js

nhập logo từ "./logo.svg";
nhập "./App.css";

function App () {
  trở về (
    & lt; div className = "Ứng dụng" & gt;
      & lt; header className = "App-header" & gt;
        & lt; img src = {logo} className = "App-logo" alt = "logo" / & gt;
        & lt; h1 & gt; React Người chia sẻ bài đăng & lt; / h1 & gt;
      & lt; / tiêu đề & gt;
    & lt; / div & gt;
  );
}

xuất ứng dụng mặc định;  

Khi bạn lưu bằng cách sử dụng Command / Ctrl + S, bạn sẽ thấy trang của chúng tôi được cập nhật ngay lập tức để trông giống như sau:

Điều tuyệt vời ở máy chủ phát triển là nó tự động làm mới để phản ánh các thay đổi của chúng tôi. Không cần phải làm mới trình duyệt theo cách thủ công.

Lưu ý: Lần duy nhất bạn có thể cần phải làm mới trình duyệt khi làm việc với Create React App là khi bạn gặp lỗi.

Bước 4. Cách Chạy Thử nghiệm với Thư viện Thử nghiệm React

Tạo Ứng dụng React rất đơn giản để kiểm tra ứng dụng React của bạn.

Nó bao gồm tất cả các gói bạn cần để chạy thử nghiệm bằng Thư viện thử nghiệm React ( @ testing-library / react ).

Một thử nghiệm cơ bản là bao gồm trong tệp App.test.js trong src. Nó kiểm tra xem thành phần Ứng dụng của chúng tôi có hiển thị thành công liên kết có văn bản "học phản ứng" hay không.

Chúng tôi có thể chạy thử nghiệm của mình bằng lệnh:

  npm run test  

Lưu ý: Các thử nghiệm sẽ được chạy trong tất cả các tệp kết thúc bằng .test.js khi bạn chạy lệnh npm run test

Tuy nhiên, nếu chúng tôi chạy điều này, thử nghiệm của chúng tôi sẽ không thành công.

Điều này là do chúng tôi không còn có phần tử liên kết nữa mà là phần tử tiêu đề. Để làm cho bài kiểm tra của chúng tôi vượt qua, chúng tôi muốn có một phần tử tiêu đề với văn bản "Người chia sẻ bài viết phản ứng".

  // src / App.test.js

nhập {render, screen} từ "@ testing-library / react";
nhập Ứng dụng từ "./App";

test ("hiển thị phần tử tiêu đề ứng dụng", () = & gt; {
  kết xuất (& lt; App / & gt;);
  const titleElement = screen.getByText (/ React Posts Sharer / i);
  mong đợi (titleElement) .toBeInTheDocument ();
});  

Sau khi chạy lại kiểm tra, chúng tôi thấy rằng nó vượt qua:

  PASS src / App.test .js

  ✓ kết xuất phần tử tiêu đề ứng dụng (54 mili giây)

Bộ thử nghiệm: 1 người đạt, tổng số 1 người
Kiểm tra: 1 đạt, tổng 1
Ảnh chụp nhanh: tổng số 0
Thời gian: 2,776 giây, ước tính 3 giây
Chạy tất cả các bộ kiểm tra liên quan đến các tệp đã thay đổi.  

Lưu ý: Khi chạy lệnh kiểm tra, bạn không cần phải bắt đầu và dừng nó theo cách thủ công. Nếu gặp bài kiểm tra không đạt, bạn có thể nhập mã ứng dụng, sửa lỗi và sau khi nhấn lưu, tất cả các bài kiểm tra sẽ tự động chạy lại.

Bước 5. Cách thay đổi dữ liệu siêu dữ liệu của ứng dụng

Dự án của chúng tôi hoạt động như thế nào? Chúng ta có thể xem cách thực hiện bằng cách truy cập tệp index.js.

  // src / index.js

import React từ 'react';
nhập ReactDOM từ 'react-dom';
nhập './index.css';
nhập Ứng dụng từ './App';
nhập báo cáoWebVitals từ './reportWebVitals';

ReactDOM.render (
  & lt; React.StrictMode & gt;
    & lt; Ứng dụng / & gt;
  & lt; /React.StrictMode> ;,
  document.getElementById ('root')
);  

Gói ReactDOM hiển thị ứng dụng của chúng tôi (cụ thể là thành phần Ứng dụng và mọi thành phần bên trong nó), bằng cách gắn nó vào một phần tử HTML có giá trị id là 'root'.

Có thể tìm thấy phần tử này trong public / index.html .

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
  & lt; đầu & gt;
    & lt; meta charset = "utf-8" / & gt;
    & lt; link rel = "icon" href = "% PUBLIC_URL% / favicon.ico" / & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1" / & gt;
    & lt; meta name = "theme-color" content = "# 000000" / & gt;
    & lt; meta
      name = "mô tả"
      content = "Trang web được tạo bằng cách sử dụng create-react-app"
    / & gt;
    & lt; link rel = "apple-touch-icon" href = "% PUBLIC_URL% / logo192.png" / & gt;
    & lt; link rel = "kê khai" href = "% PUBLIC_URL% / manifest.json" / & gt;
    & lt; title & gt; React App & lt; / title & gt;
  & lt; / head & gt;
  & lt; body & gt;
    & lt; noscript & gt; Bạn cần bật JavaScript để chạy ứng dụng này. & lt; / noscript & gt;
    & lt; div id = "root" & gt; & lt; / div & gt;
  & lt; / body & gt;
& lt; / html & gt;
 

Toàn bộ ứng dụng React được đính kèm vào trang HTML này bằng cách sử dụng div với id gốc mà bạn thấy ở trên.

Chúng tôi không cần thay đổi bất kỳ điều gì trong các thẻ body . Tuy nhiên, sẽ rất hữu ích khi thay đổi siêu dữ liệu trong các thẻ head để cho người dùng và công cụ tìm kiếm biết về ứng dụng cụ thể của chúng tôi.

Chúng ta có thể thấy rằng nó bao gồm các thẻ meta cho tiêu đề , mô tả và hình ảnh biểu tượng yêu thích (biểu tượng nhỏ trong tab trình duyệt).

Bạn cũng sẽ thấy một số thẻ khác như màu chủ đề, biểu tượng quả táo và tệp kê khai. Những điều này rất hữu ích nếu người dùng muốn thêm ứng dụng của bạn vào màn hình chính của thiết bị hoặc máy tính của họ.

Trong trường hợp của chúng tôi, chúng tôi có thể thay đổi tiêu đề thành tên ứng dụng và mô tả cho phù hợp với ứng dụng chúng tôi đang tạo:

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
  & lt; đầu & gt;
    & lt; meta charset = "utf-8" / & gt;
    & lt; link rel = "icon" href = "% PUBLIC_URL% / favicon.ico" / & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1" / & gt;
    & lt; meta name = "theme-color" content = "# 000000" / & gt;
    & lt; meta
      name = "mô tả"
      content = "Ứng dụng chia sẻ bài đăng của mọi người từ khắp nơi trên web"
    / & gt;
    & lt; link rel = "apple-touch-icon" href = "% PUBLIC_URL% / logo192.png" / & gt;
    & lt; link rel = "kê khai" href = "% PUBLIC_URL% / manifest.json" / & gt;
    & lt; title & gt; React Người chia sẻ bài đăng & lt; / title & gt;
  & lt; / head & gt;
  & lt; body & gt;
    & lt; noscript & gt; Bạn cần bật JavaScript để chạy ứng dụng này. & lt; / noscript & gt;
    & lt; div id = "root" & gt; & lt; / div & gt;
  & lt; / body & gt;
& lt; / html & gt;
 

Bước 6. Cách làm việc với hình ảnh và các tài sản khác

< p> Nếu chúng ta nhìn vào thành phần Ứng dụng của mình, chúng ta sẽ thấy rằng chúng ta đang sử dụng một phần tử img .

Điều thú vị là chúng tôi đang nhập một tệp từ thư mục src, như thể nó là một biến được xuất từ ​​tệp đó.

  // src / App.js

nhập "./App.css";
nhập logo từ "./logo.svg";

function App () {
  trở về (
    & lt; div className = "Ứng dụng" & gt;
      & lt; header className = "App-header" & gt;
        & lt; img src = {logo} className = "App-logo" alt = "logo" / & gt;
        & lt; h1 & gt; React Người chia sẻ bài đăng & lt; / h1 & gt;
      & lt; / tiêu đề & gt;
    & lt; / div & gt;
  );
}

xuất Ứng dụng mặc định;  

Chúng tôi có thể nhập các tệp hình ảnh và các nội dung tĩnh khác trực tiếp vào các thành phần React của chúng tôi. Tính năng này đến từ cấu hình webpack của Tạo ứng dụng React.

Thay vì bao gồm các nội dung tĩnh trực tiếp trong thư mục src, chúng tôi cũng có tùy chọn đưa chúng vào thư mục chung của mình.

Nếu chúng tôi di chuyển tệp logo.svg của chúng tôi từ src sang public, thay vì nhập tệp của chúng tôi bằng cách sử dụng cú pháp nhập, chúng tôi có thể viết như sau:

  // src / App .js

nhập "./App.css";

function App () {
  trở về (
    & lt; div className = "Ứng dụng" & gt;
      & lt; header className = "App-header" & gt;
        & lt; img src = "/ logo.svg" className = "App-logo" alt = "logo" / & gt;
        & lt; h1 & gt; React Người chia sẻ bài đăng & lt; / h1 & gt;
      & lt; / tiêu đề & gt;
    & lt; / div & gt;
  );
}

xuất Ứng dụng mặc định;  

Bất kỳ tệp nào được đặt trong thư mục chung đều có thể được sử dụng trong tệp .js hoặc .css với cú pháp: /filename.extension . < / p>

Điểm tiện lợi của Create React App là chúng ta không cần sử dụng phần tử img để hiển thị svg này.

Chúng tôi có thể nhập svg này dưới dạng một thành phần bằng cú pháp sau:

  // src / App.js

nhập {ReactComponent as Logo} từ "./logo.svg";
nhập "./App.css";

function App () {
  trở về (
    & lt; div className = "Ứng dụng" & gt;
      & lt; header className = "App-header" & gt;
        & lt; Kiểu biểu trưng = {{height: 200}} / & gt;
        & lt; h1 & gt; React Người chia sẻ bài đăng & lt; / h1 & gt;
      & lt; / tiêu đề & gt;
    & lt; / div & gt;
  );
}

xuất ứng dụng mặc định;  

Điều gì đang xảy ra ở đây? Chúng ta có thể nhập tệp svg dưới dạng ReactComponent và sau đó đổi tên nó thành bất kỳ tên nào chúng ta thích bằng cách sử dụng từ khóa as .

Nói cách khác, chúng ta có thể sử dụng svg đã nhập giống như chúng ta sẽ là một thành phần thông thường.

Các tệp tin svg thường khó sử dụng trong React. Cú pháp thành phần này làm cho nó rất dễ dàng và cho phép chúng tôi thực hiện những việc như sử dụng các kiểu nội tuyến (như bạn thấy ở trên, trong đó chúng tôi đặt chiều cao của biểu trưng thành 200px).

Bước 7. Cách cài đặt Phụ thuộc

Đối với ứng dụng chia sẻ bài đăng mà chúng tôi đang tạo, hãy lấy một số dữ liệu bài đăng để hiển thị trong ứng dụng của chúng tôi từ API Trình giữ chỗ JSON.

Chúng tôi có thể sử dụng phần phụ thuộc có tên là axios để thực hiện yêu cầu nhận các bài đăng của chúng tôi.

Để cài đặt axios, hãy chạy:

  npm install axios  

Lưu ý: Bạn có thể dễ dàng cài đặt các gói hơn bằng cách sử dụng lệnh viết tắt npm i axios thay vì npm install

Khi chúng tôi cài đặt axios, nó sẽ được thêm vào thư mục node_modules của chúng tôi.

Chúng tôi có thể xem lại tất cả các phần phụ thuộc mà chúng tôi đã cài đặt trực tiếp trong tệp package.json của mình và thấy rằng axios đã được thêm vào phần "phần phụ thuộc":

  {
  "name": "my-react-app",
  "phiên bản": "0.1.0",
  "private": true,
  "phụ thuộc": {
    "@ testing-library / jest-dom": "^ 5.11.4",
    "@ testing-library / react": "^ 11.1.0",
    "@ testing-library / user-event": "^ 12.1.10",
    "axios": "^ 0,21.1",
    "react": "^ 17.0.1",
    "react-dom": "^ 17.0.1",
    "react-scripts": "4.0.2",
    "web-vitals": "^ 1.0.1"
  }
}  

Chúng tôi sẽ không đưa nó vào dự án này, nhưng nếu bạn quan tâm đến việc sử dụng TypeScript với dự án Tạo ứng dụng React hiện có của mình, thì quá trình này rất đơn giản.

Bạn chỉ cần cài đặt phần phụ thuộc stylescript và các định nghĩa loại thích hợp để sử dụng cho quá trình phát triển và kiểm tra React:

  npm install stylescript @types / node @ type / react @ type / react-dom @ type / jest
 

Sau đó, bạn chỉ cần khởi động lại máy chủ phát triển của mình và đổi tên bất kỳ tệp React nào kết thúc bằng .js thành .tsx và bạn có một dự án React và TypeScript đang hoạt động.

Bước 8. Cách nhập các thành phần

Thay vì viết tất cả mã của chúng tôi trong thành phần Ứng dụng, hãy tạo một thành phần riêng để tìm nạp dữ liệu và hiển thị nó.

Chúng ta sẽ gọi thành phần này là Bài đăng, vì vậy hãy tạo một thư mục trong src để chứa tất cả các thành phần của chúng ta và đặt một tệp bên trong nó: Posts.js.

Đường dẫn đầy đủ cho tệp thành phần của chúng tôi là src / components / Posts.js .

Để tìm nạp các bài đăng của chúng tôi, chúng tôi sẽ yêu cầu chúng từ Trình giữ chỗ JSON, đặt chúng vào một biến trạng thái được gọi là bài đăng, sau đó ánh xạ lên chúng để hiển thị tiêu đề và nội dung của chúng:

  // src / components / Posts.js

nhập React từ "react";
nhập tiên đề từ "axios";

hàm Bài đăng () {
  const [posts, setPosts] = React.useState ([]);

  React.useEffect (() = & gt; {
    axios
      .get ("http://jsonplaceholder.typicode.com/posts")
      .then ((response) = & gt; setPosts (response.data));
  }, []);

  trở về (
    & lt; ul className = "bài viết" & gt;
      {posts.map ((post) = & gt; (
        & lt; li className = "post" key = {post.id} & gt;
          & lt; h4 & gt; {post.title} & lt; / h4 & gt;
          & lt; p & gt; {post.body} & lt; / p & gt;
        & lt; / li & gt;
      ))}
    & lt; / ul & gt;
  );
}

xuất bài viết mặc định;
 

Chúng tôi đang tìm nạp và trả lại dữ liệu bài đăng của mình từ thành phần Bài đăng, nhưng để xem dữ liệu đó trong ứng dụng của mình, chúng tôi cần nhập dữ liệu đó vào thành phần Ứng dụng.

Hãy quay lại App.js và nhập nó bằng cách đi vào thư mục thành phần và lấy thành phần Bài đăng từ Posts.js.

Sau đó, chúng ta có thể đặt thành phần Bài đăng của mình dưới header :

  // src / App.js

nhập Bài đăng từ "./components/Posts";
nhập "./App.css";

function App () {
  trở về (
    & lt; div className = "Ứng dụng" & gt;
      & lt; header className = "App-header" & gt;
        & lt; img src = "/ logo.svg" className = "App-logo" alt = "logo" / & gt;
        & lt; h1 & gt; React Người chia sẻ bài đăng & lt; / h1 & gt;
      & lt; / tiêu đề & gt;
      & lt; Bài đăng / & gt;
    & lt; / div & gt;
  );
}

xuất Ứng dụng mặc định;  

Và chúng tôi có thể xem tất cả các bài đăng đã tải xuống trên trang chủ của chúng tôi bên dưới tiêu đề:

Bước 9: Cách tạo kiểu cho ứng dụng của chúng tôi bằng CSS

Ứng dụng của chúng tôi có thể được hưởng lợi từ một số kiểu được cải tiến.

Tạo ứng dụng React đi kèm với hỗ trợ CSS ngoài cái hộp. Nếu bạn truy cập App.js, bạn có thể thấy ở trên cùng rằng chúng tôi đang nhập tệp App.css từ src.

Lưu ý: Bạn có thể nhập tệp .css vào bất kỳ thành phần nào bạn thích, tuy nhiên các kiểu này sẽ được áp dụng trên toàn cầu cho ứng dụng của chúng tôi. Chúng không nằm trong phạm vi thành phần mà tệp .css được nhập vào.

Trong App.css, chúng tôi có thể thêm một số kiểu để cải thiện giao diện ứng dụng của mình:

 / * src / App.css * /

.Ứng dụng {
  text-align: center;
  margin: 0 auto;
  chiều rộng tối đa: 1000px;
}

.App-logo {
  chiều cao: 40vmin;
  con trỏ-sự kiện: không có;
}

.Ứng dụng-tiêu đề {
  margin: 0 auto;
  hiển thị: flex;
  flex-hướng: cột;
  align-các mục: trung tâm;
  justify-content: trung tâm;
  font-size: calc (10px + 2vmin);
}

li {
  list-style-type: none;
}

.bưu kiện {
  margin-bottom: 4em;
}

.post h4 {
  kích thước phông chữ: 2rem;
}  

Ngoài ra còn có một biểu định kiểu chung khác được gọi là index.css có các quy tắc kiểu chung hơn.

Trong đó, chúng ta có thể thêm một số thuộc tính bổ sung cho phần tử body để làm cho nền tối và văn bản của chúng ta có màu trắng:

  / * src / index.css * /

thân hình {
  màu nền: # 282c34;
  màu trắng;
  lề: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans serif;
  -webkit-font-smoothing: chống răng cưa;
  -moz-osx-font-smoothing: thang độ xám;
}  

Sau khi thêm các kiểu này, chúng tôi có một ứng dụng trông đẹp hơn nhiều:

Xin lưu ý rằng cũng rất dễ dàng thêm các cấu hình CSS nâng cao hơn, chẳng hạn như nếu bạn muốn thêm mô-đun CSS hoặc SASS vào ứng dụng React của mình.

Các tài nguyên hữu ích khác về tạo kiểu CSS được bao gồm trong tệp README.md của bạn.

Bước 10. Cách tạo ứng dụng và xuất bản ứng dụng

Khi chúng tôi hài lòng với ứng dụng của mình và sẵn sàng xuất bản, chúng tôi có thể tạo ứng dụng bằng lệnh sau:

  npm run build  

Lệnh này sẽ tạo một bản dựng sản xuất được tối ưu hóa cho dự án của chúng tôi và sẽ xuất ra các tệp mà nó đã tạo và kích thước của mỗi tệp:

  Đã biên dịch thành công.

Kích thước tệp sau gzip:

  46,62 KB build / static / js / 2.1500c654.chunk.js
  1,59 KB bản dựng / static / js / 3,8022f77f.chunk.js
  1,17 KB build / static / js / runtime-main.86c7b7c2.js
  649 B build / static / js / main.ef6580eb.chunk.js
  430 B build / static / css / main.5ae9c609.chunk.css  

Đầu ra đến từ công cụ xây dựng Webpack.

Nó giúp chúng tôi biết kích thước của các tệp ứng dụng của chúng tôi vì kích thước của các tệp .js nói riêng có thể ảnh hưởng lớn đến hiệu suất ứng dụng của chúng tôi.

Mỗi phần bao gồm một chuỗi hoặc băm duy nhất, sẽ thay đổi trên mọi bản dựng để đảm bảo rằng mọi triển khai mới không được trình duyệt lưu (lưu vào bộ nhớ đệm).

Nếu chúng tôi không có hàm băm bộ nhớ cache này cho mỗi tệp của mình, chúng tôi có thể không thấy bất kỳ thay đổi nào mà chúng tôi đã thực hiện đối với ứng dụng của mình.

Cuối cùng, chúng tôi có thể chạy đã xây dựng dự án React cục bộ với sự trợ giúp của gói npm serve .

Điều này rất hữu ích để phát hiện bất kỳ lỗi nào chúng tôi có thể mắc phải với phiên bản cuối cùng của dự án trước khi đưa trực tuyến lên web.

Giống như create-react-app, chúng tôi có thể sử dụng npx để chạy serve mà không cần cài đặt nó trên toàn cầu trên máy tính của chúng tôi.

  npx serve  

Sử dụng serve , ứng dụng của chúng tôi sẽ khởi động trên một cổng phát triển khác thay vì 3000. Trong trường hợp này, localhost: 5000.

Và cùng với đó, chúng tôi có một ứng dụng React đã hoàn chỉnh sẵn sàng xuất bản trực tiếp lên web trên bất kỳ dịch vụ triển khai nào, chẳng hạn như Netlify, Github Pages hoặc Heroku!

Bạn có thích bài đăng này không? Tham gia The React Bootcamp

React Bootcamp lấy mọi thứ bạn nên biết về việc học React và gói nó thành một gói toàn diện, bao gồm video, bảng cheats và các phần thưởng đặc biệt.

Tham gia cùng hàng nghìn nhà phát triển học cách trở thành chuyên gia React trong thời gian kỷ lục:

React Bootcamp
Nhấp vào đây để được thông báo khi nó mở ra


Xem thêm những thông tin liên quan đến chủ đề cách tạo ứng dụng phản ứng

[CapCut] Cách làm mờ nền video, xóa phông video bằng app capcut trên điện thoại

alt

  • Tác giả: Review Ứng Dụng
  • Ngày đăng: 2022-07-11
  • Đánh giá: 4 ⭐ ( 2796 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: cachlammonenvideo
    cachxoaphongvideo
    Cách làm Mờ Nền Video Với App Capcut Trên Điện Thoại. Đối với những bạn mà không có điện thoại quay video xóa phông hoặc máy ảnh thì trong video này mình sẽ hướng dẫn cách làm mờ nền video nhé.
    Rất vui khi được gặp lại các bạn trong video hôm nay của kênh review ứng dụng, mình luôn cố gắng tạo ra những nội dung hữu ích, những mẹo hay trên điện thoại giúp các bạn giải quyết được những thắc mắc khi sử dụng. Nếu nội dung của mình hay các bạn nhớ like và nhấn nút đăng ký kênh ủng hộ mình và giới thiệu cho người thân, bạn bè cùng biết nhé.
    Bạn nào có ý tưởng gì hay muốn mình giới thiệu hướng dẫn thì cmt bên dưới video cho mình.
    ----------
    Trang web của mình mời các bạn ghé thăm: https://ungdungpro.com/
    ------
    Bộ hỗ trợ quay vlog thần thánh của mình đây: https://www.canva.com/design/DAFGFVSUo9A/8OUvO9900iQnfs2pJiDJtA/view?utm_content=DAFGFVSUo9A&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

Hướng dẫn tạo phím tắt đóng ứng dụng không phản hồi

  • Tác giả: gvn360.com
  • Đánh giá: 5 ⭐ ( 3113 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn đóng các ứng dụng lì lợm không chịu phản hồi với cách tạo shortcut phím tắt trên Windows 10 cực kỳ đơn giản.

5 Phần Mềm Tạo App Miễn Phí, Dễ Sử Dụng

  • Tác giả: bmdsolutions.vn
  • Đánh giá: 4 ⭐ ( 8881 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Top 5 phần mềm tạo app miễn phí được nhiều người tin dùng nhất. Các công cụ này cực kì dễ sử dụng, người dùng không biết về lập trình cũng có thể tạo được

Phản ứng nhiệt hạch là gì? Cơ chế và ứng dụng

  • Tác giả: sieusach.info
  • Đánh giá: 5 ⭐ ( 7297 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phản ứng nhiệt hạch hiện nay đang nhận được rất nhiều sự quan tâm bởi nó có tiềm năng để khai thác rất lớn. Cùng xem nó có cơ chế hoạt động thế nào nhé!

Pin Điện Hóa – Cách Tạo Ra Phản Ứng Và Lịch Sử Của Chúng

  • Tác giả: bihaku.vn
  • Đánh giá: 3 ⭐ ( 9509 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Pin điện hóa được dùng rất nhiều trong cuộc sống, bài viết sẽ giới thiệu đến phản ứng điện hóa, cách tạo pin, sự ra đời của nó và giải thích các phản ứng.

Sự Oxi hoá là gì, Phản ứng Hoá hợp là gì, Ứng dụng của Oxi và bài tập – hoá 8 bài 25

  • Tác giả: thptsoctrang.edu.vn
  • Đánh giá: 4 ⭐ ( 5231 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ở bài trước, các em đã học về tính chất hoá học của oxi, đã biết Oxi phản ứng với hầu hết các kim loại và rất nhiều phi kim, quá trình Oxi tham gia các phản

Tạo một ứng dụng Access

  • Tác giả: support.microsoft.com
  • Đánh giá: 5 ⭐ ( 7483 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo các ứng dụng Access để quản lý và chia sẻ dữ liệu trong trình duyệt web chuẩn.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Tài liệu git-commit - cách sử dụng git commit