Jsx và event trong reactjs

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

alt

1. Jsx là gì?

JSX = Javascript + XML
Nó là phần mở rộng của javascript nhưng có cú pháp viết như xml
Ví dụ:
Trước hết ta lấy ví dụ với createElement thông thường

 var createWithElement = React.createElement('div', { className: 'create-element' }, 'TEST CREATE ELEMENT');
 React.render(createWithElement,document.body);

Giải thích: Ở ví dụ trên 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 source code

Bây giờ ta sẽ viết lại theo syntax JSX:

 <html>
    <head>
      <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
    </head>
    <body>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
      <script type="text/jsx">
        var createWithElement = <div className="create-element">TEST CREATE ELEMENT</div>
        React.render(createWithElement, document.body
        );
      </script>
    </body>
    </html>

//Input (JSX)
    var createWithElement = <div className="create-element">TEST CREATE ELEMENT</div>;
    //Output (JS)
    var createWithElement = React.createElement('div', { className: 'create-element' }, 'TEST CREATE ELEMENT');

Giải thích: Sau khi chạy ví dụ trên ta thấy nó hiển thị nội dung như nhau. Đó là do React JSX. React JSX sẽ transform XML-like syntax thành Javascript. Các XML elements, attributes và children được chuyển đổi thành các đối số truyền vào React.createElement.

JSX không phải một ngôn ngữ template, JSX chỉ đơn giản là một cú pháp thay thế JavaScript, mặc dù cú pháp đó là đặc trưng của React
Nếu tham số đầu tiên là một chuỗi ánh xạ của một thẻ HTML nào đó thì sử dụng component class như là thẻ HTML đó.
Nếu tag name không phải là một HTML element, cứ coi như nó là một biến cục bộ có tên trỏ vào một component class tùy chọn.
Các thuộc tính được convert thành một đối tượng và được truyền vào như tham số thứ hai.
Các thành phần con được truyền vào như các tham số còn lại.
Ta có 1 đoạn code thuần theo cấu trúc reactjs như sau:

var reactEl = React.createElement("div",
{
    id: "test-first",
    className: "container"
  },
  "Nguyen Van Dung"
);

ra console trình duyệt kiểm tra để thấy được các thành phần của react

reactEl.type    // "div"
reactEl.props // Object {id: "test-first", className: "container", children: "Nguyen Van Dung"}

Ví dụ trên nó có thể được convert thành Jsx như sau:

 <div id="test-first" className="container">
    Nguyen Van Dung
</div>

hoặc

React.createClass({
  render() {
    return (
      <div id="test-first" class="container">{this.props.name}</div>
    );
  };
});

JSX chỉ convert các đánh dấu XML thành code JavaScript. Nó tương tự như là ta đang gõ code Javascript vậy, vì vậy ta có thể sử dụng sức mạnh của JavaScript như các biểu thức, cấu trúc hàm, hay bất kỳ các tính năng nào khác trong views của mình. Chúng ta không cần viết các helpers mà chỉ cần sử dụng Javascript
Ví dụ

var names = ['Viet Nam', 'Japan', 'Philipin'];
React.render(
    <div>
{
    names.map(function (name) {
        return <div>Framgia, {name}!</div>
    })
}
    </div>,
    document.body
);

Dấu ngoặc {} cho phép chúng ta sử dụng Javascript thuần. Chú ý là bên trong map function, chúng ta trả về một markup là một thẻ div, bên trong markup đó chúng ta lại có một biểu thức Javascipt. Đây chính là Jsx

Nhờ vào JSX Transform mà chúng ta có một vài features trong ES6 như Arrow function và Concise methods
Arrow function: đặt biệt hữu ích khi kết hợp với map và filter methods
Concise methods: chúng ta sẽ không còn cần cách viết : function trong object nữa. Do đó, chúng ta có thể:
- Viết theo cách cũ

     render: function() {
    return <div className="hello">Hello, {this.props.name}</div>
  }

 -  Viết theo cách mới

     render() {
    return <div className="hello">Hello, {this.props.name}</div>
  }

###2. Event trong Reactjs
- Giống như việc Reactjs wrap DOM thành các VirtualDOM thì Reactjs cũng wrap DOM event thành các SyntheticEvent dùng chung cho các Browsers
- Danh sách các SyntheticEvent trong reactjs
```Javascript

1. boolean bubbles
2. boolean cancelable
3. DOMEventTarget currentTarget
4. boolean defaultPrevented
5. number eventPhase
6. boolean isTrusted
7. DOMEvent nativeEvent
8. void preventDefault()
9. boolean isDefaultPrevented()
10. void stopPropagation()
11. boolean isPropagationStopped()
12. DOMEventTarget target
13. number timeStamp
14. string type

Chúng ta có thể sử dụng các event preventDefault, stopPropagation. Từ Reactjs v0.12 thì không dùng cách return false ở event handler để stop event propagation. Thay vào đó ta dùng e.stopPropagation() hoặc e.preventDefault() để thực hiện

Event handler:
ví dụ:


 var Image = React.createClass({
 getInitialState() {
    return {
      src: 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'
    };
  },
  onClick() {
    this.setState({src: 'https://www.imotors.com/Images/Default/small_car.jpg'});
  },
  render() {
    return (
      <div>
        <img  src={this.state.src} />
        <button onClick={this.onClick}>Change Image!</button>
      </div>
    );
  }
});
React.render(<Image />, document.body);

onClick={this.onClick} : bind event click với event handler là onClick. Bên trong onClick, Reactjs bind this với Component instance cho nên chúng ta không cần phải ‘bind’ this vào event handler như kiểu: onClick(e) {...}.bind(this). </br> source code

Not provided event
Đối với các event mà Reactjs hỗ trợ thì sử dụng bình thường, đối với event resize của window hay như các event riêng của jQuery plugin thì chúng ta:
- Sử dụng addEventListener trong method componentDidMount() để đăng ký event.
- Và dùng removeEventListener trong method componentWillUnmount để remove event.
Ngoài các SyntheticEvent, reactjs còn có rất nhiều các event khác như trong jquery như: Event pooling, Supported Events, Clipboard Event(onCopy onCut onPaste), Focus Events(onFocus onBlur) ...

###3. Tài liệu tham khảo https://facebook.github.io/react/docs/jsx-in-depth.html https://facebook.github.io/react/docs/events.html

JavaScript

1. Jsx là gì?

Mục lục