Nhanh chóng theo dõi quá trình học React của bạn với 12 mẹo này!

1) Tìm hiểu lượng JavaScript và ES6 phù hợp

CTôi cá là bạn phát ngán khi nghe điều đó! Một điều nữa có lẽ bạn cũng chán ngấy là “bạn cần biết JavaScript trước khi học một framework!”. Mặc dù lời khuyên này đúng nhưng nó lại đưa ra một câu hỏi khác thường không được trả lời. “Tôi cần biết BAO NHIÊU JavaScript trước khi học React?”

Tôi đã không còn là một chuyên gia JavaScript khi tự học React cách đây 3 năm. Nhưng có một số điều quan trọng mà tôi biết bạn cũng nên làm trước khi học React (hoặc bất kỳ thư viện/framework nào cho vấn đề đó).

• Chức năng (bao gồm chức năng mũi tên ES6)
• Các biến (const & let)
• Loại dữ liệu
• Đối tượng và mảng (Và cách làm việc với chúng)
• Nhập/Xuất mô-đun
• Làm việc với API
• Hiểu cách thao tác DOM hoạt động

Nếu bạn có ý tưởng cơ bản về cách hoạt động của những thứ này, bạn sẽ có thể thành thạo React. Làm việc với React sẽ giúp bạn trở thành nhà phát triển JavaScript giỏi hơn vì bạn vẫn đang làm việc với JavaScript - Suy cho cùng thì React vẫn là một thư viện JavaScript!

2) Sử dụng ứng dụng tạo phản ứng

Bằng cách sử dụng ứng dụng tạo-tạo, bạn có thể tìm thấy GitHub để biết thêm thông tin, đây là một cách tuyệt vời để bắt đầu. Nó cung cấp cho bạn một dự án ví dụ hoạt động ngay lập tức, vì vậy bạn không phải lo lắng về việc tự mình thiết lập một dự án từ đầu!

Điều này có nghĩa là ít nhất bây giờ bạn có thể bỏ qua những thứ như Babel, webpack và tất cả các từ thông dụng ưa thích khác. Khi bạn xử lý tốt React, bạn có thể tìm hiểu sâu hơn về các chủ đề này.

3) Hãy quên Redux, API ngữ cảnh và những thứ quản lý trạng thái ưa thích khác

Nhắc đến từ thông dụng, có thể bạn đã từng gặp Redux, một framework quản lý trạng thái cho React. Mặc dù Redux khá thú vị và được sử dụng cho các ứng dụng lớn hơn, nhưng bạn không cần phải học Redux khi bắt đầu với React! React có các tính năng quản lý trạng thái riêng, dễ hiểu hơn và đủ để giúp bạn bắt đầu ngay từ đầu.

4) Tập trung vào các thành phần chức năng

Nếu bạn muốn lưu trữ trạng thái trong một thành phần, theo truyền thống, bạn cần sử dụng thành phần lớp ES6. Các thành phần của lớp hơi rắc rối (phải lo lắng về việc ràng buộc “cái này”, xử lý các hàm tạo, khó lưu trữ/cập nhật trạng thái phức tạp, v.v.):

// function component
const App = (props) => {
	return <h2>Hello my name is {props.name}.</h2>;
};

// class based component
class App extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		return <h2>Hello my name is {this.props.name}.</h2>;
	}
}

Các thành phần chức năng và hook đang trở thành cách “đẹp hơn” để tạo ra các thành phần phản ứng. Các thành phần hàm chỉ là các hàm JavaScript thông thường trả về JSX. Những thứ này kết hợp với hook “useState” giúp cho việc tạo và làm việc với các thành phần trở thành một trải nghiệm thú vị hơn nhiều.

Tôi không nói “tránh xa các thành phần của lớp!”, nếu bạn muốn tìm hiểu chúng, bằng mọi cách, hãy tiếp tục! Đó sẽ là những kiến ​​thức hữu ích cần có. Tuy nhiên, mọi thứ đang nghiêng về Hooks nhiều hơn, vì vậy đừng bỏ bê chúng!

5) Chọn một cách để tạo kiểu cho một thành phần

Có một số cách để tạo kiểu cho một thành phần trong React (ai có thể nghĩ ra, phải không?) Lần cuối cùng tôi đếm được có ít nhất 8 cách. Thật điên rồ.

Dù sao đi nữa, hãy cố gắng đừng khiến bản thân bối rối bằng cách tìm hiểu tất cả các cách khác nhau mà bạn có thể tạo kiểu cho một thành phần. CSS và bảng định kiểu cũ đơn giản vẫn hoạt động tốt khi bạn mới bắt đầu. Chưa kể hầu hết các công ty tôi từng làm việc gần đây đều sử dụng CSS đơn giản, vì vậy đây là một cách khá chuẩn để thực hiện mọi việc ngay cả với React.

6) Tìm hiểu useState Hook

Tôi đã đề cập đến hook useState trước đó, vậy nó là gì?

Hook useState cho phép chúng ta lưu trữ trạng thái trong một thành phần chức năng (trước đây chúng ta cần sử dụng thành phần lớp cho việc đó). Nó trông như thế này:

const [name, setName] = useState('Chris');

Điều này lưu trữ một biến được gọi nameở trạng thái. Chúng ta có thể thay đổi biến bằng cách sử dụng setName()và khởi tạo nó bằng cách chuyển một giá trị cho useStatehàm (trong trường hợp này là “Chris”)

Hook useState giúp việc quản lý trạng thái phức tạp trở nên dễ dàng hơn (chúng ta có thể có “nhiều hook trạng thái” cho mỗi thành phần) và chúng ta không phải lo lắng về việc sử dụng “this” mỗi khi muốn làm việc với trạng thái:

const App = (props) => {
	const [name, setName] = useState('Chris');
	const [age, setAge] = useState(28);

	return (
		<h2>
			Hello my name is {name}. and I am {age} years old
		</h2>
	);
};

7) Tìm hiểu hook useEffect

hook useEffect là hook React cho phép chúng ta chạy mã ở các phần khác nhau trong vòng đời của một thành phần.

hook useEffect là nơi bạn thường thực hiện lệnh gọi API, cập nhật thành phần nếu đạo cụ thay đổi và chạy bất kỳ mã dọn dẹp nào.

Bạn có thể giải quyết rất nhiều vấn đề một cách dễ dàng với các hook useEffect và useState , vì vậy hãy đảm bảo có chúng trong kho kiến ​​thức React của bạn!

8) Bắt đầu với một thành phần

React hoàn toàn là về các thành phần, nhưng điều đó không có nghĩa là chúng ta phải quá nhiệt tình tạo ra các thành phần cho mọi thứ nhỏ nhặt trong dự án của mình! Một gợi ý là hãy bắt đầu với một thành phần và khi thành phần này quá lớn, hãy chia mọi thứ thành các thành phần nhỏ hơn. Việc tránh "trừu tượng hóa quá mức" sẽ giúp mã của bạn dễ dàng theo dõi ngay từ đầu và tránh việc khoan prop - đây là lúc bạn phải chuyển props qua nhiều thành phần và có thể trở thành một vấn đề khó quản lý.

9)Props vs State

Điều quan trọng là phải tìm hiểu đạo cụ là gì, trạng thái là gì và khi nào nên sử dụng từng đạo cụ. Đây là những nền tảng của React và bạn sẽ sử dụng chúng rất nhiều. Ở một cấp độ cao:

Đạo cụ là dữ liệu được truyền đến các thành phần của bạn từ cha mẹ của chúng . Dữ liệu này có thể là bất cứ thứ gì - số, chuỗi, đối tượng, mảng, hàm, v.v.

Đây là một ví dụ về việc chuyển tên và tuổi cho thành phần UserDetails từ thành phần Ứng dụng (tức là thành phần gốc):

const App = () => {
	return <UserDetails name='chris' age={25} />;
};

Trạng thái là dữ liệu có thể biểu thị các phần của ứng dụng có thể thay đổi . Ví dụ: danh sách người dùng, cờ boolean cho biết liệu một phương thức có mở hay không và tất cả giá trị trường đầu vào đều có thể được lưu trữ ở trạng thái:

const App = () => {
	const [isModalOpen, setIsModalOpen] = useState(false);
	const [inputValue, setInputValue] = useState("hello React");
	const [userList, setUserList] =useState([
		{name: "chris", age: 28},
		{name: "jenny", age: 20},
		{name: "alfred", age: 32}
	])

    return(
        // ...JSX
    )
}

10) Bỏ qua máy chủ - sử dụng dữ liệu giả mạo hoặc API hiện có

Nếu bạn đang cố gắng học React, tốt nhất bạn nên tập trung vào React. Có ý nghĩa phải không? Khi thực hành tìm nạp dữ liệu từ một API, bạn có thể nghĩ: “Chết tiệt, tôi cần xây dựng một API cho việc này! Có lẽ tôi phải học Node.js!”.

Nếu mục tiêu của bạn là trở thành một nhà phát triển full-stack thì đây không phải là một ý tưởng tồi. Nhưng nếu bạn muốn tìm hiểu React, hãy thử sử dụng các API hiện có hoặc dữ liệu mô phỏng để thực hành làm việc với API. Điều này giúp bạn tập trung vào React