JSX trong React

I, Mở đầu

ReactJS là một thư viện JavaScript được phát triển bởi Facebook nhằm xây dựng giao diện người dùng(UI).

JSX là một phần quan trọng trong ReactJS. JSX giống như một syntax extension giúp code trở lên dễ mượt và dễ đọc hơn.

JSX = Javascript + XML. Nó transform cú pháp dạng gần như XML về thành Javascript. Giúp người lập trình có thể code ReactJS bằng cú pháp của XML thay vì sử dụng Javascript. Các XML elements, attributes và children được chuyển đổi thành các đối số truyền vào React.createElement.

II, Sử dụng JSX

1, Cú pháp để sử dụng JSX khá đơn giản:

      <JSXName JSXAttributes>
        ....
      </JSXName>

Ví dụ khi bạn khai báo một cú pháp JSX như sau:

    <MyButton color="blue" shadowSize={2}>
      Click Me
    </MyButton>

Nó sẽ được compile sang mã Javascript như sau:

    React.createElement(
      MyButton,
      {color: 'blue', shadowSize: 2},
      'Click Me'
    )

Bạn cũng có thể sử dụng một form đóng của tag nếu nó không có giá trị:

    <div className="sidebar" />

compile thành

    React.createElement(
      'div',
      {className: 'sidebar'},
      null
    )

2, React must be in scope

Nhằm ngăn cảnh báo mất React khi sử dụng JSX. Giả sử, khi sử dụng JSX

    <a />

expands to

    React.createElement("a")

Do đó, đoạn code sau sẽ raise ra warning:

    const Stateless = (props) => <div>Hello {this.props.name}</div>;

Do vậy, thư viện React nên được import vào JSX code

    import React from 'react';
    const Stateless = (props) => <div>Hello {this.props.name}</div>;

3, Using Dot Notation for JSX Type

Bạn có thể gọi đến một React component bằng việc sử dụng "." từ JSX. Điều này thật hữu ích nếu bạn có một modul React component được sử dụng ở nhiều nơi. Ví dụ, nếu MyComponents.DatePicker là một component, bạn có thể sử dụng trực tiếp nó từ JSX bằng cách:

    import React from 'react';

    const MyComponents = {
      DatePicker: function DatePicker(props) {
        return <div>Imagine a {props.color} datepicker here.</div>;
      }
    }

    function BlueDatePicker() {
      return <MyComponents.DatePicker color="blue" />;
    }

4, 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.

    var helloEl = <div className: "hello">Hello, world!</div>;

Để 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

    var Nav;
    // Input (JSX)
    var app = <Nav color="blue" />;
    // Output (JS)
    var app = React.createElement(Nav, {color:"blue"});

5, Props in JSX

Bạn có thể truyền vào bất kì một cú pháp JS như là một prop bằng việc đặt chúng trong cặp dấu {} trong JSX:

    <MyComponent foo={1 + 2 + 3 + 4} />

Ở MyComponent ở trên thì giá trị của props.foo sẽ là 10. Câu lệnh if và vòng lặp for không phải là một expression của Javascript nên chúng không được sử dụng trực tiếp trong JSX. Thay vào đó, chúng ta có thể:

    function NumberDescriber(props) {
      let description;
      if (props.number % 2 == 0) {
        description = <strong>even</strong>;
      } else {
        description = <i>odd</i>;
      }
      return <div>{props.number} is an {description} number</div>;

6, String Literals

Bạn có thể truyền một string vào props. Hai cách viết sau là tương đương:

    <MyComponent message="hello world" />
    <MyComponent message={'hello world'} />

Khi bạn truyền vào kiểu String, giá trị của nó là kiểu HTML-unescaped. Vì vậy 2 cách viết sau là hoàn toàn tương đương:

    <MyComponent message="<3" />
    <MyComponent message={'<3'} />

7, Props Default to "True"

Nếu bạn không truyền giá trị cho props, nó mặc định là true. Hai cách viết sau là tương đương:

    <MyTextBox autocomplete />
    <MyTextBox autocomplete={true} />

8, Spread Attributes

Nếu bạn đã có một props là một object và muốn truyền nó vào trong JSX, bạn có thể sử dụng "..." như là một operator để truyền toàn độ đối tượng props. Hai cách viết sau là tương đương:

    function App1() {
      return <Greeting firstName="Ben" lastName="Hector" />;
    }

    function App2() {
      const props = {firstName: 'Ben', lastName: 'Hector'};
      return <Greeting {...props} />;
    }

9, Children in JSX

Mỗi câu lệnh JSX chứa cả 2 tag mở và đóng, nội dung nằm giữa 2 tag này được truyền như là một prop đặc biệt: props.children. Có vài cách để truyền children:

• Bạn có thể đặt một string giữa tag mở và đóng và props.children sẽ là một string. Cái này hữu ích trong việc xây dựng các HTML elements:

    <MyComponent>Hello world!</MyComponent>

• JSX loại bỏ khoảng trắng ở điểm bắt đầu và kết thúc của một dòng, nó cũng loại bỏ dòng trống. Vì vậy tất cả các render sau là tương đương:

    <div>Hello World</div>

    <div>
      Hello World
    </div>

    <div>
      Hello
      World
    </div>

    <div>

      Hello World
    </div>

• Bạn có thể khai báo một JSX elements như là một children. Điều này hữu ích trong việc hiển thị một nhóm các components:

    <MyContainer>
      <MyFirstComponent />
      <MySecondComponent />
    </MyContainer>

• Bạn có thể kết hợp nhiều cách khai báo children, vì vậy bạn có thể sử dụng một string cùng với JSX children. Ví dụ dưới đây kết hợp làm cho code vaild ở cả 2 dạng là JSX và HTML:

    <div>
      Here is a list:
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>

Một React component không thể return được nhiều React elements nhưng một JSX có thể có nhiều children, vì vậy nếu bạn muốn render nhiều thứ, bạn có thể gom chúng vào trong một thẻ div như trên

• Sử dụng câu lệnh điều kiện trong render React elements. Dòng JSX chỉ renders một <Header /> neu showHeader la true:

    <div>
      {showHeader && <Header />}
      <Content />
    </div>

III, Lời kết

Trên đây là những kiến thức cơ bản về JSX. Việc sử dụng JSX trong React thật sự tiện lợi và dễ đọc hơn rất nhiều. Thanks for read!