Your Satisfaction Is Our Success

[ReactJS Tutorial] Bài 2 - JSX

React sử dụng JSX để tạo template thay vì JavaScript thông thường. Có thể bạn sẽ không sử dụng nó, tuy nhiên sau đây là một số lợi ích của JSX.

  • JSX nhanh hơn vì nó thực hiện tối ưu hoá trong khi biên dịch mã cho JavaScript.

  • JSX cũng an toàn và hầu hết các lỗi có thể bị bắt trong khi biên dịch.

  • JSX giúp bạn viết các template dễ dàng và nhanh hơn nếu bạn đã quen thuộc với HTML.

Sử dụng JSX

JSX trông giống như một HTML thông thường trong hầu hết các trường hợp. Xem code của file App.jsx phần return thẻ div .

App.jsx

import React from react;
  
  class App extends React.Component {
     render() {
        return (
           <div>
              Hello World!!!
           </div>
        );
     }
  }
  export default App;

Mặc dù nó tương tự như HTML, có một vài điều cần lưu ý khi làm việc với JSX.

Các phần tử lồng nhau

Nếu muốn return nhiều phần tử, cần phải bọc nó bằng một phần tử container. Chú ý cách sử dụng div làm container cho các phần tử h1 , h2 p .

App.jsx

import React from react;
  
  class App extends React.Component {
     render() {
        return (
           <div>
              <h1>Header</h1>
              <h2>Content</h2>
              <p>This is the content!!!</p>
           </div>
        );
     }
  }
  export default App;
React JSX Wrapper

Attributes

Chúng ta có thể sử dụng custom attributes ngoài các attributes và HTML properties thông thường. Khi muốn thêm custom attributes, cần sử dụng tiền tố data- . Trong ví dụ sau, chúng ta thêm data-myattribute làm thuộc tính của phần tử p .

import React from react;
  
  class App extends React.Component {
     render() {
        return (
           <div>
              <h1>Header</h1>
              <h2>Content</h2>
              <p data-myattribute = "somevalue">This is the content!!!</p>
           </div>
        );
     }
  }
  export default App;

JavaScript Expressions

Các JavaScript Expressions có thể được sử dụng bên trong JSX. Chỉ cần wrap nó với dấu ngoặc {} . Ví dụ sau sẽ render 2 .

import React from react;
  
  class App extends React.Component {
     render() {
        return (
           <div>
              <h1>{1+1}</h1>
           </div>
        );
     }
  }
  export default App;
React JSX Inline Javascript

Không thể sử dụng câu lệnh if else bên trong JSX, thay vào đó có thể sử dụng biểu thức có điều kiện (ternary) . Trong ví dụ sau, biến i bằng 1 do đó trình duyệt sẽ render true , nếu chúng ta thay đổi nó thành một giá trị khác, nó sẽ render false .

import React from react;
  
  class App extends React.Component {
     render() {
        var i = 1;
        return (
           <div>
              <h1>{i == 1 ? "True!" : "False"}</h1>
           </div>
        );
     }
  }
  export default App;
React JSX Ternary Expression

Styling

React khuyến cáo sử dụng các kiểu inline styles. Khi muốn thiết lập các kiểu inline styles, chúng ta cần sử dụng cú pháp camelCase . React cũng sẽ tự động nối px sau khi đánh số trên các phần tử cụ thể. Ví dụ sau cho biết cách thêm phần tử myStyle vào thẻ h1 .

import React from react;
  
  class App extends React.Component {
     render() {
        var myStyle = {
           fontSize: 100,
           color: #FF0000
        }
        return (
           <div>
              <h1 style = {myStyle}>Header</h1>
           </div>
        );
     }
  }
  export default App;
React JSX Inline Style

Comments

Khi viết comments, cần đặt dấu ngoặc nhọn {} khi muốn viết comments trong phần children của thẻ. Đó là một cách thực hành tốt để luôn luôn sử dụng {} khi viết comments, bởi vì chúng ta cần sự nhất quán khi viết ứng dụng.

import React from react;
  
  class App extends React.Component {
     render() {
        return (
           <div>
              <h1>Header</h1>
              {//End of the line Comment...}
              {/*Multi line comment...*/}
           </div>
        );
     }
  }
  export default App;

Naming Convention

Thẻ HTML luôn sử dụng tên thẻ chữ thường , trong khi các thành phần React lại bắt đầu với Chữ viết hoa .

Note - Bạn nên sử dụng className htmlFor dưới dạng các tên thuộc tính XML thay vì class for .

Điều này được giải thích trên trang chủ React như sau - Vì JSX là JavaScript, nên các định danh như class for không được khuyến khích làm tên thuộc tính XML. Thay vào đó, React DOM components mong đợi các DOM property được đặt tên là className htmlFor tương ứng.


Nguồn: tutorialspoint.com

Style Switcher

Predifined Colors


Footer


Layout Mode

Patterns