Hello các bạn! Hôm nay mình sẽ tiếp tục bài thứ 2 hướng dẫn các bạn cách tạo ra một element trong ứng dụng React. Các element cũng còn được gọi là component. Chúng ta sẽ đi từ các component cơ bản nhất để hiểu cách nó hoạt động như thế nào

 

Các bạn cần tạo ra một file index.html với nội dung như sau:

Mình có ví dụ nhỏ: chúng ta cũng có thể mô tả HTML DOM thành các Object của JS như sau:

Bên dưới là HTML DOM

Chúng ta chuyển thành Object JS như sau:

Trong React thì chúng ta cũng tạo ra các element như vậy, không phải là DOM element mà chúng ta dùng React.createElement();

React.createElement(); nó nhận vào 1, 2 hoặc là nhiều tham số

Tham số thứ nhất sẽ là kiểu mà các bạn muốn tạo, các kiểu này là tất cả các HTML element mà các bạn đã học ví dụ như là div, img, a, p, ul, li, table,…

Tham số thứ 2 sẽ là thuộc tính, trong React gọi là props (properties)

Trong HTML các cặp key – value như trên được gọi là attribute. Nhưng nó sẽ được chuyển đổi thành thuộc tính của React được mô tả dưới dạng object theo quy tắc của nó như sau:

Tham số thứ 3, 4,.. là các con của nó, nếu nó không có con mình sẽ bỏ qua.

Tiếp theo là mình sẽ chuyển 2 thẻ HTML DOM thành 2 element của React.

Tiếp theo là mình sẽ tạo một element nữa để chứa 2 element mình vừa tạo ra với kiểu là div, thuộc tính là null như sau:

Tiếp theo, là mình muốn render element App vừa tạo ra vào thẻ div có id = “root”.

Đầu tiên, mình sẽ tham chiếu đến đến thẻ div có id = “root”. Lấy element với id = ”root” gán vào biến Root mình đã khai báo như ở dòng code ở phía dưới.

Sau đó mình sẽ render element App vào trong element Root

Như vậy, thực hiện tuần tự ta có một project đơn giản như sau:

Sau đó, các bạn lưu và chạy chương trình.

Qua tab của trình duyệt, chúng ta sẽ có kết quả như sau

Các bạn có thể để lại bình luận nếu như không hiểu chỗ nào nhé! Chúc các bạn thành công!