Hướng dẫn ReactJS: Xây dựng ứng dụng React đầu tiên của bạn

Xin chào các bạnfuture nhà phát triển React! Tôi rất vui mừng được bắt đầu hành trình này cùng các bạn khi chúng ta lặn sâu 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 có thể đảm bảo với các bạn rằng React không chỉ mạnh mẽ mà còn vô cùng thú vị để học. Hãy cùng bắt đầu nào!

ReactJS - Home

ReactJS là gì?

React là thư viện JavaScript để xây dựng giao diện người dùng. Nó được phát triển bởi Facebook và từ đó đã trở thành một trong những thư viện front-end phổ biến nhất trên thế giới. Nhưng đừng lo lắng nếu điều đó听起来 đáng sợ - chúng ta sẽ làm rõ từng bước.

Tại sao lại chọn React?

Hãy tưởng tượng bạn đang xây dựng một ngôi nhà bằng bài. Mỗi khi bạn muốn thay đổi điều gì đó, bạn phải cẩn thận điều chỉnh từng bài, phải không? React giống như những bài ma thuật tự động điều chỉnh khi bạn thay đổi một phần. Nó giúp xây dựng và cập nhật các ứng dụng web dễ dàng và nhanh chóng hơn.

Yêu cầu trước

Trước khi chúng ta bắt đầu, hãy chắc chắn rằng chúng ta đã có tất cả những gì cần thiết:

Hiểu biết cơ bản về HTML và CSS
quen thuộc với JavaScript (đừng lo lắng, chúng ta sẽ xem xét khi cần)
Một trình soạn thảo văn bản (tôi recommend Visual Studio Code)
Node.js đã cài đặt trên máy tính của bạn

Thiết lập dự án React đầu tiên của bạn

Hãy bắt đầu bằng cách tạo dự án React đầu tiên của chúng ta. Chúng ta sẽ sử dụng một công cụ叫做 Create React App, nó thiết lập mọi thứ chúng ta cần chỉ với một lệnh.

Mở terminal hoặc command prompt của bạn
Đi tới thư mục nơi bạn muốn tạo dự án
Chạy lệnh sau:

npx create-react-app my-first-react-app

Quá trình này có thể mất vài phút. Khi hoàn tất, đi tới thư mục dự án mới của bạn:

cd my-first-react-app

Bây giờ, hãy khởi động ứng dụng của chúng ta:

npm start

Voilà! Bạn nên thấy một cửa sổ trình duyệt mới mở ra với ứng dụng React đầu tiên của bạn đang chạy. Nó chưa nhiều, nhưng chúng ta mới chỉ bắt đầu!

Hiểu cấu trúc dự án

Hãy xem xét những gì Create React App đã thiết lập cho chúng ta:

my-first-react-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg

Những tệp quan trọng nhất đối với chúng ta hiện tại nằm trong thư mục src. App.js là nơi chúng ta sẽ viết phần lớn mã của mình.

Component React đầu tiên của bạn

Mở src/App.js trong trình soạn thảo văn bản của bạn. Bạn nên thấy điều gì đó như này:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Chỉnh sửa <code>src/App.js</code> và lưu để tải lại.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Học React
</a>
</header>
</div>
);
}

export default App;

Đây là một component React. Đừng lo lắng nếu nó trông rối rắm - chúng ta sẽ phân tích nó:

Chúng ta import React và các tệp cần thiết khác
Chúng ta định nghĩa một hàm叫做 App
Hàm này trả về một số JSX (JavaScript XML) - một cú pháp đặc biệt trông như HTML nhưng cho phép chúng ta sử dụng JavaScript bên trong
Cuối cùng, chúng ta export component để có thể sử dụng nó ở nơi khác

Hãy thay đổi component này để làm cho nó trở thành của riêng chúng ta:

import React from 'react';
import './App.css';

function App() {
return (
<div className="App">
<h1>Xin chào ứng dụng React đầu tiên của tôi!</h1>
<p>Tôi rất háo hức học React!</p>
</div>
);
}

export default App;

Lưu tệp và kiểm tra trình duyệt của bạn - nó nên tự động cập nhật!

Thêm tính tương tác với state

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 một nút đếm số lần nó được nhấp.

Thay thế nội dung của App.js bằng này:

import React, { useState } from 'react';
import './App.css';

function App() {
const [count, setCount] = useState(0);

function handleClick() {
setCount(count + 1);
}

return (
<div className="App">
<h1>Xin chào ứng dụng React đầu tiên của tôi!</h1>
<p>Tôi rất háo hức học React!</p>
<button onClick={handleClick}>
Bạn đã nhấp vào tôi {count} lần
</button>
</div>
);
}

export default App;

Hãy phân tích điều này:

Chúng ta import useState, một React hook cho phép chúng ta thêm state vào component
Chúng ta sử dụng useState(0) để tạo một biến state count và một hàm setCount để cập nhật nó
Chúng ta định nghĩa một hàm handleClick để tăng giá trị của count
Trong JSX của chúng ta, chúng ta thêm một nút hiển thị số lần nhấp và gọi handleClick khi được nhấp

Lưu và kiểm tra trình duyệt của bạn - bạn nên có một nút hoạt động mà đếm số lần bạn đã nhấp!

Tạo một component mới

Khi ứng dụng của chúng ta phát triển, chúng ta sẽ muốn chia nhỏ nó thành các component nhỏ hơn, có thể tái sử dụng. Hãy tạo một component mới cho bộ đếm của chúng ta.

Tạo một tệp mới src/Counter.js và thêm mã này:

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

function handleClick() {
setCount(count + 1);
}

return (
<div>
<button onClick={handleClick}>
Bạn đã nhấp vào tôi {count} lần
</button>
</div>
);
}

export default Counter;

Bây giờ, hãy sử dụng component mới này trong App.js của chúng ta:

import React from 'react';
import './App.css';
import Counter from './Counter';

function App() {
return (
<div className="App">
<h1>Xin chào ứng dụng React đầu tiên của tôi!</h1>
<p>Tôi rất háo hức học React!</p>
<Counter />
<Counter />
</div>
);
}

export default App;

Nhìn xem! Bây giờ chúng ta có hai bộ đếm độc lập trên trang của mình.

Kết luận

Chúc mừng! Bạn vừa xây dựng ứng dụng React đầu tiên của mình, học về component, state, và thậm chí tạo một component tái sử dụng được. Đây chỉ là bắt đầu của hành trình React của bạn, nhưng bạn đã đi được rất xa.

Nhớ rằng, học lập trình giống như học một ngôn ngữ mới - nó đòi hỏi sự luyện tập và kiên nhẫn. Đừng nản lòng nếu một điều gì đó không hiểu ngay lập tức. Hãy tiếp tục thử nghiệm, tiếp tục xây dựng, và quan trọng nhất, hãy vui vẻ!

Trong bài học tiếp theo, chúng ta sẽ đi sâu hơn vào React props, quản lý state phức tạp hơn, và bắt đầu xây dựng một ứng dụng lớn hơn. Đến那个时候, chúc các bạn lập trình vui vẻ!

Credits: Image by storyset

Hướng Dẫn Tiếp Theo:

ReactJS - Giới thiệu