Tiếp tục series về ReactJS, trong bài này mình sẽ giới thiệu JSX trong ReactJS. Đây là một trong những đặc điểm nổi bật của ReactJS mà trong bài giới thiệu ReactJS mình đã trình bày.

Nếu bạn chưa biết cách cài đặt môi trường lập trình React thì có thể xem lại bài trước tại đây.

OK chúng ta cùng bắt đầu nhé.

Contents

JSX là gì?

Như đã trình bày ở bài ReactJS là gì, thì JSX (JavaScript XML) là cú pháp để bạn có thể viết code gần giống html, và sau đó React sẽ biên dịch ra code Javascript.

Ví dụ bạn viết đoạn sau bằng JSX

<div class="title">Welcome to VoManhKien.com</div>

Và React sẽ compile ra code Javascript như sau

React.createElement(
  "div",
  {className: "title"},
  "Welcome to VoManhKien.com"
};

Sử dụng JSX thế nào?

Vậy nếu bạn không muốn sử dụng JSX thì có được không, câu trả lời là hoàn toàn được. JSX cũng chỉ là trình biên tập sau khi viết thì nó sẽ chuyển thành code Javascript bạn có thể dùng React.createElement() để viết.

Còn bây giờ chúng ta sẽ xem cú pháp JSX như thế nào.

Sử dụng JSX Trong React Element

Bạn có thể khai báo một biến như sau:

const element = <img src="https://static.vomanhkien.com/logo.png" />;

Sau đó React sẽ compile ra Javascript tương tự như:

React.createElement(
  "img",
  {src: "http://static.vomanhkien.com/logo.png"}
};

Với JSX bạn có thể thoải mái viết mã giống như html mà không phải lo gì cả, nhìn rất trực quan.

Dùng JSX Trong React Component

Nếu bạn muốn tạo mới một class thì sao

var Welcome = React.createClass({
  render: function () {
    return <h1>Hello My Friend</h1>;
  }
});

Nếu bạn sử dụng ES6 thì cú pháp nhìn còn thân thiện hơn rất nhiều

import React from 'react';

class Welcome extends React.Component {
  render() {
    return <h1>Hello My Friend</h1>;
  }
}

Nhưng nếu mình muốn tái sử dụng class Welcome đó thì phải làm sao?

Rất đơn giản bạn chỉ cần tuân tạo mới một class vào import nó vào và sử dụng thôi

import React from 'react';
import Welcome from '...';

class Welcome extends React.Component {
  render() {
    return <div><Welcome /></div>;
  }
}

Bạn hoàn toàn có thể gọi đến một React Component bên trong bằng cách sử dụng “.”

Nếu bạn muốn thì có thể viết thế này MyComponents.DatePicker

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" />;
    }

Điều này giúp bạn có thể gom những phần code dùng chung và tái sử dụng nó một cách triệt để hơn.

Props trong JSX

Như ở ví dụ trên bạn đã thấy mình có truyền vào một biết color="blue" cái này có tác dụng truyền một giá trị color bằng blue cho function DatePicker

Bạn có thể truyền bất kỳ giá trị nào cũng được, từ string, integer, function, …

Đối với function, component nhận giá trị thì bạn sẽ đặt một biến để có thể lấy giá trị đó ra dùng.

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

Chúng ta sẽ đi sâu vào phần này trong những bài sau.

Children trong JSX

Mỗi câu lệnh JSX chứa 2 cặp thẻ tag giống html, nếu bạn muốn cho vào bên trong một thẻ JSX thì có thể khai báo như sau:

<MyComponents>
  <div>Hello World</div>
</MyComponents>

Bạn cũng có thể cho một thể JSX vào bên trong một thể JSX khác như:

<MyComponents>
  <MyChildren>Show someone</MyChildren>
</MyComponents>

Ngoài ra thì bạn cũng có thể sử dụng câu điều kiện để kết hợp với JSX như:

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

Cho đến bây giờ thì các trình duyệt vẫn chưa hỗ trợ cú pháp JSX vậy nên bạn bắt buộc phải sử dụng một trình biên tập từ JSX sang Javascript như Babel.

Kết luận

Như vậy trong bài viết này mình đã giới thiệu đến bạn về JSX trong ReactJS. Trong những bài sau chúng ta sẽ tiếp tục tìm hiểu về những phần khác của ReactJS.

Hẹn gặp bạn trong những bài tiếp theo.

Tham khảo: https://reactjs.org/docs/jsx-in-depth.html