Đã đăng vào thg 4 26, 2017 11:55 CH 3 phút đọc

188

build with react

Bài đăng này đã không được cập nhật trong 7 năm

Giới thiệu

Bạn có thể đã nghe về một thư viện UI là React và muốn biết về nó, bài viết này sẽ trình bày và dạy bạn về React. Bài viết này giải định bạn đã biết qua về HTML, CSS và JavaScript. Một ví dụ đầu tiên về React

<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-0.14.3.js"></script>
<script src="//fb.me/react-dom-0.14.3.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="container"></div>
</body>
</html>

ReactDOM.render(
  <div>Hello!</div>,
  document.getElementById('container')
);

JSX

JSX là cú pháp mà React sử dụng, nó được ví như là XML trong JavaScript. JSC là một bước tiền sử lý mà nó thêm cú pháp XML vào JavaScript. Bạn có thể hoàn toàn sử dụng React mà không viết bằng JSX nhưng JSX khiến cho React đơn giản hơn. Cũng giống như XML, các thẻ JSX(tag) có một tên tag, các thuộc tính và con. Nếu một thuộc tính được bao bọc trong dấu nháy kép ("value") thì giá trị là một string, hoặc nếu trong cặp ngoặc nhọn {} thì đó là một lời gọi JavaScript.

JSX ví dụ

<div className="red">Children Text</div>;
<MyCounter count={3 + 5} />;

// Here, we set the "scores" attribute below to a JavaScript object.
var gameScores = {
  player1: 2,
  player2: 5
};
<DashboardUnit data-index="2">
  <h1>Scores</h1>
  <Scoreboard className="results" scores={gameScores} />
</DashboardUnit>;

Ví dụ trên sẽ trở nên phức tạp nếu không viết bằng JSX, kết quả nếu viết bằng JavaScript thuần sẽ như sau

React.createElement("div", { className: "red" }, "Children Text");
React.createElement(MyCounter, { count: 3 + 5 });

React.createElement(
  DashboardUnit,
  { "data-index": "2" },
  React.createElement("h1", null, "Scores"),
  React.createElement(Scoreboard, { className: "results", scores: gameScores })
);

className

Bạn hãy chú ý rằng React sử dụng className thay vì class truyền thống của DOM. Theo tài liệu nói rằng: Khi JSX là JavaScript, định danh như là class và for không được chấp nhận như là thuộc tính tên XML , thay vào đó React DOM sử dụng tương ứng các thuộc tính tên là className và htmlFor. Bạn có thể tìm hiểu nhiều hơn về JSX trong tài liệu chính thức JSX

Components

Components là trái tim và linh hồn của React

// Create a component named MessageComponent
var MessageComponent = React.createClass({
  render: function() {
    return (
      <div>{this.props.message}</div>
    );
  }
});

// Render an instance of MessageComponent into document.body
ReactDOM.render(
  <MessageComponent message="Hello!" />,
  document.body
);

Tạo mới một compnent class bằng câu lệnh React.createClass. Components có một yêu cầu là chúng phải thi hành render - một phương thức cho biết component sẽ render cái gì.

Props

Props là một nửa để tạo nên React components. Trong các ví dụ trước đã giới thiệu về props, thuộc tính khai báo như className là props. Khi một component được render, nó có thể truy cập đến props bằng cách sử dụng this.props. Trong ví dụ trên, component Message sử dụng this.props.mesage

render: function() {
  return (
    <div>{this.props.message}</div>
  );
}

Events

Ví dụ sau là một component sẽ render một thẻ div mà nó có sự kiện clink

var BannerAd = React.createClass({
  onBannerClick: function(evt) {
    // codez to make the moneys
  },

  render: function() {
    // Render the div with an onClick prop (value is a function)
    return <div onClick={this.onBannerClick}>Click Me!</div>;
  }
});

Như vậy, chúng ta thêm vào onXXX vào node. Chú ý rằng giá trị của prop là một phương thức. Danh sách các event được hỗ trợ có thể xem tại đây

State

Chúng ta đã sử dụng React để render một components đơn giản. Giờ chúng ta sẽ thêm state để khiến cho React component trở nên linh động. Sự khác nhau cơ bản giữa prop và state là state tương tác bên trong và bị điều khiển bởi chính component, trong khi đó props được gán từ bên ngoài bởi bất kỳ cái gì render component.

var CowClicker = React.createClass({
  getInitialState: function() {
    return {
      clicks: 0
    };
  },

  onCowClick: function(evt) {
    this.setState({
      clicks: this.state.clicks + 1
    });
  },

  render: function() {
    return (
      <div>
        <div>Clicks: {this.state.clicks}</div>
        <img
          src="http://s3.bypaulshen.com/buildwithreact/cow.png"
          onClick={this.onCowClick}
          className="cow"
        />
        <p>Click the cow</p>
      </div>
    );
  }
});

ReactDOM.render(
  <CowClicker />,
  document.getElementById('container')
);

API

Phương thức getInitialState, sẽ trả về giá trị khởi tạo của state, đây là một object map keys và values

getInitialState: function() {
  return {
    clicks: 0
  };
}

Để truy cập tới component state, sử dụng this.state giống như this.props Để cập nhập một component state, gọi this.setState với một object map các key để cập nhập, các key mà không được cung cấp sẽ không bị ảnh hưởng thay đổi

this.setState({
  // Notice how we access the current state here
  clicks: this.state.clicks + 1
})

Khi một component state thay đổi, render sẽ được gọi lại với state mới và UI sẽ update trạng thái mới. Đây mới chính là trái tim của React. Chúng ta sẽ đi sâu trong bài viết sau Vậy với các ví dụ đơn giản, chúng ta có cái nhìn về JSX(cú pháp để viết React), Component, Props, Event và State. Đây là các khái niệm cơ bản của React và đã có thể xây dựng một ứng dụng React đơn giản

References