Reactjs - Bài 3 - JSX là gì

GOAL

Giới thiệu về JSX.

JSX là gì

JSX = Javascript + XML.

Thử một ví dụ JSX đơn giản

Hãy quay trở lại ví dụ trong bài giới thiệu ‘Hello World’, phần 1. 
    <script>
      var helloEl = React.createElement('div', { className: 'hello' }, 'Hello, world!');
      React.render(
          helloEl,
          document.body
      );
    </script>
Bây giờ ta thử viết lại theo syntax JSX
    <script type="text/jsx">
      var helloEl = <div className: "hello">Hello, world!</div>;
      React.render(
          helloEl,
          document.body
      );
    </script>
Bây giờ bạn thử chạy source code sau:
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
  <title>Basic Example Hello world</title>
</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 helloEl = <div className="hello">Hello, World!</div>
    React.render(
        helloEl,
        document.body
    );
  </script>
</body>
</html>
Có phải là nó cũng hiển thị ra trang HTML giống như ví dụ trước không? Đó là nhờ vào 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.
//Input (JSX)
var helloEl = <div className: "hello">Hello, world!</div>;

//Output (JS)
var helloEl = React.createElement('div', { className: 'hello' }, 'Hello, world!');

HTML Tags vs. React Components

React có thể render HTML tags (dạng string) hay React components.
Để render một HTML tag, chỉ cần sử dụng tên bằng chữ viết thường trong JSX.
ở trên là một ví dụ.
Để render một React Component, chỉ cần tạo một biến local bắt đầu bằng chữ cái viết Hoa.
Ví dụ:
var Nav;

// Input (JSX)
var app = <Nav color="blue" />;

// Output (JS)
var app = React.createElement(Nav, {color:"blue"});
JSX cũng cho phép chỉ định children sử dụng XML syntax:
var Nav, Profile;
// Input (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;

// Output (JS):
var app = React.createElement(
  Nav,
  {color:"blue"},
  React.createElement(Profile, null, "click")
);
Về JSX còn có những phần thú vị khác như Namespaced Components, JavaScript Expressions v.v.. tại link bên dưới:
https://facebook.github.io/react/docs/jsx-in-depth.html
Một số link tham khảo khác:
JSX Compiler
https://facebook.github.io/react/jsx-compiler.html

Hello again

Quay trở lại ví dụ Hello world trong phần 2, chúng ta thử thay đổi code theo JSX syntax 
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
  <title>Basic Example Hello world</title>
</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 HelloComponent = React.createClass({
      render: function() {
        return <div className="hello">Hello, {this.props.name}</div>
      }
    })
    var helloEl = <HelloComponent name=' Phúng' />;

    React.render(
        helloEl,
        document.body
    );

  </script>
</body>
</html>
  • Lưu ý: như phần trên đã nêu, để render một React Component, thì tên Component đó phải bắt đầu bằng ký tự in hoa. Do đó ở đây helloComponent trở thành HelloComponent

JSX and ES6

Nhờ vào JSX Transform mà chúng ta có một vài features trong ES6 như Arrow function và Concise methods
  1. Arrow function: đặt biệt hữu ích khi kết hợp với map và filter methods (Chúng ta sẽ có dịp trải nghiệm trong các bài viết sau)
  2. 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>
  }
Nhãn: