Kiến thức Cấu trúc JSX

​

Khái niệm​

JSX (Javascript XML), là cấu trúc XML được viết bên trong cấu trúc Javascript (HTML cũng được viết theo cấu trúc XML nhé), do đó có thể hiểu đơn giản hơn JXS giống như cách viết HTML bên trong cấu trúc Javascript.

Cấu trúc React bình thường​	Viết React theo JSX​
const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );	const element = ( <h1 className="greeting">Hello, world!</h1> );

Để render thẻ <h1> ta thấy rõ ràng cách viết JSX ngắn gọn hơn, và nó gần giống với cấu trúc HTML quen thuộc.
Đây chỉ mới có 1 thẻ <h1>, nếu nội dung là một file HTML hoàn chỉnh thì cấu trúc bên trái sẽ rất phức tạp.
Ngoài ra JSX chống tấn công kiểu injection, do mặc định React DOM sẽ loại bỏ những ký tự đặc biệt trong bất kì giá trị nào được nhúng vào JSX trước khi được render, việc này giúp ngăn chặn phương thức tấn công XSS (cross site scripting).
Đó là lý do chúng ta nên viết React theo cấu trúc JSX.

JSX được viết ở đâu?​

Theo như bài học phần

Ồ, bạn chưa phải thành viên của forum Đăng nhập hoặc đăng ký ngay.

ta thấy file /src/App.js như sau:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Nội dung phía trong phần return bên trên chính là nội dung được viết bằng JSX.

Khác biệt giữa HTML và JSX​

Cấu trúc JSX tương đồng với cấu trúc HTML, tuy nhiên có một số điểm khác biệt ta cần chú ý:

Thành phần​	HTML​	JSX​
Tên Class	<tag class="">	<tag className="">
Thuộc tính value <input />	<input value="" />	<input defaultValue="" />
Thuộc tính for của <label>	<label for="">	<label htmlFor="">
Giá trị của <select><option>	<option value="">	<option value={}>
Style trực tiếp bên trong tag	<tag style="width: 10%">	<tag style={{ width: '10%' }}>
Event	<tag onclick="functionName()">	<tag onClick={functionName}>
Khi viết về giá trị được gọi		<img src={path}> Hello {name}!

Hiện tại có nhiều trang hỗ trợ việc chuyển đổi nội dung HTML sang JSX, các bạn có thể tham khảo:

Ồ, bạn chưa phải thành viên của forum Đăng nhập hoặc đăng ký ngay.

.
Tùy vào trường hợp mà các bạn code từng phần hoặc dùng công cụ chuyển đổi cho phù hợp nhé.