ReactJS dưới góc nhìn của một VueJS Developer

Tính tới thời điểm hiện tại, mình đã làm việc với VueJS được một khoảng thời gian tương đối. Tìm hiểu càng xâu về nguồn gốc của Vue thì mình biết định hướng dựa theo một thư viện JavaScript nổi tiếng khác là ReactJS nên cũng dành chút thời gian tìm hiểu thêm về ReactJS. Bài viết này sẽ nói về nhận định của một VueJS developer về ReactJS. ( Đây là ý kiến cá nhân của mình có thể đúng có thể sai, nếu sai bạn có thể comment vào dưới bài viết để chúng ta cùng thảo luận )

VueJS sử dụng HTML và một số directives để cho việc khai báo cấu trúc của mình. VueJS sử dụng nhưng file .vue.

<template>
  <p>Hello, {{ name }}!</p>
</template>

<script>
export default {
  props: ['name']
};
</script>

ReactJS sử dụng JSX, một extension của ECMAScript

export default function Greeter({ name }) {
  return <p>Hello, {name}!</p>;
}

Về tính tường tận thì mình thấy VueJS rõ ràng hơn thi tách riêng phần html và phần khải báo dữ liệu, tuy vậy càng làm ReactJS thì mình thấy cú pháp của ReactJS nhỏ gọn, tiện dụng hơn rất nhiều nên đây có thể là một điểm cộng dành cho React.

Vue sử dụng các directives như v-if, v-else và v-else-if để render dữ liệu theo một điều kiện nhất định.

<template>
  <article>
    <h1 v-if="easy">Vue là dễ!</h1>
  </article>
</template>

<script>
export default {
  props: ['easy']
};
</script>

React thì không hỗ trợ directives nên phải dùng chính JavaScript để có thể điều hướng câu lệnh điều kiện.

export default function Easy({ easy }) {
  return (
    <article>
      {easy && <h1>React là dễ!</h1>};
    </article>
  );
}

Tuy nhiên React bắt đầu rối khi bắt đầu sử dụng nhiều if-else

export default function Easy({ easy }) {
  return (
    <article>
      {awesome ? (
        <h1>React là dễ!</h1>
      ) : (
        <h1>Chả dễ tẹo nào