React.js là một thư viện JavaScript, được thiết kế bởi Facebook, dùng để xây dựng các giao diện người dùng (UI) hoặc các thành phần UI có thể tái sử dụng.
React.js cho phép chúng ta tạo ra các thành phần UI độc lập, linh hoạt và có thể kết hợp với nhau để tạo ra các trang web động và phản ứng.
React.js được phát triển và duy trì bởi Facebook và sau đó được sử dụng trong các sản phẩm của họ như WhatsApp, Instagram, Oculus… Nó cũng được sử dụng bởi nhiều trang web nổi tiếng khác như Netflix, Airbnb, Dropbox, Reddit, Twitter…
React.js sử dụng để tạo ra các giao diện người dùng đẹp, hiện đại, và thân thiện với người dùng. Nó cũng giúp chúng ta xây dựng các ứng dụng web hiệu năng cao, có khả năng mở rộng, và dễ bảo trì.
React.js cung cấp cho chúng ta một cách khai báo và hiệu quả để tạo ra các thành phần UI bằng cách sử dụng JSX, một cú pháp mở rộng của JavaScript, cho phép chúng ta viết HTML trong JavaScript. JSX giúp chúng ta viết code ngắn gọn, rõ ràng, và dễ đọc hơn.
React.js cũng hỗ trợ cho chúng ta một cơ chế quan trọng là Virtual DOM (DOM ảo), một biểu diễn trong bộ nhớ của DOM thực tế. Khi có sự thay đổi trong UI, React.js sẽ so sánh Virtual DOM mới với Virtual DOM cũ, và chỉ cập nhật những phần thay đổi trên DOM thực tế. Điều này giúp tăng tốc độ render UI và giảm thiểu chi phí tài nguyên.
React.js cũng cho phép chúng ta quản lý trạng thái (state) và thuộc tính (props) của các thành phần UI một cách hiệu quả. State là một đối tượng chứa các dữ liệu ảnh hưởng đến nội dung hoặc hành vi của thành phần. Props là một đối tượng chứa các tham số được truyền từ thành phần cha sang thành phần con. Bằng cách sử dụng state và props, chúng ta có thể tạo ra các thành phần UI có thể tương tác và cập nhật theo dữ liệu.
React.js giúp chúng ta viết code ngắn gọn, sạch sẽ, và dễ bảo trì hơn. Bằng cách sử dụng JSX, chúng ta có thể viết HTML và JavaScript trong cùng một file, không cần phải tạo ra các chuỗi HTML hoặc sử dụng các phương thức như document.createElement()
hay appendChild()
. chúng ta cũng có thể tận dụng các tính năng mới của JavaScript như ES6, ES7…
React.js giúp chúng ta tạo ra các giao diện người dùng đẹp, hiện đại, và thân thiện với người dùng. Bằng cách sử dụng các thành phần UI có thể tái sử dụng và kết hợp với nhau, chúng ta có thể tạo ra các trang web động và phản ứng, phù hợp với các thiết bị khác nhau. chúng ta cũng có thể sử dụng các thư viện UI phổ biến như Bootstrap, Material UI, Ant Design… để tăng tính thẩm mỹ và chuyên nghiệp cho trang web của chúng ta.
React.js giúp chúng ta xây dựng các ứng dụng web hiệu năng cao, có khả năng mở rộng, và dễ bảo trì. Bằng cách sử dụng Virtual DOM, chúng ta có thể tăng tốc độ render UI và giảm thiểu chi phí tài nguyên. Bằng cách sử dụng state và props, chúng ta có thể quản lý trạng thái và thuộc tính của các thành phần UI một cách hiệu quả. chúng ta cũng có thể sử dụng các công cụ và framework hỗ trợ cho React.js như Redux, React Router, Next.js… để quản lý trạng thái toàn cục, điều hướng trang web, render bên server…
Để cài đặt React, chúng ta có rất nhiều cách phổ biến, tuy nhiên sẽ được quy về 2 phương pháp:
Cách 1: Sử dụng trực tiếp React.js từ CDN thông qua tag <script>
.
Cách 2: Cài đặt React.js bằng CLI và sử dụng với các bundle.
Với cách đầu tiên, sử dụng trực tiếp thông qua CDN với thư viện react và babel sẽ rất “mệt”, các cấu hình, cài đặt sẽ khó để tạo một dự án hoàn chỉnh:
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const { useState } = React;
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={() => setCount(count - 1)}>-</button>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
);
};
ReactDOM.render(<Counter />, document.getElementById('root'));
</script>
Vì vậy chúng ta sẽ thường sử dụng cách thứ 2 hơn.
Trước khi sử dụng React, chúng ta cần phải cài đặt một môi trường Javascript runtime(platform) ví dụ phổ biến nhất là Node.js.
Sau khi cài đặt Node.js, chúng ta có thể sử dụng một số cách thức cài đặt dự án React như sau:
1. npx create-react-app react-01
1. npm create vite
2. react-01
3. React
4. JavaScript
Trước đây, thường sử dụng create-react-react
vì nó được sử dụng và giới thiệu bởi reactjs.org
. Tuy nhiên ở các bản cập nhật mới, trang hướng dẫn này được chuyển thành: react.dev
và được khuyến khích sử dụng vite hơn và có hướng chuyển dịch sang Next.js.
Điểm mạnh lớn nhất của Vite so với create-react-app
là nhẹ hơn, cài đặt nhanh hơn.
Sau khi khởi tạo xong dự án Vite, chúng ta có một cấu trúc mặc định như sau:
Khác với create-react-app
, file index.html
sẽ được để ở root, trong public không còn các file manifest.json, robots.txt… Còn lại các file, folder khác hầu hết đều giống nhau. Ngoài ra, với Vite, mặc định sẽ không cài đặt node_modules
và sẽ có sẵn eslint.
Đây là một cấu trúc folder trong một dự án React.
📦react01
┣ 📂public // Thư mục chứa các tệp tĩnh không thay đổi khi xây dựng
┃ ┣ 📜favicon.ico // Biểu tượng trang web
┃ ┗ 📜index.html // Tệp HTML chính của ứng dụng React
┣ 📂src // Thư mục chứa mã nguồn của ứng dụng React
┃ ┣ 📂app // Thư mục chứa các thành phần chính của ứng dụng
┃ ┃ ┗ 📜index.jsx // Tệp chính của ứng dụng
┃ ┣ 📂assets // Thư mục chứa các tài nguyên như màu sắc, CSS, font, hình ảnh và js
┃ ┃ ┣ 📂color // Thư mục chứa các tệp liên quan đến màu sắc
┃ ┃ ┣ 📂css // Thư mục chứa các tệp CSS
┃ ┃ ┣ 📂fonts // Thư mục chứa các font chữ
┃ ┃ ┣ 📂images // Thư mục chứa các hình ảnh
┃ ┃ ┗ 📂js // Thư mục chứa các tệp JavaScript
┃ ┣ 📂components // Thư mục chứa các components chung của dự án
┃ ┣ 📂contexts // Thư mục chứa các context của ứng dụng
┃ ┣ 📂configs // Thư mục chứa các configs của dự án
┃ ┣ 📂hooks // Thư mục chứa các hooks của ứng dụng
┃ ┣ 📂pages // Thư mục chứa các pages của dự án
┃ ┣ 📂routers // Thư mục chứa các routers của dự án
┃ ┣ 📂store // Thư mục chứa các action và reducers của ứng dụng
┃ ┃ ┣ 📜index.js // Tệp chính của action
┃ ┃ ┗ 📜reducers.js // Tệp chứa các reducers
┃ ┗ 📜index.js // Tệp chính của ứng dụng
┣ 📜.env.development // Tệp cấu hình môi trường phát triển
┣ 📜.env.production // Tệp cấu hình môi trường sản xuất
┣ 📜.gitignore // Các tệp/ thư mục được bỏ qua bởi Git
┗ 📜package.json // Các phụ thuộc và cài đặt dự án
Hoặc có thể tham khảo tại đây: