Reactjs - Bài 2 - Helloworld - phần 2 - React Component

Dẫn nhập

Trong phần 1, chúng ta đã dùng React.creatElement để tạo ReactElement và dùng React.render để render ReactElement và gắn vào Real DOM để hiển thị lên trang web. Trong phần 2 này, tôi muốn giới thiệu về ReactComponent.
Cũng cần nói thêm ReactElement thuộc thành phần cơ bản nhất của React. Nó có 4 properties: type, props, key và ref. Nó không có methods và prototype cũng không có gì cả.
Với ReactElement cũng đủ cho bạn render một View, nhưng chúng ta sẽ không tận dung hết lợi điểm của React. Với ReactComponent, chúng ta có thể tạo một sự bao đóng với embeded state (trạng thái được nhúng).
Ví dụ, trong ví dụ ở phần 1, chúng ta render ra được nội dung ‘Hello, world’ nhưng nếu chúng ta muốn thay đổi ‘Hello, world’ thành ‘Hello, Phung’ thì sẽ không được, trừ khi chúng ta sửa lại code, thay từ ‘world’ thành từ ‘Phung’. Như vậy chúng ta chỉ có được một ‘Static UI’.
Trong khi đó nếu dùng ReactComponent thì chúng ta có thể thay đổi ‘world’ thành ‘Phung’ thông qua embeded state trong ReactComponent, do đó chúng ta có thể tương tác và có được một ‘Dynamic UI’. Trước mắt hãy xem state như là một đối số giúp ta có thể tương tác với UI.

Get your hand dirty

Từ ví dụ ở phần 1, chúng ta thử đưa lần lần ReactComponent vào.
Source code mẫu:
https://slack-files.com/T035VUSF2-F0559AYFY-60efc6e91b
Hãy xem helloComponent ở ví dụ trên 
   var helloComponent = React.createClass({
      render: function() {
        return React.createElement('div', {className: 'hello'}, 'Hello, Phúng');
      }
    });
Format của nó như sau
var MyComponent = React.createClass({
    render: function() {
       ...
      }
    });
Khi tạo một Component Class bởi React.createClass(), ta sẽ cung cấp cho nó một object ( phần { … } ) cụ thể có chứa render method và những methods khác.
Như bạn thấy ở trên, React Component Class ở trên giống như là một Function mang theo props và state (sẽ trình bày sau), và render HTML.
Tiếp theo là helloEl được tạo từ React Component Class 
var helloEl = React.createElement(helloComponent);
Phần gắn helloEl vào document.body thì giống như đã trình bày trong phần 1.
Với những giải thích ở trên hy vọng các bạn đã có một khái niệm sơ bộ về React Component. Tiếp theo ta đưa tên ‘Phúng’ ra khỏi helloComponent và thay vào đó là đối số this.props.name sẽ được truyền vào.
Source code:
https://slack-files.com/T035VUSF2-F055Y3SUF-8b903b5e26
Trong phần này có thêm một khái niệm mới là props. props sẽ được giới thiệu chi tiết hơn trong bài viết sau, còn trong giới hạn của bài viết này tôi muốn bạn xem props như là một “model” data trong React và Component sẽ lấy data từ props và render nó.
Nhãn: