Bài 3: ReactJS - JSX - Học ReactJS Full Đầy Đủ Nhất

Đăng bởi: Admin | Lượt xem: 5279 | Chuyên mục: Javascript

React sử dụng JSX để tạo khuôn mẫu thay vì JavaScript thông thường. Tuy nhiên, không cần thiết phải sử dụng , sau đây là một số ưu điểm của JSX.

Tốc độ nhanh hơn vì JSX thực hiện tối ưu hóa trong khi biên dịch mã sang JavaScript.
JSX thuộc loại type-safe và hầu hết các lỗi có thể mắc phải trong quá trình biên dịch.
Giúp bạn viết các template dễ dàng và nhanh hơn, nếu bạn đã quen với HTM

Cách sử dụng JSX

Jsx giống như 1 HTML thông thường trong hầu hết các trường hợp. Hãy xem đoạn code trong file App.jsx và trả về thẻ div

App.jsx

import React from 'react';

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

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

Nested Elements (phần tử lồng nhau)

Nếu bạn muốn trả về nhiều phần tử hơn,bạn cần bọc nó bằng một phần tử vùng chứa. Lưu ý cách mình đang sử dụng thẻ div dùng để bao bọc cho các phần tử h1, h2 và p.

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;

Các thuộc tính

Ta có thể sử dụng các thuộc tính tùy chỉnh của riêng mình ,ngoài các thuộc tính HTML thông thường. Khi ta muốn thêm thuộc tính tùy chỉnh, chúng ta cần sử dụng tiền tố data-. Trong ví dụ sau, mình đã 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;

Biểu thức JavaScript

Các biểu thức javaScript có thể được sử dụng bên trong JSX. Ta chỉ cần bọc nó bằng dấu ngoặc nhọn {}. Ví dụ sau sẽ cho ra kết quả là số 2.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{1+1}</h1>
         </div>
      );
   }
}
export default App;

Ta không thể sử dụng các câu lệnh if else bên trong JSX, thay vào đó chúng ta có thể sử dụng các biểu thức điều kiện (bậc ba). Trong ví dụ sau, biến i bằng 1 nên trình duyệt sẽ hiển thị true, Nếu chúng ta thay đổi nó thành một số giá trị khác, nó sẽ hiển thị 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;

Styling(Kiểu)

React khuyên bạn nên sử dụng các kiểu intline. Khi ta muốn thiết lập các kiểu inline, ta cần sử dụng camelCase. React cũng sẽ tự động thêm px sau giá trị số trên các phần tử cụ thể. Ví dụ sau đây cho thấy cách thêm myStyle inline vào thẻ 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;

Comments

Comment của chương trình là những lời diễn giải của người viết code , giúp cho người đọc, kiểm tra mã nguồn dễ hiểu hơn. Tất cả ngôn ngữ lập trình đều có cú pháp riêng để viết comment.

Khi viết comments, ta cần đặt dấu ngoặc nhọn {} khi muốn viết comments trong phần con của thẻ. Một phương pháp hay là luôn sử dụng {} khi viết nhận xét, vì điều đó sẽ giúp ứng dụng nhất quán hơn.

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;

Quy ước đặt tên

Các thẻ HTML luôn sử dụng tên thẻ viết thường, trong khi các thành phần React bắt đầu bằng chữ hoa.

Lưu ý - Bạn nên sử dụng className và htmlFor làm tên thuộc tính XML thay vì class và for.

Điều này được giải thích trên trang chính thức của React như sau-

Vì JSX là JavaScript nên các định danh như class và for không được khuyến khích làm tên thuộc tính XML. Thay vào đó, các thành phần React DOM yêu cầu các tên thuộc tính DOM như className và htmlFor tương ứng.

Bài tiếp theo: ReactJS - Components & State >>

Theo dõi VnCoder trên Facebook, để cập nhật những bài viết, tin tức và khoá học mới nhất!