Tìm hiểu Component trong ReactJS

Ân Vũ — Wed, 18 Oct 2017 03:16:08 +0000

Trong ReactJS, mỗi đoạn code sẽ được phân chia thành những Component không lệ thuộc lẫn nhau và có thể tái sử dụng khi cần thiết. Vì vậy trong bài viết này chúng ta sẽ tìm hiểu cách viết và sử dụng Component như thế nào trong ReactJS.

Yêu cầu trong bài viết

Bài viết này được viết trên nền tảng JavaScript ES6 + Babel Compiler có sẵn trong create-react-app . Vì thế, các bạn hãy tập làm quen với các cú pháp mới và “lạ” trong bài viết này.

Cú pháp

Để khởi tạo Component chúng ta sẽ có nhiều cách như sau:

Dùng let, const trong JavaScript ES6 hoặc var ở các phiên bản JavaScript thấp hơn.
Dùng Function.
Dùng Class trong JavaScript ES6.

Ví dụ

import React, { Component } from 'react';

// Ví dụ 1
let Tab_let = () => {
  return (
    Khởi tạo bằng let
  );
};

// Ví dụ 2
const Tab_const = () => {
  return (
    Khởi tạo bằng const
  );
};

// Ví dụ 3 - const hoặc let đều được
const Tab_shorthand = () => (
  Cách tắt khi dùng Arrow Function
);

// Ví dụ 4
function Tab_function() {
  return (
    Khởi tạo bằng Function
  );
}

// Ví dụ 5
class Tab_class extends Component {
  render() {
    return (
      Khởi tạo bằng Class
    );
  }
}

Qua ví dụ trên thì khi dùng let hoặc const, chúng ta cần dùng Arrow Function hoặc Anonymous Function để gán vào cho biến hoặc hằng. Trong khi Function có cách dùng tương tự cách định nghĩa biến và hằng thì Class lại phải kế thừa từ Class Component trong ReactJS để có thể chạy được.

Ở ví dụ 3, các bạn nên lưu ý là cú pháp dùng 2 dấu (…) này có ý nghĩa là vừa vừa return như ví dụ 2 và vừa tạo ra JSX ở bên trong nó. Chúng ta sẽ tìm hiểu sâu hơn về JSX ở những bài sau nên bài này các bạn “chịu khó” vẫn chưa hiểu nó nhé.

Tiếp tục sau khi khởi tạo, tên của biến, hằng, function và class sẽ trở thành 1 Component với HTML Tag là . Nên nhớ là HTML Tag phải là thẻ tự đóng, còn khi nào thì nên dùng thẻ bao thì tôi sẽ nói rõ khi chúng ta tìm hiểu tới khái niệm về Props (Properties).

Cách sử dụng

Chúng ta chỉ đơn giản sử dụng tên thẻ như trước đó tôi đã đề cập vào bất kỳ vị trí nào nằm bên trong phạm vi sử dụng React. Chắc có lẽ sẽ có nhiều bạn đến khúc này sẽ bị lấn cấn đó là làm sao biết phạm vi của React là ở đâu? Và nó đã được khởi tạo như thế nào?

Quay lại bài viết trước, các bạn có nhớ rằng khi các bạn tạo dựng ReactJS bằng cách dùng create-react-app , chúng ta đã thấy qua file index.js trong thư mục src chứ. Vâng, chính là nó! Tôi sẽ giải thích cho các bạn qua cấu trúc file public/index.html và src/index.js bằng hình ảnh sau:

Hình ảnh trên chứa các phương thức mặc định dùng để khởi động ReactJS cũng như trỏ tới

để nhận biết đâu là vùng hoạt động của ReactJS. Tiếp tục, chúng ta quay trở lại file App.js và thêm những Component mà chúng ta đã viết ở trên vào:

Và kết quả nhận được:

Lời kết

Như vậy, chúng ta đã tạo ra những Component trong ReactJS bằng nhiều cú pháp khác nhau và kết hợp với cú pháp JSX để tạo ra React Element. Vậy JSX là gì? Component chỉ có vậy thôi sao? Hãy đón xem tiếp ở phần sau các bạn nhé.