JSX

JSX (viết tắt của cụm từ JavaScript XML) là một loại cú pháp mở rộng dành cho ngôn ngữ JavaScript viết theo kiểu XML

1. Giới thiệu về JSX

Trong file App.js có đoạn code html nhưng nó không phải là HTML mà là JSX

Đây là một cú pháp mở rộng của JavaScript được viết theo XML.

2. React hoạt động dựa vào Babel

Babel là một javaScript compiler dùng để chuyển JSX thành HTML.

Chúng ta có thể sử dụng website này để kiểm tra hoạt động của https://babeljs.io/

3. JSX Expression

Chúng ta có thể nhúng code JavaScript expression bên trong JSX sử dụng bên trong cặp dấu ngoặc {}

const name = 'Josh Perez';
const element = <h1>Hello, {name}  {2 + 2}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

Hoặc có thể nhúng JS function

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);