Cách xây dựng một ứng dụng bộ đếm đơn giản trong React

React là một trong những thư viện JavaScript front-end phổ biến nhất. Nhiều công ty sử dụng React để phát triển giao diện người dùng của họ và nó đã trở nên phổ biến rộng rãi đối với các nhà phát triển.

Thật dễ dàng để xây dựng một chương trình đơn giản với React, chẳng hạn như ứng dụng bộ đếm cơ bản này. Bắt đầu với một hướng dẫn đơn giản sẽ giúp bạn nắm bắt một số khái niệm cơ bản nhưng quan trọng của React.

Các tính năng của ứng dụng Counter

Trong dự án này, bạn sẽ phát triển một ứng dụng truy cập với các tính năng sau:

Tăng nút đếm: Điều này sẽ tăng số đếm lên một.
Giảm Đếm Nút: Điều này sẽ giảm số đếm xuống một.
Nút reset: Thao tác này sẽ đặt số đếm thành 0.

Các khái niệm cơ bản về phản ứng

Trước khi tiếp tục, bạn cần hiểu một số khái niệm cơ bản này trong React mà bạn sẽ sử dụng trong dự án này:

Các thành phần: Các thành phần là các khối xây dựng cốt lõi của các ứng dụng React. Chúng chứa mã độc lập, có thể tái sử dụng. Sử dụng các thành phần, bạn có thể chia giao diện người dùng thành các phần riêng biệt. Sau đó, bạn có thể sử dụng lại các phần đó và làm việc với chúng một cách độc lập.
Tiểu bang: Trong React bạn có thể sử dụng một đối tượng để lưu trữ dữ liệu thể hiện trạng thái của một thành phần. Điều này cho phép các thành phần quản lý và cập nhật dữ liệu của chính chúng. Trạng thái của một thành phần xác định cách nó hiển thị và hoạt động.
Thành phần chức năng: Thành phần Chức năng của React đơn giản là một hàm JavaScript chấp nhận các đạo cụ làm đối số và trả về một phần tử React (JSX).
đạo cụ: Bạn có thể sử dụng props—viết tắt của “properties”—để truyền dữ liệu từ thành phần cha sang thành phần con. Đạo cụ là một trong những phần không thể thiếu của React và bạn có thể sử dụng đạo cụ để thực hiện một số thao tác trong React.
móc: React Hook là các hàm tích hợp cho phép bạn quản lý trạng thái và các tính năng khác của React như các phương thức vòng đời bên trong các thành phần chức năng. Họ cũng có thể giúp bạn viết mã ngắn gọn và rõ ràng. Bạn sẽ sớm thấy cách bạn có thể quản lý trạng thái với useState() cái móc.

Mã được sử dụng trong dự án này có sẵn trong kho lưu trữ GitHub và bạn được sử dụng miễn phí theo giấy phép MIT.

Bước 1: Thiết lập dự án

Mở terminal của bạn và chạy lệnh sau để bắt đầu:

 npx create-react-app react-counter-app

Thao tác này sẽ tạo một ứng dụng phản ứng mới, sẵn sàng để bạn bắt đầu xây dựng dự án của mình. Nó sẽ tạo cấu trúc hệ thống tệp với một số tệp và thư mục.

Chạy lệnh sau trong thiết bị đầu cuối để khởi động máy chủ phát triển:

 npm start

Lệnh đó sẽ mở một tab mới trong trình duyệt của bạn, trỏ tới http://localhost:3000. Tất cả những thay đổi mà bạn sẽ thực hiện đối với dự án sẽ được cập nhật tự động tại đây.

Bước 2: Tạo khung của ứng dụng truy cập

Mở src/App.js tệp và xóa tất cả mã mặc định hiện có ở đó. Bây giờ, hãy tạo khung của ứng dụng bằng mã sau:

 import React, { useState } from "react";
function App() {
  const [count, setCount] = useState(0);
  let incrementCount = () => {
 
  };
  let decrementCount = () => {
 
  };
  let resetCount = () => {
  
  }


return (
  <div className="app">
    <p>Count: {count}</p>
    <div className="buttons">
    </div>
  </div>
);
}


export default App;

Câu lệnh đầu tiên nhập khẩu sử dụngState móc từ phản ứng mô-đun. Sử dụng nó để tạo ra các đếm trạng thái và khởi tạo nó thành 0. Bạn có thể thay đổi giá trị của đếm sử dụng đặtCount chức năng.

Bạn sẽ sử dụng số gia tăng, giảm Đếmvà đặt lại Đếm các chức năng sau để tăng, giảm và đặt lại giá trị của bộ đếm.

Bạn có thể nhận thấy dấu ngoặc nhọn { } được sử dụng xung quanh biến đếm trong phần đánh dấu. Về cơ bản, điều này cho phép trình phân tích cú pháp JSX biết rằng nó sẽ coi nội dung bên trong các dấu ngoặc đó là JavaScript.

Bước 3: Thêm Chức năng vào Ứng dụng Bộ đếm

Bạn cần tạo ba nút để triển khai chức năng của ứng dụng bộ đếm: nút đếm giảm, nút đếm tăng và nút đặt lại. Thêm đoạn mã sau vào bên trong nút div:

 <Button title={"Decrement"} action={decrementCount} />
<Button title={"Increment"} action={incrementCount} />
<Button title={"Reset"} action={resetCount} />

Khi bạn nhấp vào các nút này, giảm Đếm, số gia tăngvà đặt lại Đếm chức năng sẽ chạy. Lưu ý rằng bạn đang vượt qua Tiêu đề và hoạt động đạo cụ từ cha mẹ Ứng dụng thành phần cho đứa trẻ Cái nút thành phần.

Cập nhật các chức năng này trong App.js tập tin với đoạn mã sau:

 let incrementCount = () => {
  setCount(count + 1);
};
let decrementCount = () => {
  setCount(count - 1);
};


let resetCount = () => {
  setCount(0);
}

Các đặtCount chức năng sẽ cập nhật trạng thái của đếm.

Lưu ý rằng bạn chưa tạo thành phần Nút. Tạo một cái mới các thành phần thư mục trong src thư mục và sau đó tạo một tệp mới có tên Nút.js. Đó là một cách thực hành tốt để giữ tất cả các thành phần trong cùng một thư mục.

Thêm đoạn mã sau vào thành phần/Button.js tập tin:

 import React from "react";
function Button(props) {
    let { action, title } = props;
    return <button onClick={action}>{title}</button>;
}


export default Button;

Các Cái nút thành phần nhận dữ liệu thông qua đạo cụ. Sau đó, hàm sẽ hủy cấu trúc các đạo cụ này thành các biến riêng biệt, sử dụng chúng để điền mã đánh dấu mà nó trả về.

Mã sử dụng lại thành phần này ba lần để tạo các nút tăng, giảm và đặt lại.

Cuối cùng, nhập thành phần Nút ở đầu App.js trang sử dụng đoạn mã sau:

 import Button from "./components/Botton";

Đây là cách mã cuối cùng sẽ trông như thế nào trong App.js tập tin:

 import React, { useState } from "react";
import Button from "./components/Button";
function App() {
  const [count, setCount] = useState(0);


  let incrementCount = () => {
    setCount(count + 1);
  };


  let decrementCount = () => {
    setCount(count - 1);
  };


  let resetCount = () => {
    setCount(0);
  }


  return (
    <div className="app">
        <p>Count: {count}</p>
        <div className="buttons">
          <Button title={"Decrement"} action={decrementCount} />
          <Button title={"Increment"} action={incrementCount} />
          <Button title={"Reset"} action={resetCount} />
        </div>
      </div>
  );
}


export default App;

Thực hiện theo các phương pháp phản ứng tốt nhất

Bạn có thể viết mã React theo nhiều cách khác nhau, nhưng điều quan trọng là phải cấu trúc nó rõ ràng nhất có thể. Điều này sẽ đảm bảo bạn có thể bảo trì nó dễ dàng và có thể giúp cải thiện hiệu suất tổng thể của ứng dụng của bạn.

Bạn có thể làm theo một số phương pháp React do cộng đồng React đề xuất như tránh mã lặp lại, viết bài kiểm tra cho từng thành phần React, sử dụng phá hủy đối tượng cho đạo cụ và tuân theo quy ước đặt tên.