React-DOM là gì? | Tại sao cần React-DOM?

Поделиться
HTML-код
  • Опубликовано: 5 ноя 2024

Комментарии • 79

  • @F8VNOfficial
    @F8VNOfficial  3 года назад +24

    👉👉👉 Qua một số bài học chắc hẳn anh em cũng nhận ra bản thân React không mang theo thành phần render UI. Bài học này giúp các bạn làm quen với thư viện React-DOM, đây chính là thành phần cầu nối giữa React và DOM, nó giúp chúng ta có thể render ra web UI từ React element. 😍😍

  • @thanhduynguyen6253
    @thanhduynguyen6253 11 месяцев назад +1

    1 năm trước ngồi học JS và đã được 1 cty nhận (trong đó mình đã làm vs Vue), năm nay cty chi nhanh VN giải thể, ae trong cty thất nghiệp, mình lại ngồi xem React, nghe a Sơn giảng vẫn như ngày đầu, ngồi nghe mà ứa nước mắt. Thật sự năm nay khó khăn quá

  • @thientranduy9806
    @thientranduy9806 2 года назад +3

    Thật sự anh phân tích rất kĩ, trước em đọc lướt tài liệu để code project. Giờ kiếm mấy khóa học online để nạp củng cố lại thì thấy khóa của anh rất hay. Anh dạy, phân tích từ cái nguyên thủy nhất để hiểu bản chất, đúng những cái em đang cần. Mong anh ra nhiều video chia sẻ nữa. Cảm ơn anh!

  • @vietucnguyen4452
    @vietucnguyen4452 3 года назад +1

    Tuyệt vời ! Mình vừa học xong 1 khoá Reactjs + mateui , Nay học tiếp F8 vẫn thấy hay !

  • @laothantien
    @laothantien 3 года назад +1

    👍👍👍, giữ sức khoẻ ra video đều nhé pro,đang cày lại món này😀

  •  3 года назад +2

    phải vậy chứ, cảm ơn F8. Chiều fan quá.

  • @phanhaiang7052
    @phanhaiang7052 3 года назад +4

    mới ước hôm qua một ngày 2 video thì hôm nay đã thành hiện thực >

    • @jockerthe8189
      @jockerthe8189 3 года назад

      Hôm nay ông anh lại ước tiếp đi anh

    • @phanhaiang7052
      @phanhaiang7052 3 года назад

      @@jockerthe8189 hôm nào cũng ước bạn ơi 🤣🤣🤣

  • @nguyenchuong4861
    @nguyenchuong4861 3 года назад +2

    Mặc dù đang làm Vue nhưng em vẫn cày series React của anh, cảm ơn anh Sơn rất nhiều ạ

    •  3 года назад +1

      giống tớ.

    • @nguyenchuong4861
      @nguyenchuong4861 3 года назад +1

      @ Xem vẫn học thêm được rất nhiều thứ ông nhỉ 😁

    •  3 года назад +1

      @@nguyenchuong4861 hiện tại thì chưa, đang hóng mấy cái phần tiếp theo, mà ra kiểu nhỏ giọt nên nóng ruột quá.

    • @nguyenchuong4861
      @nguyenchuong4861 3 года назад

      @ Anh Sơn chắc quay xong gần full rồi, mà khoá này cho mọi người từ beginner cho tới pro luôn nên ra dần cho mọi người học từ từ follow theo thấy cũng hợp lí

    • @TrucNguyen-ut7pc
      @TrucNguyen-ut7pc 3 года назад

      @, có ra là may r đòi hỏi quá, ra chậm chứ ra nhiều, nhiều người học qua loa, cho nhanh qua bài, ngợp thêm, ko chất lượng, thời gian rảnh còn lại học mấy thứ khác, còn ko thì đọc dọcument

  • @thanhsonhoang8982
    @thanhsonhoang8982 2 года назад +2

    ai vướng chỗ render thì code đây nha:
    const rootElement = document.getElementById("root")
    const root = ReactDOM.createRoot(rootElement)
    root.render(postItem)

    • @HuyPham-id7us
      @HuyPham-id7us Год назад

      cái này là do lỗi phiên bản hay sao v bạn?
      mình làm theo y chang mà vẫn ăn bug :((

    • @thanhsonhoang8982
      @thanhsonhoang8982 Год назад

      @@HuyPham-id7us đúng rồi do bản hiện tại là 18 bản trong video là 17

  • @nguyenxuany9288
    @nguyenxuany9288 2 года назад

    Giảng chi tiết, dễ hiểu rất nhiệt tình. Ủng hộ f8

  • @ledinhthai69
    @ledinhthai69 2 года назад

    Mình xem video này xong mình thử nghiệm lại thì mình thấy có những khác biệt sau:
    - Thứ nhất, không cần lấy ra thẻ có id = root, thì nó vẫn chạy
    - Thứ hai, sang phiên bản React 18.2.0 thì cách render nó lại khác. Họ sử dụng từ khóa là CreateRoot để render ra. Nếu sử dụng cách render như trên nó vẫn chạy nhưng lại báo lỗi ở mục console.log là từ phiên bản 18.2.0 thì sẽ không còn sử dụng cách cũ nữa.
    Xin cảm ơn rất nhiều cho bài học

    • @nguyentienuc8219
      @nguyentienuc8219 2 года назад

      bác ơi, cái react dom với react router dom thì nó khác nhau như thế nào vậy bác, em search mà ko hiểu

  • @nguyenminhuc2283
    @nguyenminhuc2283 2 года назад +2

    Exercise 1:
    const h1React = React.createElement(
    'h1',
    {
    title: 'Cyberpunk 2077',
    className: 'heading'
    },
    'Python Django + ReactJS'
    )
    const root = document.getElementById('root')
    ReactDOM.render(h1React, root)
    Exercise 2:
    const ulReact = React.createElement(
    'ul',
    null,
    React.createElement('li',null,'ReactJS'),
    React.createElement('li',null,'Python Django'),
    )
    const root = document.getElementById('root')
    ReactDOM.render(ulReact,root)

    • @HuyPham-id7us
      @HuyPham-id7us Год назад

      nãy giờ ăn bug quá tr
      may có có bài của bạn để compare kkk, thanks bro!

  • @dungluu7209
    @dungluu7209 3 года назад +2

    Hay quá anh ơi, Cảm ơn anh rất nhiều, Hy vọng sau khóa này em sẽ sẵn sàng để đi thực tập :)))

  • @Misskieutra
    @Misskieutra Год назад +1

    Version 18.
    const devoir1 = React.createElement('h1', {title: 'Hello', className: 'heading'}, 'Hello guys!')
    const devoir2 = React.createElement('ul', null,
    React.createElement('li', null, 'Javascript'),
    React.createElement('li', null, 'ReactJs'))
    const parent = React.createElement('div', {}, devoir1, devoir2)
    const root = ReactDOM.createRoot(document.getElementById('root'))
    root.render(parent)

  • @nguyenquocan8949
    @nguyenquocan8949 3 года назад

    1 ngày đc 2 video luôn cảm ơn anh nhiều

  • @ChinhTran-tq7qd
    @ChinhTran-tq7qd 3 года назад

    Chúc anh sức khỏe để làm thêm nhiều bài học như này nữa

  • @juhandvan
    @juhandvan 3 года назад

    oke a Sơn, xem xong video của a hiểu thêm được rất nhiều cái mới.

  • @FangYuan51
    @FangYuan51 3 года назад

    2 ngày video hay quá a :V

  • @nguyentienuc8219
    @nguyentienuc8219 2 года назад +1

    Các bác cho hỏi vậy giữa React Dom và Virtual Dom thì khác nhau như thế nào vậy

  • @truongtranvan7590
    @truongtranvan7590 3 года назад

    Ủng hộ anh. Giảng dễ hiểu lắm ạ

  • @ducdoanminh7835
    @ducdoanminh7835 3 года назад

    Em cảm ơn ah Sơn Đặng nhiều ạ! :D

  • @gamehay24g97
    @gamehay24g97 2 года назад

    Hay quá anh ơi

  • @Rap4Life1412
    @Rap4Life1412 3 года назад

    Chất quá anh

  • @duyanhao4984
    @duyanhao4984 3 года назад

    Tuyệt vời

  • @nguyenvanchung3940
    @nguyenvanchung3940 2 года назад

    Tuyet voi

  • @chuminhduc7638
    @chuminhduc7638 Год назад

    anh oi 'Uncaught TypeError: React.createRoot is not a function' lỗi này fix như nào ạ?

  • @nguyenthien1561
    @nguyenthien1561 3 года назад

    úi tóc dài nhanh vậy anh =))) Ảo thật đấy kkkk

  • @hoangnguyen-qf7ht
    @hoangnguyen-qf7ht Год назад

    version 18
    const root=document.querySelector('#root')
    const reactRoot=ReactDOM.createRoot(root)
    reactRoot.render(divReact)

  • @AnAn-mb8ld
    @AnAn-mb8ld 3 года назад

    Làm thêm về DOM ảo đi anh

  • @vuongqtvn
    @vuongqtvn 3 года назад +1

    ❤️

  • @thanhphong6101
    @thanhphong6101 2 года назад

    cho e hỏi, sao e dùng style trong React.createElement k đc nhỉ?

  • @ndqitvn
    @ndqitvn 3 года назад

    Sót cho sư huynh vãi, một ngày 2 video, sợ đuối

    • @ndqitvn
      @ndqitvn 3 года назад

      Để ý tóc video trước của anh khác nha hahah

  • @MinhVu-kj5zn
    @MinhVu-kj5zn 3 года назад

    hay qua anh oi

  • @nguyenkimhungfplhcm8703
    @nguyenkimhungfplhcm8703 6 месяцев назад

    4:32 sao họ không nhúng cả 3 thư viện vào 1 để ai làm gì sài nấy cho tiện a

    • @F8VNOfficial
      @F8VNOfficial  6 месяцев назад

      Thế không cần xài thì nó lại thừa em ơi. Ví dụ code mobile (Android & iOS) với react-native thì nó lại cần 2 thư viện là: react & react-native chứ không cần react-dom nha em.

  • @hoangtri9569
    @hoangtri9569 3 года назад

    xịn

  • @hungcao1342
    @hungcao1342 Год назад

    nice!

  • @Cuongnguyen-sg7vl
    @Cuongnguyen-sg7vl 2 года назад

    Anh ơi react nó lên 18 rồi nên cú pháp này render này ko còn chạy được đâu ạ

  • @TuiTenBo-xw5qy
    @TuiTenBo-xw5qy 2 года назад

    ủa mn ơi, em nhấn React nó k hiện ra gợi ý thì phải làm sao ạ

  • @nguyentruongminh5127
    @nguyentruongminh5127 2 года назад

    mình thêm 3 thư viện vào rồi, nhưng ReactDom không sử dụng được, mình xài trên bảng console thì lúc được lúc lỗi, dùng trên vscode thì cũng thế, lúc được lúc lỗi nhưng lỗi nhiều hơn ( lỗi báo do ReactDom chưa được định nghĩa). ai biết cách fix ko sửa mình với @@

  • @van9639
    @van9639 3 года назад

    Video này là lúc anh chưa cắt tóc ạ

  • @phungtruongdinhquan7765
    @phungtruongdinhquan7765 3 года назад

    Mọi người ơi, mọi người cho thể cho em xin theme color giống như anh Sơn được không ạ. theme của em mỗi khi comment ra màu xám khó nhìn quá. Em cám ơn a.

  • @nhachay2408
    @nhachay2408 2 года назад

    A ơi react nó lên 18 r h render kiểu j thế a.

  • @phat1106
    @phat1106 3 года назад +1

    bảo anh Sơn làm thêm khoá React Native thì có tham quá ko mn :))

    • @cuonghaviet2660
      @cuonghaviet2660 3 года назад

      có quá đáng lắm không khi ae mong a Sơn ra thêm ReacNative :D

  • @congnamle3632
    @congnamle3632 3 года назад

    Vào like video ủng hộ f8 chứ cày kỹ JS đã. cái này để dành :v

  • @TranNgocGiang
    @TranNgocGiang 2 года назад

    ad ơi cho e hỏi ở version 18 thì đoạn render ra bị lỗi.ad chỉ giúp e cách fix với ạ.Em cám ơn nhiều

    • @F8VNOfficial
      @F8VNOfficial  2 года назад +1

      Mấy hôm tới anh mới làm đến chỗ này. Tạm thời em search "change log react 18" mà xem sự thay đổi nhé. Hoặc search "how to upgrade to react 18"

  • @quyphanvu3335
    @quyphanvu3335 3 года назад

    anh sơn ơi, cho em hỏi tại sao khi render ra nó chỉ render ra 1 cái chứ không thể vừa ra ul, li và thẻ h2 luôn ạ

    • @F8VNOfficial
      @F8VNOfficial  3 года назад +1

      Vài videos tới anh chỉ nhé

    • @hoangtri9569
      @hoangtri9569 3 года назад +1

      kẹp trong một cái thẻ gọi là outermost element nữa á b ơi

    • @quyphanvu3335
      @quyphanvu3335 3 года назад

      @@hoangtri9569 anh sơn vừa chỉ rùi ạ, cảm ơn bạn :>

  • @minhtaingo9182
    @minhtaingo9182 3 года назад

    anh Sơn ra video học cắm đâu luôn :))

    •  3 года назад +2

      khẽ thôi, kẻo 1 ngày 1 video không có mà học đấy.

    • @minhtaingo9182
      @minhtaingo9182 3 года назад +1

      @ bạn cũng khẽ thôi nhá 🤣🤣

  • @jockerthe8189
    @jockerthe8189 3 года назад

    E ở Hà Nội thì lên học trường nào ạ (học cao đẳng ạ tại trước e học ngành khác rồi giờ ko thi lại chắc chỉ học đc cao đẳng) . Các a,chị đi trước cho e xin ý kiến ạ .

    • @bigwife512
      @bigwife512 3 года назад

      Mình cũng chuyển ngành vừa học trung tâm 8 tháng ra đây, thực tập lương 4 củ nhé( cao hơn 3 năm học ô tô) :))

    • @jockerthe8189
      @jockerthe8189 3 года назад

      @@bigwife512 adu trước em cũng học oto luôn bác ạ . mà bác học trung tâm nào ạ . trung tâm giới thiệu bác đi thực tập hay j

    • @bigwife512
      @bigwife512 3 года назад +1

      @@jockerthe8189 nghề ô tô bạc quá bác:)). tui học bên cybersoft á ngoài HN như chưa có chi nhánh. dịch trung tâm ko tổ chức kết nối doanh nghiệp đc. tui tự kiếm thôi. ngoài HN thấy tuyển đầy HCM tui thấy ít hơn nhiều

    • @jockerthe8189
      @jockerthe8189 3 года назад

      @@bigwife512 thank bác

  • @inhsyduyetkenh5730
    @inhsyduyetkenh5730 3 года назад

    Sợ anh đuối . 2 video/day luôn

  • @c21a.th2nguyenthanhphong3
    @c21a.th2nguyenthanhphong3 Год назад

    Noop bài ở đây vậy

  • @huy19437
    @huy19437 3 года назад

    ruclips.net/video/je7qu4UcW9Q/видео.html
    cái này bổ sung thêm cách react render

  • @tuananhnguyen7511
    @tuananhnguyen7511 Год назад

    Hay quá anh ơi

  • @TuanNguyen-xb5jj
    @TuanNguyen-xb5jj 2 года назад +1

    anh ơi em có render như cách a hướng dẫn trong video nhưng mà nó show ra lỗi là "Target container is not a DOM element" thì giả quyểt như nào ạ