Một số feature ES6 thường dùng với Reactjs

Phiên bản mới nhất của Javascripts, ES2015 (ES6), ES2016 (ES7), và ES2017 có nhiều feature có thể được sử dụng thông qua Babel. Sau đây là một vài feature thường được dùng khi phát triển các dự án Reactjs.

Arrow function cung cấp một cách viết ngắn, gọn hơn để khai báo các function. Khi ta không dùng dấu ngoặc nhọn, ouput của function là giá trị được trả về. Sau đây là một stateless React component được định nghĩa bằng arrow function

const App = () => (
  <div>
    <PageBehindModals />
    <ChainedModals modalList={[ModalName, ModalPhone]} />
  </div>
);

tương đương với cách viết sau

function App() {
  return (
    <div>
      <PageBehindModals />
      <ChainedModals modalList={[ModalName, ModalPhone]} />
    </div>
  );
}

Destructing sẽ gán các property của một object cho các biến có cùng tên. Sau đây là một ví dụ destructing object this.props và this.state

class ChainedModals extends Component {
  render() {
    const { modalList } = this.props;
    const { currIndex, showModal } = this.state;
    // ..
  }
}

tương đương với cách viết sau

class ChainedModals extends Component {
  render() {
    const modalList = this.props.modalList;
    const currIndex = this.state.currIndex;
    const showModal = this.state.showModal;
    // ..
  }
}

Destructing có thể áp dụng cho tham số là function.

function ModalName({ onClickNext, step }) {
  return (
    <div>
      <h1>Step {step} - Name</h1>
      <Button onClick={onClickNext}>Next</Button>
    </div>
  );
}

tương đương với cách viết sau

function ModalName(props) {
  var onClickNext = props.onClickNext;
  var step = props.step;

  return (
    <div>
      <h1>Step {step} - Name</h1>
      <Button onClick={onClickNext}>Next</Button>
    </div>
  );
}

Destructing cũng có thể áp dụng cho các nested object. Sau đây là một ví dụ:

function setIndexFromRoute(props) {
  const { modalList, location: { pathname } } = props;
  // ..
}

tương đương với cách viết sau

function setIndexFromRoute(props) {
  const modalList = props.modalList;
  const pathname = props.location.pathname;
  // ..
}

Toán tử ... (rest/spread) trong JSX thực tế là cú pháp JSX để tạo ra các props trong rest object thành các prop riêng lẻ. Ví dụ:

function ModalName({ onClick, ...rest }) {
  return (
    <Modal {...rest}>
      <Button onClick={onClick}>Next</Button>
    </Modal>
  );
}

function ModalName(props) {
  var onClick = props.onClick;
  var show = props.show;
  var backdrop = props.backdrop;

  return (
    <Modal show={show} backdrop={backdrop}>
      <Button onClick={onClick}>Next</Button>
    </Modal>
  );
}

Source: https://www.saltycrane.com/blog/2016/03/es6-features-used-react-development/