Giới thiệu ngắn gọn về các thành phần React
Một thành phần là một phần riêng biệt của giao diện. Ví dụ: trong một trang chủ blog điển hình, bạn có thể tìm thấy thành phần Thanh bên và thành phần Danh sách bài đăng trên blog. Lần lượt chúng được cấu tạo bởi các thành phần, vì vậy bạn có thể có một danh sách các thành phần của bài đăng trên Blog, mỗi thành phần cho mỗi bài đăng trên blog và mỗi thành phần có các thuộc tính đặc biệt của riêng nó.
React làm cho nó rất đơn giản: mọi thứ đều là một thành phần.
Ngay cả các thẻ HTML thuần túy cũng là thành phần của riêng chúng và chúng được thêm vào theo mặc định.
2 dòng tiếp theo tương đương thì cũng làm tương tự. Một vớiJSX, một mà không, bằng cách tiêm<h1>Hello World!</h1>
thành một phần tử có idapp
.
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<h1>Hello World!</h1>, document.getElementById(‘app’))
ReactDOM.render(
React.createElement(‘h1’, null, ‘Hello World!’),
document.getElementById(‘app’)
)
Xem,React.createElement
đã cho chúng tôi biết một API để tạoh1
thành phần. Thay đổi tham số đầu tiên của phương thức đó cho phép bạn tạo các thẻ khác nhau. Tham số thứ hai là một đối tượng của đạo cụ, trong trường hợp này, chúng tôi không cần bất kỳ tham số nào, vì vậy chúng tôi chuyểnnull
.
Đây là cách chúng ta có thể sử dụng React để làm việc với các thành phần HTML được tích hợp sẵn, nhưng bạn sẽ nhanh chóng phát triển nhanh hơn chúng. Điều mà React vượt trội là cho phép chúng ta tạo giao diện người dùng bằng cách tạo các thành phần tùy chỉnh.
Các thành phần tùy chỉnh
Có 2 cách để xác định một thành phần trong React.
Một thành phần chức năng:
const BlogPostExcerpt = () => {
return (
<div>
<h1>Title</h1>
<p>Description</p>
</div>
)
}
Một thành phần lớp:
import React, { Component } from 'react'
class BlogPostExcerpt extends Component {
render() {
return (
<div>
<h1>Title</h1>
<p>Description</p>
</div>
)
}
}
Cho đến gần đây, các thành phần lớp là cách duy nhất để xác định một thành phần có trạng thái riêng của nó và có thể truy cập các phương thức vòng đời để bạn có thể thực hiện mọi việc khi thành phần được hiển thị, cập nhật hoặc xóa lần đầu tiên.
React Hooks đã thay đổi điều này, vì vậy các thành phần chức năng của chúng ta hiện đang mạnh hơn bao giờ hết và tôi tin rằng chúng ta sẽ thấy ngày càng ít thành phần lớp hơn trong tương lai, mặc dù nó vẫn sẽ là cách hoàn toàn hợp lệ để tạo các thành phần.
Ngoài ra còn có một cú pháp thứ ba sử dụngES5
cú pháp, không có các lớp:
import React from 'react'
React.createClass({
render() {
return (
<div>
<h1>Title</h1>
<p>Description</p>
</div>
)
}
})
Bạn sẽ hiếm khi thấy điều này trong thời hiện đại,> ES6
cơ sở mã.
Tải xuống miễn phí của tôiSổ tay React
Các hướng dẫn về phản ứng khác:
- Ví dụ về ứng dụng React đơn giản: tìm nạp thông tin người dùng GitHub qua API
- Tạo một bộ đếm đơn giản với React
- Thiết lập mã VS để phát triển React
- Cách chuyển các đạo cụ cho một thành phần con thông qua React Router
- Tạo ứng dụng với Electron và React
- Hướng dẫn: tạo Bảng tính bằng React
- Lộ trình học React
- Tìm hiểu cách sử dụng Redux
- Bắt đầu với JSX
- Các thành phần được tạo kiểu
- Giới thiệu về Redux Saga
- Giới thiệu về React Router
- Giới thiệu về React
- Các thành phần React
- DOM ảo
- Sự kiện React
- Trạng thái phản ứng
- React Props
- Phân đoạn phản ứng
- API ngữ cảnh phản ứng
- React PropTypes
- Các khái niệm phản ứng: khai báo
- React: Cách hiển thị một thành phần khác khi nhấp chuột
- Cách lặp lại bên trong React JSX
- Props so với State trong React
- Bạn nên sử dụng jQuery hay React?
- Bạn cần biết bao nhiêu JavaScript để sử dụng React?
- Giới thiệu về Gatsby
- Cách tham chiếu phần tử DOM trong React
- Luồng dữ liệu một chiều trong React
- React Các thành phần thứ tự cao hơn
- Sự kiện vòng đời phản ứng
- Khái niệm React: Tính bất biến
- Khái niệm React: Độ tinh khiết
- Giới thiệu về React Hooks
- Giới thiệu về ứng dụng tạo-phản ứng
- Khái niệm React: Thành phần
- React: Các thành phần trình bày so với vùng chứa
- Tách mã trong React
- Kết xuất phía máy chủ với React
- Cách cài đặt React
- CSS trong React
- Sử dụng SASS trong React
- Xử lý các biểu mẫu trong React
- Chế độ phản ứng nghiêm ngặt
- Cổng phản ứng
- React Render Props
- Kiểm tra các thành phần React
- Cách chuyển một tham số cho các trình xử lý sự kiện trong React
- Cách xử lý lỗi trong React
- Cách trả về nhiều phần tử trong JSX
- Kết xuất có điều kiện trong React
- React, cách chuyển đạo cụ sang các thành phần con
- Cách lấy giá trị của một phần tử đầu vào trong React
- Cách sử dụng hook useState React
- Cách sử dụng useCallback React hook
- Cách sử dụng useEffect React hook
- Cách sử dụng useMemo React hook
- Cách sử dụng hook useRef React
- Cách sử dụng hook useContext React
- Cách sử dụng useReducer React hook
- Cách kết nối ứng dụng React của bạn với một chương trình phụ trợ trên cùng một nguồn gốc
- Hướng dẫn tiếp cận bộ định tuyến
- Cách sử dụng Công cụ dành cho nhà phát triển React
- Cách học React
- Cách gỡ lỗi ứng dụng React
- Cách hiển thị HTML trong React
- Cách sửa lỗi không khớp với `` risklySetInnerHTML '' trong React
- Cách tôi khắc phục sự cố với trạng thái biểu mẫu đăng nhập React và tính năng tự động điền của Trình duyệt
- Cách định cấu hình HTTPS trong ứng dụng React trên localhost
- Cách khắc phục lỗi "không thể cập nhật một thành phần trong khi hiển thị một thành phần khác" trong React
- Tôi có thể sử dụng React hooks bên trong một điều kiện không?
- Sử dụng useState với một đối tượng: cách cập nhật
- Cách di chuyển xung quanh các khối mã với React và Tailwind
- Phản ứng, tập trung một mục trong React khi được thêm vào DOM
- Phản ứng, chỉnh sửa văn bản trên doubleclick