Giới thiệu về React

0
55

eact là gì?

React là một thư viện JavaScript khai báo, hiệu quả và linh hoạt để xây dựng giao diện người dùng. Nó cho phép bạn soạn giao diện người dùng phức tạp từ các đoạn mã nhỏ và biệt lập được gọi là “thành phần”.

React có một số loại thành phần khác nhau, nhưng chúng ta sẽ bắt đầu với các React.Componentlớp con:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list"> <h1>Shopping List for {this.props.name}</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />

Chúng ta sẽ sớm chuyển đến các thẻ giống XML vui nhộn. Chúng tôi sử dụng các thành phần để cho React biết những gì chúng tôi muốn thấy trên màn hình. Khi dữ liệu của chúng tôi thay đổi, React sẽ cập nhật và kết xuất lại các thành phần của chúng tôi một cách hiệu quả.

Ở đây, ShoppingList là một lớp thành phần React , hoặc loại thành phần React . Một thành phần nhận các tham số, được gọi props(viết tắt của “thuộc tính”) và trả về một hệ thống phân cấp các khung nhìn để hiển thị thông qua renderphương thức.

Các renderphương thức trả về một mô tả về những gì bạn muốn nhìn thấy trên màn hình. React lấy mô tả và hiển thị kết quả. Đặc biệt, rendertrả về một phần tử React , đây là một mô tả nhẹ về những gì cần hiển thị. Hầu hết các nhà phát triển React sử dụng một cú pháp đặc biệt có tên là “JSX” giúp các cấu trúc này dễ viết hơn. Các <div />cú pháp được chuyển vào xây dựng thời gian để React.createElement('div'). Ví dụ trên tương đương với:

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

Nếu bạn tò mò, createElement()sẽ được mô tả chi tiết hơn trong phần tham chiếu API , nhưng chúng tôi sẽ không sử dụng nó trong hướng dẫn này. Thay vào đó, chúng tôi sẽ tiếp tục sử dụng JSX.

JSX đi kèm với toàn bộ sức mạnh của JavaScript. Bạn có thể đặt bất kỳ biểu thức JavaScript nào trong dấu ngoặc nhọn bên trong JSX. Mỗi phần tử React là một đối tượng JavaScript mà bạn có thể lưu trữ trong một biến hoặc chuyển xung quanh trong chương trình của mình.

Thành ShoppingListphần trên chỉ hiển thị các thành phần DOM được tích hợp sẵn như <div />và <li />. Nhưng bạn cũng có thể soạn và hiển thị các thành phần React tùy chỉnh. Ví dụ, bây giờ chúng ta có thể tham khảo toàn bộ danh sách mua sắm bằng cách viết <ShoppingList />. Mỗi thành phần React được đóng gói và có thể hoạt động độc lập; điều này cho phép bạn tạo giao diện người dùng phức tạp từ các thành phần đơn giản.

Kiểm tra mã khởi động

Nếu bạn đang thực hiện hướng dẫn trong trình duyệt của mình, hãy mở mã này trong một tab mới: Mã khởi động . Nếu bạn đang thực hiện hướng dẫn cục bộ, thay vào đó hãy mở src/index.jstrong thư mục dự án của bạn (bạn đã chạm vào tệp này trong quá trình thiết lập ).

Mã khởi động này là cơ sở của những gì chúng tôi đang xây dựng. Chúng tôi đã cung cấp kiểu CSS để bạn chỉ cần tập trung vào việc học React và lập trình trò chơi tic-tac-toe.

Bằng cách kiểm tra mã, bạn sẽ nhận thấy rằng chúng tôi có ba thành phần React:

  • Quảng trường
  • Bảng
  • Trò chơi

Thành phần Square hiển thị một <button>ô vuông duy nhất và Board hiển thị 9 ô vuông. Thành phần Trò chơi hiển thị một bảng với các giá trị giữ chỗ mà chúng tôi sẽ sửa đổi sau. Hiện tại không có thành phần tương tác.

Truyền dữ liệu thông qua đạo cụ

Để chân ướt chân ráo, chúng ta hãy thử chuyển một số dữ liệu từ thành phần Board sang thành phần Square của chúng tôi.

Chúng tôi thực sự khuyên bạn nên nhập mã bằng tay khi bạn đang làm qua hướng dẫn và không sử dụng sao chép / dán. Điều này sẽ giúp bạn phát triển trí nhớ cơ bắp và hiểu biết nhiều hơn.

Trong renderSquarephương pháp của Board , hãy thay đổi mã để chuyển một chỗ dựa được gọi valueđến Square:

class Board extends React.Component {
  renderSquare(i) {
 return <Square value={i} />;  }
}

Thay đổi renderphương thức của Square để hiển thị giá trị đó bằng cách thay thế {/* TODO */}bằng {this.props.value}:

class Square extends React.Component {
  render() {
    return (
      <button className="square">
 {this.props.value} </button>
    );
  }
}

Trước:

Sau: Bạn sẽ thấy một số trong mỗi ô vuông trong kết quả hiển thị.

Tạo thành phần tương tác

Hãy điền vào thành phần Hình vuông với dấu “X” khi chúng ta nhấp vào nó. Đầu tiên, thay đổi thẻ nút được trả về từ render()chức năng của thành phần Square thành thẻ này:

class Square extends React.Component {
  render() {
    return (
 <button className="square" onClick={function() { alert('click'); }}> {this.props.value}
 </button>
    );
  }
}

Nếu bạn nhấp vào Hình vuông ngay bây giờ, bạn sẽ thấy một cảnh báo trong trình duyệt của mình.

Ghi chú

Để tiết kiệm việc nhập và tránh hành vi khó hiểu củathis , chúng tôi sẽ sử dụng cú pháp hàm mũi tên cho các trình xử lý sự kiện ở đây và xa hơn bên dưới:

class Square extends React.Component {
 render() {
   return (
 <button className="square" onClick={() => alert('click')}> {this.props.value}
 </button>
   );
 }
}

Lưu ý rằng với onClick={() => alert('click')}, chúng ta đang truyền một hàm làm chỗ dựa onClick. React sẽ chỉ gọi hàm này sau một cú nhấp chuột. Quên () =>và viết onClick={alert('click')}là một lỗi phổ biến và sẽ kích hoạt cảnh báo mỗi khi thành phần hiển thị lại.

Bước tiếp theo, chúng tôi muốn thành phần Square “nhớ” rằng nó đã được nhấp và điền vào nó bằng dấu “X”. Để “ghi nhớ” mọi thứ, các thành phần sử dụng trạng thái .

Các thành phần React có thể có trạng thái bằng cách thiết lập this.statetrong các hàm tạo của chúng. this.statenên được coi là riêng tư đối với một thành phần React mà nó được định nghĩa trong đó. Hãy lưu trữ giá trị hiện tại của Square trong đó this.statevà thay đổi nó khi Square được nhấp vào.

Đầu tiên, chúng ta sẽ thêm một phương thức khởi tạo vào lớp để khởi tạo trạng thái:

class Square extends React.Component {
 constructor(props) { super(props); this.state = { value: null, }; }
  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
 {this.props.value}
 </button>
    );
  }
}

Ghi chú

Trong các lớp JavaScript , bạn cần phải luôn gọi superkhi xác định hàm tạo của một lớp con. Tất cả các lớp thành phần React có một constructorphải bắt đầu bằng một super(props)cuộc gọi.

Bây giờ chúng ta sẽ thay đổi renderphương thức của Square để hiển thị giá trị của trạng thái hiện tại khi được nhấp vào:

  • Thay thế this.props.valuebằng this.state.valuebên trong <button>thẻ.
  • Thay thế onClick={...}trình xử lý sự kiện bằng onClick={() => this.setState({value: 'X'})}.
  • Đặt đạo cụ classNamevà onClickđạo cụ trên các dòng riêng biệt để dễ đọc hơn.

Sau những thay đổi này, <button>thẻ được trả về bởi renderphương thức của Square trông giống như sau:

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button  className="square" onClick={() => this.setState({value: 'X'})} >
 {this.state.value} </button>
    );
  }
}

Bằng cách gọi this.setStatetừ một onClicktrình xử lý trong renderphương thức của Square , chúng tôi yêu cầu React kết xuất lại Square đó bất cứ khi nào nó <button>được nhấp vào. Sau khi cập nhật, Quảng trường this.state.valuesẽ 'X'như vậy, vì vậy chúng ta sẽ thấy Xtrên bảng trò chơi. Nếu bạn nhấp vào bất kỳ Hình vuông nào, dấu Xsẽ hiển thị.

Khi bạn gọi setStatemột thành phần, React cũng tự động cập nhật các thành phần con bên trong nó.

Những công cụ phát triển

Tiện ích mở rộng React Devtools cho Chrome và Firefox cho phép bạn kiểm tra cây thành phần React bằng các công cụ dành cho nhà phát triển của trình duyệt của bạn.

React DevTools cho phép bạn kiểm tra các đạo cụ và trạng thái của các thành phần React của bạn.

Sau khi cài đặt React DevTools, bạn có thể nhấp chuột phải vào bất kỳ phần tử nào trên trang, nhấp vào “Kiểm tra” để mở các công cụ dành cho nhà phát triển và các tab React (“⚛️ Thành phần” và “⚛️ Hồ sơ”) sẽ xuất hiện dưới dạng tab cuối cùng đúng. Sử dụng “⚛️ Thành phần” để kiểm tra cây thành phần.

Tuy nhiên, lưu ý rằng có một số bước bổ sung để làm cho nó hoạt động với CodePen:

  1. Đăng nhập hoặc đăng ký và xác nhận email của bạn (bắt buộc để ngăn chặn thư rác).
  2. Nhấp vào nút “Ngã ba”.
  3. Nhấp vào “Thay đổi chế độ xem” và sau đó chọn “Chế độ gỡ lỗi”.
  4. Trong tab mới mở ra, các devtools bây giờ sẽ có một tab React.

Tham khảo khóa học: Lập trình Front end với ReactJS

LEAVE A REPLY

Please enter your comment!
Please enter your name here