React là một trong những khung JavaScript phổ biến nhất từng được tạo ra và tôi tin rằng nó là một trong những công cụ tốt nhất hiện có.
React là gì?
React là một thư viện JavaScript nhằm mục đích đơn giản hóa việc phát triển các giao diện trực quan.
Được phát triển tại Facebook và phát hành ra toàn thế giới vào năm 2013, nó thúc đẩy một số ứng dụng được sử dụng rộng rãi nhất, cung cấp năng lượng cho Facebook và Instagram trong số vô số các ứng dụng khác.
Mục tiêu chính của nó là giúp bạn dễ dàng suy luận về một giao diện và trạng thái của nó tại bất kỳ thời điểm nào. Nó thực hiện điều này bằng cách chia giao diện người dùng thành một tập hợp các thành phần.
Bạn có thể gặp một số khó khăn ban đầu khi học React. Nhưng một khi nó “nhấp chuột”, tôi đảm bảo nó sẽ là một trong những trải nghiệm tuyệt vời nhất mà bạn từng có. React làm cho nhiều thứ trở nên dễ dàng hơn và hệ sinh thái của nó chứa đầy các thư viện và công cụ tuyệt vời.
Bản thân React có một API rất nhỏ và về cơ bản bạn cần hiểu 4 khái niệm để bắt đầu:
- Các thành phần
- JSX
- Tiểu bang
- Đạo cụ
Chúng tôi sẽ khám phá tất cả những điều này trong cuốn sách này và chúng tôi sẽ để lại các khái niệm nâng cao hơn cho các hướng dẫn khác. Tôi sẽ cung cấp cho bạn một số gợi ý trong phần cuối cùng về cách tiến lên phía trước.
Bạn cần biết bao nhiêu JavaScript để sử dụng React
Trước khi tiến thẳng vào React, bạn nên hiểu rõ về một số khái niệm JavaScript cốt lõi.
Bạn không cần phải là một chuyên gia JavaScript, nhưng tôi nghĩ bạn cần có một cái nhìn tổng quan tốt về:
- Biến
- Hàm mũi tên
- Làm việc với các đối tượng và mảng bằng Rest and Spread
- Cấu trúc đối tượng và mảng
- Chữ mẫu
- Gọi lại
- Mô-đun ES
Nếu những khái niệm đó nghe có vẻ xa lạ, tôi đã cung cấp cho bạn một số liên kết để tìm hiểu thêm về những chủ đề đó.
Tại sao bạn nên học React?
Tôi thực sự khuyên rằng bất kỳ nhà phát triển Web nào cũng có ít nhất hiểu biết cơ bản về React.
Đó là bởi vì một vài lý do.
- React rất phổ biến. Là một nhà phát triển, rất có thể bạn sẽ làm việc trên một dự án React trong tương lai. Có thể là một dự án hiện có hoặc có thể nhóm của bạn sẽ muốn bạn làm việc trên một ứng dụng hoàn toàn mới dựa trên React.
- Rất nhiều công cụ ngày nay được xây dựng bằng cách sử dụng React ở cốt lõi. Các khung và công cụ phổ biến như Next.js, Gatsby và nhiều công cụ khác đều sử dụng React.
- Là một kỹ sư frontend, React có thể sẽ xuất hiện trong một cuộc phỏng vấn xin việc.
Đó là tất cả những lý do chính đáng, nhưng một trong những lý do chính mà tôi muốn bạn học React là nó rất tuyệt.
Nó thúc đẩy một số thực hành phát triển tốt, bao gồm khả năng tái sử dụng mã và phát triển theo hướng thành phần. Nó nhanh, nhẹ và cách nó khiến bạn suy nghĩ về luồng dữ liệu trong ứng dụng của mình hoàn toàn phù hợp với nhiều tình huống phổ biến.
Cách cài đặt React
Có một số cách khác nhau để cài đặt React.
Để bắt đầu, tôi thực sự khuyên bạn nên sử dụng một cách tiếp cận và đó là sử dụng công cụ được đề xuất chính thức có tên create-react-app
.
create-react-app
là một ứng dụng dòng lệnh, nhằm mục đích giúp bạn bắt kịp tốc độ với React ngay lập tức.
Bạn bắt đầu bằng cách sử dụng npx
, đây là một cách dễ dàng để tải xuống và thực thi các lệnh Node.js mà không cần cài đặt chúng.
npx
đi kèm npm
(kể từ phiên bản 5.2). Nếu bạn chưa cài đặt npm, hãy thực hiện ngay từ https://nodejs.org (npm được cài đặt bằng Node).
Nếu bạn không chắc mình có phiên bản npm nào, hãy chạy npm -v
để kiểm tra xem bạn có cần cập nhật hay không.
Mẹo: hãy xem hướng dẫn về thiết bị đầu cuối OSX của tôi tại https://flaviocopes.com/macos-terminal/ nếu bạn không quen sử dụng thiết bị đầu cuối. Nó áp dụng cho Mac và Linux.
Khi bạn chạy npx create-react-app <app-name>
, npx
sẽ tải xuốngcreate-react-app
bản phát hành gần đây nhất , chạy nó và sau đó xóa nó khỏi hệ thống của bạn.
Điều này thật tuyệt vì bạn sẽ không bao giờ có phiên bản lỗi thời trên hệ thống của mình và mỗi khi bạn chạy nó, bạn sẽ nhận được mã mới nhất và tốt nhất có sẵn.
Hãy bắt đầu sau đó:
npx create-react-app todolist

Đây là khi nó chạy xong:

tạo-phản ứng-ứng dụng-hoàn thành
create-react-appđã tạo cấu trúc tệp trong thư mục mà bạn đã yêu cầu ( todolisttrong trường hợp này) và khởi tạo kho lưu trữ Git .
Nó cũng đã thêm một số lệnh trong package.jsontệp:

Vì vậy, bạn có thể ngay lập tức khởi động ứng dụng bằng cách vào thư mục ứng dụng mới tạo và chạy npm start
.

Theo mặc định, lệnh này khởi chạy ứng dụng trên cổng cục bộ 3000 của bạn và nó mở trình duyệt của bạn, hiển thị cho bạn màn hình chào mừng:

Bây giờ bạn đã sẵn sàng để làm việc trên ứng dụng này!
Các thành phần React
Trong phần trước, bạn đã biết cách tạo ứng dụng React đầu tiên của mình.
Ứng
dụng này đi kèm với một loạt các tập tin mà làm những việc khác nhau,
chủ yếu là liên quan đến cấu hình, nhưng có một tập tin nổi bật: App.js
.
App.js
là Thành phần React đầu tiên bạn gặp.
Mã của nó là:
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>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
)
}
export default App
Ví dụ: một ứng dụng được xây dựng bằng React hoặc một trong những khung công tác giao diện người dùng phổ biến khác như Vue và Svelte, được xây dựng bằng cách sử dụng hàng chục thành phần.
Nhưng hãy bắt đầu bằng cách phân tích thành phần đầu tiên này. Tôi sẽ đơn giản hóa mã thành phần này như thế này:
import React from 'react'
import logo from './logo.svg'
import './App.css'
function App() {
return /* something */
}
export default App
Bạn có thể thấy một vài điều ở đây. Chúng tôi nhập một số thứ và xuất một hàm được gọi là App
.
Những thứ chúng tôi nhập trong trường hợp này là thư viện JavaScript ( react
gói npm), ảnh SVG và tệp CSS.
create-react-app
được thiết lập theo cách cho phép chúng tôi nhập hình ảnh và CSS để sử dụng trong JavaScript của mình, nhưng đây không phải là điều bạn cần quan tâm lúc này. Điều bạn cần quan tâm là khái niệm về thành phần
App
là một hàm, trong ví dụ ban đầu, trả về một cái gì đó mà thoạt nhìn có vẻ khá lạ.
Nó trông giống như HTML nhưng nó có một số JavaScript được nhúng vào.
Đó là JSX , một ngôn ngữ đặc biệt mà chúng tôi sử dụng để xây dựng đầu ra của một thành phần. Chúng ta sẽ nói thêm về JSX trong phần tiếp theo.
Ngoài việc xác định một số JSX để trả về, một thành phần có một số đặc điểm khác.
Một thành phần có thể có trạng thái riêng của nó , có nghĩa là nó đóng gói một số biến mà các thành phần khác không thể truy cập trừ khi thành phần này hiển thị trạng thái này cho phần còn lại của ứng dụng.
Một thành phần cũng có thể nhận dữ liệu từ các thành phần khác. Trong trường hợp này, chúng ta đang nói về đạo cụ .
Đừng lo lắng, chúng ta sẽ sớm xem xét chi tiết tất cả các thuật ngữ đó (JSX, State và Props).
Giới thiệu về JSX
Chúng ta không thể nói về React mà không giải thích về JSX trước.
Trong phần cuối cùng, bạn đã gặp thành phần React đầu tiên của mình, App
thành phần được xác định trong ứng dụng mặc định được xây dựng bởi create-react-app
.
Mã của nó là:
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>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
)
}
export default App
Trước đây chúng tôi đã bỏ qua mọi thứ bên trong return
câu lệnh, nhưng trong phần này chúng tôi sẽ nói về nó.
Chúng tôi gọi JSX là mọi thứ được bao bọc bên trong dấu ngoặc đơn được trả về bởi thành phần:
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
Nó trông giống như HTML, nhưng nó không thực sự là HTML. Nó hơi khác một chút.
Và hơi lạ khi có mã này bên trong một tệp JavaScript. Điều này không giống JavaScript chút nào!
Về cơ bản, React sẽ xử lý JSX và nó sẽ chuyển nó thành JavaScript mà trình duyệt có thể diễn giải.
Vì vậy, chúng tôi đang viết JSX, nhưng cuối cùng vẫn có một bước dịch giúp nó dễ tiêu hóa đối với trình thông dịch JavaScript.
React cung cấp cho chúng ta giao diện này vì một lý do: việc xây dựng giao diện UI bằng JSX dễ dàng hơn .
Tất nhiên, một khi bạn đã quen thuộc hơn với nó.
Trong phần tiếp theo, chúng ta sẽ nói về cách JSX cho phép bạn dễ dàng tạo giao diện người dùng, sau đó chúng ta sẽ xem xét những điểm khác biệt với “HTML thông thường” mà bạn cần biết.
Sử dụng JSX để tạo giao diện người dùng
Như đã giới thiệu trong phần trước, một trong những lợi ích chính của JSX là nó giúp bạn xây dựng một giao diện người dùng rất dễ dàng.
Đặc biệt, trong một thành phần React, bạn có thể nhập các thành phần React khác, và bạn có thể nhúng chúng và hiển thị chúng.
Một thành phần React thường được tạo trong tệp của chính nó, vì đó là cách chúng ta có thể dễ dàng sử dụng lại nó (bằng cách nhập nó) trong các thành phần khác.
Nhưng một thành phần React cũng có thể được tạo trong cùng một tệp của thành phần khác, nếu bạn định chỉ sử dụng nó trong thành phần đó. Không có “quy tắc” nào ở đây, bạn có thể làm những gì bạn cảm thấy tốt nhất.
Tôi thường sử dụng các tệp riêng biệt khi số lượng dòng trong tệp tăng quá nhiều.
Để giữ cho mọi thứ đơn giản, hãy tạo một thành phần trong cùng một App.js
tệp.
Chúng tôi sẽ tạo một WelcomeMessage
thành phần:
function WelcomeMessage() {
return <p>Welcome!</p>
}
Xem? Đó là một hàm đơn giản trả về một dòng JSX đại diện cho một p
phần tử HTML.
Chúng tôi sẽ thêm nó vào App.js
tệp.
Bây giờ bên trong App
thành phần JSX, chúng ta có thể thêm <WelcomeMessage />
để hiển thị thành phần này trong giao diện người dùng:
import React from 'react'
import logo from './logo.svg'
import './App.css'
function WelcomeMessage() {
return <p>Welcome!</p>
}
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<WelcomeMessage />
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
)
}
export default App
Và đây là kết quả. Bạn có thể thấy thông báo “Chào mừng!” tin nhắn trên màn hình?
