ReactJS - Example: A Comprehensive Guide for Beginners

Xin chào các bạn đang học lập trình! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị vào thế giới của ReactJS. Là người đã dạy khoa học máy tính hơn một thập kỷ, tôi đã chứng kiến biết bao nhiêu sinh viên cảm thấy hứng thú khi họ nắm bắt được sức mạnh của React. Hãy cùng nhau lặn vào và tạo ra điều kỳ diệu nào!

What is ReactJS?

Trước khi chúng ta vào sâu vào ví dụ, hãy nhanh chóng tìm hiểu ReactJS là gì. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà từ những khối Lego. ReactJS giống như một bộ Lego ma thuật có thể thay đổi hình dạng và màu sắc một cách tự nhiên! Nó là thư viện JavaScript giúp chúng ta xây dựng giao diện người dùng (phần của các trang web và ứng dụng mà bạn thấy và tương tác) một cách thông minh và hiệu quả.

Features of ReactJS

Hãy cùng nhìn qua một số tính năng chính làm cho React trở nên đặc biệt:

Tính năng	Mô tả
Component-Based	React cho phép chúng ta xây dựng giao diện người dùng bằng các mảnh có thể tái sử dụng gọi là component
Virtual DOM	Một bản sao nhẹ của DOM thực tế để cập nhật nhanh hơn
JSX	Một mở rộng cú pháp cho phép chúng ta viết mã HTML alike trong JavaScript
Unidirectional Data Flow	Dữ liệu chảy theo một hướng, làm cho ứng dụng của chúng ta dễ dự đoán hơn
React Native	Cho phép chúng ta xây dựng ứng dụng di động sử dụng React

Bây giờ chúng ta đã có cái nhìn tổng quan, hãy tạo một ví dụ React đơn giản để xem các tính năng này trong hành động!

Setting Up Our React Environment

Trước tiên, chúng ta cần thiết lập môi trường phát triển. Đừng lo lắng, nó dễ dàng hơn bạn nghĩ! Chúng ta sẽ sử dụng một công cụ叫做 Create React App, nó thiết lập mọi thứ cho chúng ta chỉ với một lệnh.

Mở terminal của bạn và gõ:

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

Voilà! Bạn vừa tạo xong ứng dụng React đầu tiên của mình. Nếu bạn mở trình duyệt và truy cập http://localhost:3000, bạn nên thấy ứng dụng React mặc định đang chạy.

Creating Our First Component

Bây giờ, hãy tạo component React đầu tiên của chúng ta. Chúng ta sẽ tạo một component chào đón đơn giản nói "Xin chào" với ai đó.

Mở file src/App.js và thay thế nội dung của nó bằng này:

import React from 'react';

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

function App() {
return (
<div className="App">
<Greeting name="React Learner" />
</div>
);
}

export default App;

Hãy phân tích này:

1. Chúng ta import React (dù chúng ta không sử dụng nó một cách rõ ràng, nhưng nó cần thiết cho JSX).
2. Chúng ta xác định một component Greeting rằng nhận props (thuộc tính) như một đối số.
3. Component Greeting trả về JSX, trông giống HTML nhưng thực ra là JavaScript.
4. Chúng ta sử dụng component Greeting trong component App, truyền một name prop cho nó.

Khi bạn lưu file này, bạn nên thấy "Hello, React Learner!" trong trình duyệt của bạn. Chúc mừng, bạn vừa tạo xong component React đầu tiên của mình!

Adding State to Our Component

Bây giờ, hãy làm cho ứng dụng của chúng ta trở nên tương tác hơn bằng cách thêm state. Chúng ta sẽ tạo một nút mà khi nhấn vào, nó sẽ thay đổi tên trong lời chào.

Cập nhật App.js của bạn để trông như này:

import React, { useState } from 'react';

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

function App() {
const [name, setName] = useState('React Learner');

const changeName = () => {
setName('React Expert');
};

return (
<div className="App">
<Greeting name={name} />
<button onClick={changeName}>Become an Expert</button>
</div>
);
}

export default App;

Đây là những gì mới:

1. Chúng ta import useState, một React hook cho phép chúng ta thêm state vào component của mình.
2. Chúng ta sử dụng useState để tạo một biến state name và một hàm setName để cập nhật nó.
3. Chúng ta tạo một hàm changeName rằng cập nhật state name của chúng ta.
4. Chúng ta thêm một nút rằng gọi changeName khi được nhấn.

Bây giờ, khi bạn nhấn nút "Become an Expert", lời chào nên thay đổi từ "Hello, React Learner!" thành "Hello, React Expert!". Điều này minh họa cho dữ liệu单向流传: thay đổi state kích hoạt việc re-render component của chúng ta.

Using the Virtual DOM

Bạn có thể đang tự hỏi, "Tại sao toàn bộ trang không tải lại khi chúng ta nhấn nút?" Đây là lúc React's Virtual DOM介入. Khi chúng ta thay đổi state, React tạo một cây virtual DOM mới, so sánh nó với cây trước đó, và chỉ cập nhật các phần của DOM thực tế đã thay đổi. Điều này làm cho ứng dụng của chúng ta siêu nhanh và hiệu quả!

Conclusion

Và thế là bạn đã có nó, các bạn! Chúng ta đã tạo một ứng dụng React đơn giản minh họa một số tính năng cốt lõi của React: components, props, state, và virtual DOM. Chúng ta chỉ mới chạm đến bề mặt của những gì React có thể làm, nhưng tôi hy vọng ví dụ này đã cho bạn một hương vị của sức mạnh và sự linh hoạt của nó.

Nhớ rằng, việc học lập trình giống như học một ngôn ngữ mới. Nó đòi hỏi thời gian, thực hành và sự kiên nhẫn. Đừng nản lòng nếu mọi thứ không ngay lập tức trở nên rõ ràng. Tiếp tục thử nghiệm, tiếp tục xây dựng, và quan trọng nhất, đừng bao giờ ngừng vui vẻ!

Trong bài học tiếp theo, chúng ta sẽ sâu hơn vào các khái niệm React nâng cao. Đến那时, chúc các bạn lập trình vui vẻ và các component của bạn luôn render mượt mà!

Credits: Image by storyset