Edu DaLatHub
  • Trang chủ
  • Flutter
  • WordPress Plugin
  • GoLang
  • ReactJS
  • NodeJS
  • Networking
    • Basic Networking
      • ARP
      • ICMP
      • TCP/UDP
    • Routing & Switching
      • RIP
      • OSPF
      • EIGRP
      • Redistribution
      • TSHOOT
      • WAN
Liên hệ

  • By  tinhphan
  • 0 comments
  • Tháng Năm 29, 2020

Tìm hiểu về cách tạo các phần tử trong ReactJS

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


Tech Blog

 

Nguồn ảnh từ TechBlog


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!

Tags:
ReactJS, Web

Leave a Comment Cancel Reply

Your email address will not be published.*

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

Don’t compare yourself with anyone in this world…if you do so, you are insulting yourself.

Bill Gates

When something is important enough, you do it even if the odds are not in your favor.

Elon Musk

Bài viết mới

  • Lorem Ipsum Sample Content123
  • Lorem Ipsum Sample Content
  • Hello world
  • Hello world
  • Hello world
  • Wide area networks (Phần 2)
  • Wide area networks (Phần 1)
  • Redistribution (Phần Cuối)
  • Redistribution (Phần 1)
  • OSPF – Open Shortest Path First (Phần Cuối)

Nơi chia sẻ về tin công nghệ, các kinh nghiệm lập trình. Xây dựng các khoá đào tạo lập trình, mạng, tin học văn phòng...

Thông tin liên hệ

  • 2/9 Phạm Ngũ Lão, Phường 3, Đà Lạt
  • 0865802659
  • info@dalathub.com

Copyright @ 2022 Edu DaLatHub