5 sai lầm tôi mắc phải khi bắt đầu dự án React đầu tiên của mình

Bạn biết cảm giác như thế nào khi chọn một ngôn ngữ hoặc khuôn khổ mới. Đôi khi có tài liệu tuyệt vời để giúp bạn tìm ra cách của mình thông qua nó. Nhưng ngay cả tài liệu tốt nhất cũng không bao gồm tất cả mọi thứ. Và khi bạn làm việc với một thứ gì đó mới mẻ, bạn nhất định sẽ tìm ra một vấn đề không có giải pháp bằng văn bản.

Đó là cảm giác của tôi khi lần đầu tiên tôi tạo một dự án React — và React là một trong những framework có tài liệu đáng chú ý, đặc biệt là bây giờ với các tài liệu beta. Nhưng tôi vẫn cố gắng vượt qua. Đã khá lâu kể từ dự án đó, nhưng những bài học tôi thu được từ nó vẫn còn nguyên vẹn trong tâm trí tôi. Và mặc dù có rất nhiều hướng dẫn về “cách thực hiện” React ở ngoài đó, tôi nghĩ rằng tôi sẽ chia sẻ những gì tôi ước mình biết khi lần đầu tiên sử dụng nó.

Vì vậy, đó là nội dung của bài báo này - một danh sách những sai lầm ban đầu mà tôi đã mắc phải. Tôi hy vọng chúng sẽ giúp bạn học React mượt mà hơn rất nhiều.

Sử dụng ứng dụng tạo phản ứng để bắt đầu một dự án

TL; DR Sử dụng Vite hoặc Parcel.

Tạo ứng dụng React (CRA) là một công cụ giúp bạn thiết lập một dự án React mới. Nó tạo ra một môi trường phát triển với các tùy chọn cấu hình tốt nhất cho hầu hết các dự án React. Điều này có nghĩa là bạn không phải dành thời gian tự cấu hình bất cứ thứ gì.

Là người mới bắt đầu, đây có vẻ là một cách tuyệt vời để bắt đầu công việc của tôi! Không có cấu hình! Chỉ cần bắt đầu viết mã!

CRA sử dụng hai gói phổ biến để đạt được điều này, webpack và Babel. webpack là gói web tối ưu hóa tất cả nội dung trong dự án của bạn, chẳng hạn như JavaScript, CSS và hình ảnh. Babel là một công cụ cho phép bạn sử dụng các tính năng JavaScript mới hơn, ngay cả khi một số trình duyệt không hỗ trợ chúng.

Cả hai đều tốt, nhưng có những công cụ mới hơn có thể thực hiện công việc tốt hơn, cụ thể là Sống và Trình biên dịch web nhanh (SWC).

Những lựa chọn thay thế mới và cải tiến này nhanh hơn và dễ cấu hình hơn webpack và Babel. Điều này giúp dễ dàng điều chỉnh cấu hình, điều khó thực hiện trong ứng dụng tạo phản ứng mà không cần đẩy ra.

Để sử dụng cả hai khi thiết lập một dự án React mới, bạn phải đảm bảo rằng bạn có Node phiên bản 12 trở lên, sau đó chạy lệnh sau.

npm create vite

Bạn sẽ được yêu cầu chọn tên cho dự án của mình. Khi bạn làm điều đó, hãy chọn React từ danh sách các khung. Sau đó, bạn có thể chọn một trong hai Javascript + SWC or Typescript + SWC

Sau đó, bạn sẽ phải thay đổi thư mục cd vào dự án của bạn và chạy lệnh sau;

npm i && npm run dev

Điều này sẽ chạy một máy chủ phát triển cho trang web của bạn với URL localhost:5173

Và nó đơn giản như vậy.

Sử dụng defaultProps cho các giá trị mặc định

TL; DR Thay vào đó hãy sử dụng các tham số chức năng mặc định.

Dữ liệu có thể được chuyển đến các thành phần React thông qua một thứ gọi là props. Chúng được thêm vào một thành phần giống như các thuộc tính trong phần tử HTML và có thể được sử dụng trong định nghĩa của thành phần bằng cách lấy các giá trị có liên quan từ đối tượng prop được chuyển vào làm đối số.

// App.jsx
export default function App() { return <Card title="Hello" description="world" />
} // Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> );
} export default Card;

Nếu một giá trị mặc định được yêu cầu cho một prop, Các defaultProp tài sản có thể được sử dụng:

// Card.jsx
function Card(props) { // ...
} Card.defaultProps = { title: 'Default title', description: 'Desc',
}; export default Card;

Với JavaScript hiện đại, có thể hủy cấu trúc props đối tượng và gán một giá trị mặc định cho tất cả trong đối số hàm.

// Card.jsx
function Card({title = "Default title", description= "Desc"}) { return ( <div> <h1>{title}</h1> <p>{description}</p> </div> )
} export default Card;

Điều này thuận lợi hơn vì mã có thể được đọc bởi các trình duyệt hiện đại mà không cần chuyển đổi thêm.

Thật không may, defaultProps yêu cầu trình duyệt đọc một số chuyển đổi vì JSX (JavaScript XML) không được hỗ trợ ngay lập tức. Điều này có khả năng ảnh hưởng đến hiệu suất của một ứng dụng đang sử dụng nhiều defaultProps.

Đừng dùng propTypes

TL; DR Sử dụng TypeScript.

Trong Phản ứng, propTypes có thể được sử dụng để kiểm tra xem một thành phần có được truyền đúng loại dữ liệu cho các đạo cụ của nó hay không. Chúng cho phép bạn chỉ định loại dữ liệu sẽ được sử dụng cho mỗi chỗ dựa, chẳng hạn như chuỗi, số, đối tượng, v.v. Chúng cũng cho phép bạn chỉ định xem có cần phải có chỗ dựa hay không.

Bằng cách này, nếu một thành phần được chuyển sai kiểu dữ liệu hoặc nếu không cung cấp chỗ dựa cần thiết, thì React sẽ báo lỗi.

// Card.jsx
import { PropTypes } from "prop-types"; function Card(props) { // ...
} Card.propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string,
}; export default Card;

TypeScript cung cấp mức độ an toàn kiểu trong dữ liệu được chuyển đến các thành phần. Chắc chắn như vậy, propTypes là một ý tưởng hay khi tôi mới bắt đầu. Tuy nhiên, giờ đây TypeScript đã trở thành giải pháp an toàn cho loại, tôi thực sự khuyên bạn nên sử dụng nó hơn bất kỳ thứ gì khác.

// Card.tsx
interface CardProps { title: string, description?: string,
} export default function Card(props: CardProps) { // ...
}

TypeScript là ngôn ngữ lập trình được xây dựng dựa trên JavaScript bằng cách thêm tính năng kiểm tra kiểu tĩnh. TypeScript cung cấp một hệ thống kiểu mạnh mẽ hơn, có thể phát hiện nhiều lỗi tiềm ẩn hơn và cải thiện trải nghiệm phát triển.

Sử dụng các thành phần lớp

TL; DR: Viết các thành phần dưới dạng hàm

Các thành phần lớp trong React được tạo bằng các lớp JavaScript. Chúng có cấu trúc hướng đối tượng hơn và cũng như một vài tính năng bổ sung, như khả năng sử dụng this phương pháp từ khóa và vòng đời.

// Card.jsx
class Card extends React.Component { render() { return ( <div> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </div> ) }
} export default Card;

Tôi thích viết các thành phần với các lớp hơn các hàm, nhưng các lớp JavaScript khó hiểu hơn đối với người mới bắt đầu và this có thể rất khó hiểu. Thay vào đó, tôi khuyên bạn nên viết các thành phần dưới dạng hàm:

// Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> )
} export default Card;

Các thành phần hàm đơn giản là các hàm JavaScript trả về JSX. Chúng dễ đọc hơn nhiều và không có các tính năng bổ sung như this từ khóa và phương pháp vòng đời làm cho chúng hoạt động hiệu quả hơn các thành phần lớp.

Các thành phần chức năng cũng có lợi thế khi sử dụng móc. Móc phản ứng cho phép bạn sử dụng trạng thái và các tính năng khác của React mà không cần viết thành phần lớp, giúp mã của bạn dễ đọc hơn, dễ bảo trì và tái sử dụng hơn.

Nhập React không cần thiết

TL;DR: Không cần làm đâu, trừ khi bạn cần hook.

Kể từ khi React 17 được phát hành vào năm 2020, giờ đây bạn không cần phải nhập React ở đầu tệp của mình bất cứ khi nào bạn tạo một thành phần.

import React from 'react'; // Not needed!
export default function Card() {}

Nhưng chúng tôi phải làm điều đó trước React 17 vì JSX transformer (thứ chuyển đổi JSX thành JavaScript thông thường) đã sử dụng một phương thức gọi là React.createElement điều đó sẽ chỉ hoạt động khi nhập React. Kể từ đó, một biến thế mới đã được phát hành có thể biến đổi JSX mà không cần createElement phương pháp.

Bạn vẫn sẽ cần nhập React để sử dụng hook, những mảnh vỡvà bất kỳ chức năng hoặc thành phần nào khác mà bạn có thể cần từ thư viện:

import { useState } from 'react'; export default function Card() { const [count, setCount] = useState(0); // ...
}

Đó là những sai lầm ban đầu của tôi!

Có thể “sai lầm” là một từ quá nặng nề vì một số phương pháp hay hơn đã ra đời sau này. Tuy nhiên, tôi thấy nhiều trường hợp cách làm việc “cũ” vẫn đang được sử dụng tích cực trong các dự án và các hướng dẫn khác.

Thành thật mà nói, có lẽ tôi đã mắc phải hơn năm sai lầm khi bắt đầu. Bất cứ khi nào bạn tiếp cận với một công cụ mới, nó sẽ giống như một hành trình học cách sử dụng nó một cách hiệu quả hơn là bật công tắc. Nhưng đây là những thứ tôi vẫn mang theo nhiều năm sau!

Nếu bạn đã sử dụng React được một thời gian, bạn ước mình biết điều gì trước khi bắt đầu? Sẽ thật tuyệt nếu có được một bộ sưu tập giúp những người khác tránh được những khó khăn tương tự.

• Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
• Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến ​​thức. Truy cập Tại đây.
• nguồn: https://css-tricks.com/5-mistakes-starting-react/