Reactjs - Bài 1 - Hello world - phần 1 - React Element

Goal

Sử dụng React.createClass để tạo Hello component, link DOM của page để hiển thị.

Cơ bản

Tham khảo ví dụ sau:
https://slack-files.com/T035VUSF2-F055E3M2Z-d7d05bedb0
  • React.createElement tạo và trả về một ReactElement theo loại element mà ta đưa vào. Trong trường hợp này là một html tag ‘div’
API:
https://facebook.github.io/react/docs/top-level-api.html#react.createelement
React.createElement(
  string/ReactClass type, // là html tag string hay là ReactClass được tạo bới React.createClass
  [object props],  // property của object
  [children ...]   // children của object
)
Viết gọn hơn: React.createElement(type, props, children);
Trong ví dụ trên, React.createElement tạo một ReactElement (hay còn gọi là Virtual DOM) là một object helloEl có type là div , có props object là {className: "hello", children: "Hello, world!"}. Lưu ý là không được nhầm lẫn giữa ReactElement (Virtual DOM) và Real DOM Element.
Hãy mở Chrome chạy file ở ví dụ trên và mở Developer Tool, thử nhập
var reactEl = React.createElement('div', { className: 'hello' }, 'Hello, world!')
rồi in ra:
reactEl.type    // "div"
reactEl.props  // Object {className: "hello", children: "Hello, world!"}
  • React.render render ReactElement và gắn vào DOM container được truyền vào function React.render
API:
https://facebook.github.io/react/docs/top-level-api.html#react.render
ReactComponent render(
  ReactElement element,  // ReactElement
  DOMElement container,  // DOM cha của đối tượng được render
  [function callback]    // callback function
)
Trong ví dụ trên,
React.render sẽ render ReactElement helloEl , gắn nó vào DOM document.body và hiển thị HTML như bên dưới
<body>
  <div class="hello" data-reactid=".0">Hello, world!</div>
</body>
Hình minh họa quá trình trên
reactjs render

Nói thêm về ReactElement

React.createElement(type, props, children)
Trong đó:
  1. type : là một chuổi (HTML tag) hay là một ReactClass
  2. props : là các properties của Element ở (1)
  3. children : là “mảng” các con của Element ở (1)
Hãy thử xem hình minh họa sau:
react element
Hình minh họa trên minh họa khá rõ mối quan hệ và quá trình tạo View từ ReactElement đến HTML Element
Nhãn: