Components

Về mặt khái niệm components giống như các function của JavaScript . Chúng có các đầu vào gọi là "props" và trả về các yếu tố phản hồi mô tả điều gì sẽ xuất hiện trên màn hình . Các component có thể tham khảo các component khác trong đầu ra của chúng .

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

Trong ví dụ ở trên ta có một component App render đến Welcome nhiều lần .

Props

Props là properties của một component . Chúng ta có thể thay đổi giá trị props của một component bằng cách truyền dữ liệu từ ngoài vào. Khi một props được truyền vào component thì giá trị của nó là không thay đổi .

  class Board extends React.Component {
  
  renderString(something) {
    return <Square value={ something }  />;
  }
  
  render() {
     <div className="board-row">
          {this.renderString("abc")}
     </div>
  }
  

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

Ở đây chúng ta truyền giá trị props của component Square bằng cách truyền dữ liệu từ component Broad

State

State biểu hiện trạng thái của component, state là private và chỉ thay đổi bên trong bản thân component đó.

class Board extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      squares: Array(9).fill(null),
      xIsNext: true
    }
    # khai báo state trong component Board , gồm squares dạng Array và xIsNext dạng boolean
  }
  renderSquare(i) {
    return <Square value={this.state.squares[i]} onClick={() => this.handleClick(i) } />;
    # Truyền giá trị state squares vào component Square thông qua props
  }
  ...
  }

Để thay đổi giá trị của state ta có thể sử dụng "this.setState()"

    this.setState({
      squares: [1,2,3],
      xIsNext: true
    })

Example

Để có thể hiểu cụ thể hơn về các thành phần trên chúng ta có thể đi vào thực hiện một ứng dụng vẽ một bàn cờ và thực hiện trò chơi "X", "O"

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
      </div>
    );
  }
}

Đầu tiên chúng ta tạo ra component Game . Sau đó gọi và render component này trong file index.js

# index.js
ReactDOM.render(<Game />, document.getElementById('root'));
registerServiceWorker();

class Board extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      squares: Array(9).fill(null),
      xIsNext: true
    }
  }

khởi tạo state với squares là Array với giá trị rỗng sử dụng để vẽ bàn cờ xIsNext : để check việc đánh các quân cờ X và O

  handleClick(i){
    const squares = this.state.squares.slice();
    squares[i] =  this.state.xIsNext ? 'X' : 'O';
    this.setState({
      squares: squares,
      xIsNext: !this.state.xIsNext
    })
  }

Hàm handleClick(i) sử dụng để bắt sự kiện onClick . Khi người dùng click vào ô trên bàn cờ sẽ kiểm tra giá trị xIsNext là true hay false, tương ứng với đánh quân X và O sau đó set lại giá trị của state .

  renderSquare(i) {
    return <Square value={this.state.squares[i]} onClick={() => this.handleClick(i) } />;
  }

  render() {
    const status = 'Next player: '+ (this.state.xIsNext ? 'X' : 'O') ;
# Vẽ bàn cờ với 9 ô
    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Square extends React.Component {
# Giá trị được truyền vào props
  render() {
    return (
      <button className="square" onClick={() => {this.props.onClick()}} >
        {this.props.value}
      </button>
    );
  }
}

Tài liệu

https://codepen.io/gaearon/pen/KmmrBy?editors=0010 https://reactjs.org/tutorial/tutorial.html#taking-turns