Các khái niệm JavaScript cần thiết cho React Developers

Chào các bạn! Mình Tuấn đây sau một thời gian vắng bóng vì bận cày 4 job thì mãi mới có một thứ 2 rảnh rỗi để viết lách một thứ gì đó. Lâu rồi không viết nên để bắt đầu nhẹ nhàng thì mình sẽ trả lời một câu hỏi nhỏ của một số bạn sv có hỏi mình. Mình xin viết nó thành từng bài nhỏ để các bạn tiện theo dõi. Cảm ơn các bạn đã luôn ủng hộ mình.

👋 Từ hôm nay, mình sẽ dẫn dắt các bạn qua một hành trình thú vị: trở thành một Frontend Developer "đỉnh của chóp" với React. Có thể sẽ phải mất khả nhiều bài tuy nhiên "Hành trình vạn dặm, bắt đầu từ một bước chân" - Lão Tử nên chúng ta cứ đi từng bước thôi. Bắt đầu từ những câu hỏi và kiến thức giễ nhất rồi dần dần update lên nhé.

Những bài viết này, không chỉ là lý thuyết suông, mình sẽ đưa ra những ví dụ cực kỳ thực tế để các bạn dễ hình dung và áp dụng. Bắt đầu thôi!

1. Bắt Đầu Từ Đâu?

Trước hết, hãy nắm chắc JavaScript, rồi mới đến React. Mình từng thấy nhiều bạn mới học vừa JavaScript vừa React và kết quả... ôi thôi, rối não lắm! 😵

1.1. Khi Nào Bạn Sẵn Sàng Cho React?

Làm thế nào để biết bạn đã sẵn sàng? Khi bạn cảm thấy thoải mái với JavaScript, bạn đã sẵn sàng chinh phục React!

2. Những Khái Niệm JavaScript Cần Biết

React không phải là một cái gì đó Magic cả, nếu bạn hiểu rõ các khái niệm cốt lõi của JavaScript:

2.1. Variables

Trong JavaScript, let và const là hai cách khai báo biến. Dùng let cho những giá trị có thể thay đổi, còn const cho những giá trị không đổi. Ví dụ:

let count = 0;
const url = "https://dev.to/";

2.2. Objects và Arrays

Trong React, bạn sẽ làm việc nhiều với Objects và Arrays. Objects lưu trữ cặp key-value, còn Arrays dùng để lưu trữ danh sách dữ liệu.

2.3. Function Expressions và Arrow Functions

React components chính là các hàm JavaScript. Có hai loại: regular function và arrow function. Ví dụ:

function Hello(props) { return <h1>Hello {props.name}</h1>
}
Hay dùng arrow function:
const Button = () => <button>Click me!</button>

2.4. ES Modules Import/Export

Trong React, mỗi component thường được đặt trong một module riêng. Bạn cần hiểu cách sử dụng import/export để tái sử dụng code.

2.5. Ternary Operator

Ternary operator trong React rất hữu ích để render điều kiện:

{isLoggedIn ? <Logout /> : <Login />}

2.6. Object Destructuring

Destructuring giúp bạn "bóc tách" các properties từ object. Rất hữu ích khi làm việc với React components.

2.7. Array map() Method

Method map() của Array cực kỳ quan trọng khi bạn muốn render một danh sách các component trong React.

3. Áp Dụng Thực Tế Trong React

3.1. Ví Dụ với Variables

Giả sử bạn có một biến count dùng để theo dõi số lượt click:

let count = 0;
// Sử dụng count trong một function component
function Counter() { return <p>Bạn đã click {count} lần!</p>
}

3.2. Objects và Arrays Trong React

Xem xét một ví dụ với object:

const user = { name: "An", age: 30 };
function UserProfile() { return <div>Tên: {user.name}, Tuổi: {user.age}</div>;
}

Và với array:

const items = ["Apple", "Banana", "Cherry"];
function FruitList() { return ( <ul> {items.map(item => <li key={item}>{item}</li>)} </ul> );
}

3.3. Import/Export Trong React Tưởng tượng bạn có một component Button:

// Trong file Button.js
export const Button = () => <button>Click me!</button>;

Và bạn muốn sử dụng nó trong một trang khác:

// Trong file HomePage.js
import { Button } from './Button';
function HomePage() { return <Button />;
}

3.4. Sử Dụng Ternary và Destructuring

Ví dụ với ternary:

const Message = ({ isLoggedIn }) => ( <div>{isLoggedIn ? <span>Welcome back!</span> : <span>Please log in.</span>}</div>
);

Và destructuring:

const Hello = ({ name }) => <div>Hello, {name}!</div>;

3.5. Render Danh Sách với map()

Giả sử bạn có một danh sách sản phẩm:

const products = [{ name: "Áo", price: "100" }, { name: "Quần", price: "150" }];
function ProductList() { return ( <div> {products.map(product => <div key={product.name}>{product.name} - Giá: {product.price}</div>)} </div> );
}

4. Kết Luận và Bước Tiếp Theo

Vậy là mình đã giới thiệu qua các khái niệm JavaScript cơ bản cần thiết khi học React. Nhớ là, học không chỉ để biết, mà hãy áp dụng vào các dự án thực tế của bạn. Và đừng quên, luyện tập các bài tập js nâng cao này: https://github.com/lydiahallie/javascript-questions -> bạn sẽ thấy mình tiến bộ từng ngày. Hãy cho mình biết ý kiến của bạn trong phần bình luận nhé! 🚀

Chúc các bạn một ngày học tập vui vẻ và nhiều thành công! 💪