React  là một thư viện develop UI của Facebook để tạo ra các components tương tác và ổn định đáng tin cậy. React  được phát triển và sử dụng bởi Facebook nên bạn có thể yên tâm về chất lượng cũng như sự phát triển  , đơn cử như Instagram.com được viết hoàn toàn bằng React

Một trong những điểm đặc biệt là React  không chỉ trình diễn ở phía client mà còn có thể render phía server và nó có thể hoạt động cùng với nhau

React  còn dùng 1 thứ gọi là Virtual DOM có khả năng render cây con của 1 node dựa còn sự thay đổi trạng thái. Tạo 1 khả năng tuyệt vời để component của bạn được cập nhập tức thời

Bài giới thiệu chi tiết React bạn có thể tham khảo tại đây để có cái nhìn tổng quan hơn

 

 

Cách thức hoạt động của Virtual DOM

Tưởng tượng rằng bạn có 1 vật thể giống hình mẫu 1 người, có chứa tất cả các thuộc tính liên quan mà 1 người có thể có và trạng thái hiện tại của người đó. Đây căn bản là thứ React làm với DOM

Giờ hãy nghĩ là bạn lấy vật mẫu đó và làm 1 vài thay đổi. Thêm vào 1 chút râu , chỉnh lại đôi mắt …. Trong react khi chúng ta thay đổi hai thứ sẽ thi hành. Đầu tiên Reach chạy diffing để xác định những thay đổi. Tiếp theo là đối chiếu với vị trí cần thay đổi với sự thay đổi.

Cách React hoạt động là không phải tái tạo lại 1 người mới từ đầu như ta thường thấy lâu nay là node sẽ bị hủy để thêm vào node mới,  nó sẽ chỉ thêm vào thay đổi. điều đó có nghĩa là nếu bạn có text trong 1 input và khi phải render lại miễn là input node không thay đổi text ở trong vẫn sẽ không bị mất đi.

Và vì React sử dụng DOM ảo và không phải là DOM thật nó mở ra cho ta rất nhiều khả năng hoạt động. Chúng ta có thể render DOM giả đó trên server và  chúng ta có một server side React view

Bắt Đầu 

Để bắt đầu với React đơn giản bạn chỉ cần download bộ kit

React Starter Kit

Hoặc có thể thử online tại

React JSFiddle

Cài đặt

Đề cài đặt bạn sẽ include react.js và JSXTranfomer.js, và viết component với type là text/jsx:

 

 

<!DOCTYPE html>
<html>
  <head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="mount-point"></div>
    <script type="text/jsx">
      // React Code Goes Here
    </script>
  </body>
</html>

 

 

 

Trong React component chứa trong element, vì thế trong ví dụ chúng ta có thể dùng div mount-point như là lớp cha

Căn bản

Chúng ta hãy bắt đầu với một component React đơn giản :

<script type="text/jsx">
    /** @jsx React.DOM */
    React.renderComponent(
        <h1>Hello, world!</h1>,
        document.getElementById('myDiv')
    );
</script>

 

Nếu bạn chưa nhìn thấy cú pháp này bao giờ bạn sẽ thắc mắc không biết đây là ngôn ngữ gì

JSX

Nó được gọi là JSX, và nó là 1 dạng chuyển đổi của Javascript XML. Nó cho phép bạn viết thẻ HTML-ish trong  javascript. Tôi gọi là HTML-ish vì nó không hoàn toàn là HTML có một số thuộc tính bạn phải dùng cú pháp tương đương.

Ví dụ như thuộc tính class ta dùng là className và for thì ta dùng là htmlFor trong JSX vì nó trùng với từ khóa của Javascript. Chi tiếp hơn bạn tham khảo tại đây

Nếu bạn không muốn dùng JSX đâu là cú pháp nếu không chuyển đổi

/** @jsx React.DOM */

React.renderComponent(

  React.DOM.h1(null, 'Hello, world!'),

  document.getElementById('myDiv')

);

 

 

 

Bạn có thể đọc nhiều hơn tại đây

Trong đọc code đầu tiên bạn có để ý đến dòng /** @jsx React.DOM */ 

Tại đầu của đoạn code. Đó là dòng quan trọng, nó nói với React rằng chúng ta đang dùng JSX và đoạn code đó cần chuyển đổi. Vì thế chúng ta cần viết dòng đó nếu dùng cú pháp JSX

Components

Khi sử dụng phương thức renderComponent ở trên tham số đầu tiên là component ta muốn render, và tham số thứ 2 là vị trí DOM node muốn chèn vào. Chúng ta có thể dùng createClass  để tạo

1 lớp component tùy ý. Hãy xem đọc code sau

var MyComponent = React.createClass({

    render: function(){

        return (

            <h1>Hello, world!</h1>

        );

    }

});

 

 

 

Sau khi tạo class chúng ta có thể render như sau

React.renderComponent(

    <MyComponent/>,

    document.getElementById('myDiv')

);

 

 

 

Props

Khi chúng ta dùng component tự tạo , chúng ta có thể thêm vào các thuộc tính được gọi là prop. Những thuộc tính này tồn tại trong component với cú pháp this.props và có thể dùng phương thức rendder dữ liệu động

var MyComponent = React.createClass({

    render: function(){
        return (
            <h1>Hello, {this.props.name}!</h1>
        );
    }
});

React.renderComponent(<MyComponent name="Handsome" />, document.getElementById('myDiv'));

 

 

 

Đặc trưng, vòng đời và trạng thái

Phương thức rendder  là yêu cầu  duy nhất cho component, nhưng vẫn còn một vài phương thức vòng đời và đặc trưng có thể hữu dụng cho chúng ta sáng tạo

Lifecycle Methods

  • componentWillMount – Invoked once, on both client & server before rendering occurs.
  • componentDidMount – Invoked once, only on the client, after rendering occurs.
  • shouldComponentUpdate – Return value determines whether component should update.
  • componentWillUnmount – Invoked prior to unmounting component.

Specs

  • getInitialState – Return value is the initial value for state.
  • getDefaultProps – Sets fallback props values if props aren’t supplied.
  • mixins – An array of objects, used to extend the current component’s functionality.

Vẫn còn nhiều thứ khác bạn có thể tìm thấy tại đây đây.

Trạng thái (state)

Tất cả component đều có một state object và một props object. Trạng thái (state) được nhận bởi phương thức setState. Gọi setState sẽ kích hoạt UI cập nhập tương tác. Nếu chúng ta muốn tạo trạng thái trước bất kì 1 tương tác nào chúng ta dùng phương thức getInitialState. Hãy xem đoạn code dưới đây để tạo cho chúng ta component state

 

var MyComponent = React.createClass({

    getInitialState: function(){
        return {
            count: 5
        }
    },

    render: function(){
        return (
            <h1>{this.state.count}</h1>
        )
    }
});

 

Sự Kiện

 

React cũng có một hệ thống sự kiện đa trình duyệt. Sự kiện được đính kèm như thuộc tính của component và có thể kích hoạt phương thức. Hãy thử tạo một bộ đếm sử dụng sự kiện

 

/** @jsx React.DOM */

var Counter = React.createClass({

  incrementCount: function(){

    this.setState({
      count: this.state.count + 1
    });
  },

  getInitialState: function(){
     return {
       count: 0
     }
  },

  render: function(){

    return (
      <div class="my-component">
        <h1>Count: {this.state.count}</h1>
        <button type="button" onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
});

React.renderComponent(<Counter/>, document.getElementById('mount-point'));

 

 

 

Dòng chảy dữ liệu đa hướng

Trong React dòng chảy của dữ liệu đa hướng dựa vào state và props. Có nghĩa là trong trường hợp nhiều component phân cấp, một component cha nên quản lí các state và truyền xuống chuỗi bên dưới thông qua props.

State của bạn nên được cập nhập bằng phương thức setState để chắc rằng UI được làm mới. Giá trị cuối cùng nên được truyền xuống component con bằng thuộc tính được truy cập bằng this.props

Hãy xem ví dụ sau :

 

/** @jsx React.DOM */

var FilteredList = React.createClass({

  filterList: function(event){

    var updatedList = this.state.initialItems;

    updatedList = updatedList.filter(function(item){
      return item.toLowerCase().search(
        event.target.value.toLowerCase()) !== -1;
    });

    this.setState({items: updatedList});

  },

  getInitialState: function(){
     return {
       initialItems: [
         "Apples",
         "Broccoli",
         "Chicken",
         "Duck",
         "Eggs",
         "Fish",
         "Granola",
         "Hash Browns"
       ],

       items: []
     }

  },

  componentWillMount: function(){

    this.setState({items: this.state.initialItems})

  },

  render: function(){

    return (
      <div className="filter-list">
        <input type="text" placeholder="Search" onChange={this.filterList}/>
      <List items={this.state.items}/>
     </div>
    );
  }
});

var List = React.createClass({

  render: function(){

    return (
      <ul>
      {
        this.props.items.map(function(item) {
          return <li key={item}>{item}</li>
        })
       }
      </ul>
    ) 
  }
});

React.renderComponent(<FilteredList/>, document.getElementById('mount-point'));

 

 

 

 

Kết

Qua bài viết tôi hi vọng đã cho các bạn thấy được cách sử dụng React cơ bản , hãy dành chút thời gian để xem qua React APIJSX để có thể sử dụng React tốt hơn.

Khả năng của react còn rất nhiều như tôi đã nói không chỉ ở client side mà còn cả ở server side nếu có điều kiện tôi sẽ đề cập ở bài sau


Leave a Comment

Fields with * are required.