ReactJS: Chia component thế nào cho hiệu quả? 😎 (2020)

Поделиться
HTML-код
  • Опубликовано: 8 фев 2025
  • Đa số các bạn mới học ReactJS thì hay mắc phải vấn đề này, không biết làm sao để có thể chia component một cách hiệu quả, hãy cùng mình xem hết cái video này nhé! 😍
    Nhớ nè, bí kíp có 2 loại components: Container vs Component
    Container là chuyên gia xử lý dữ liệu, nhưng ngu render.
    Component là chuyên gia render UI nhưng bất lực ko biết render cái gì.
    Vậy mình dùng Container cung cấp dữ liệu, bảo Component render cái mong muốn là xong 🤩
    Chi tiết các bạn xem trong video nhé!
    Link tham khảo:
    / smart-and-dumb-components
    #reactjs #ContainerAndComponent #easyfrontend
    -----
    💻 Easy Frontend 🎉
    Nơi kiến thức lập trình web frontend (html/css/javascript/reactjs) được chia sẻ một cách đơn giản, dễ hiểu mà đặc biệt là vui 😊 Với những tài liệu (tutorial) được biên soạn một cách kĩ lưỡng để giúp các bạn developer mới có thể nắm bắt vấn đề một cách nhanh chóng và hiệu quả. Từ đó nâng dần khả năng coding của các bạn lên theo thời gian.
    ❤️ Ủng hộ mình làm videos thì góp 5k tại đây nhé:
    Ủng hộ tôi: unghotoi.com/e...
    MoMo/ZaloPay: 0901 309 729
    Kết nối với mình:
    🎉Facebook: / nvhauesmn
    💻Github: github.com/pau...
    💼 LinkedIn: / haunguyenmn

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

  • @EasyFrontend
    @EasyFrontend  4 года назад +14

    Cảm ơn các bạn đã xem video của mình nhé 😍
    Bạn nào đã hiểu cách chia component rồi thì thả tim cho mình biết cái nè ❤️
    Nếu có thắc mắc hay muốn trao đổi thêm về việc chia component với mình thì hãy bình luận bên dưới nhé. hehe

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

    Cảm ơn a

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

      haha đc vậy thì hay quá em ơi, cảm ơn em nhen hihi, trên kênh còn nhiều series hay, em có thể tham khảo thêm nhen 😊

  • @nghianguyentuan1481
    @nghianguyentuan1481 4 года назад

    Em cảm ơn ạ, anh dạy cuốn quá, rep comment cũng tâm huyết luôn, em đọc thêm comment cũng hiểu thêm được vấn đề =))

    • @EasyFrontend
      @EasyFrontend  4 года назад

      yeahhhhh cảm ơn em nhiều Nghĩa ơi 😍 Anh rất vui khi được trao đổi với mn, nên nếu có gì ko rõ cứ thoải mái comment nhé Nghĩa hehee

  • @trieuthuan8995
    @trieuthuan8995 4 года назад +1

    Rất hữu ích, giọng dễ nghe, nói chuyện rất luôn cuốn !! cảm ơn anh nhén ❤️

    • @EasyFrontend
      @EasyFrontend  4 года назад

      yeahh cảm ơn Thuận nhiều nhaaaaaa! 🙂
      Nếu bạn có gì còn thắc mắc, chưa hiểu thì có thể hỏi mình nha 😉

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

    e đang lu bu về reactjs qua list học của a nó đc thông não hẳn, cảm ơn a :p

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

    Phải như em xem video này sớm hơn 😭😭, e đã mất khá nhiều time để tự tìm hiểu mấy thứ này

  • @AldenDang
    @AldenDang 4 года назад

    Bài giảng rất bổ ích cho những newbie như e. Trước giờ code lung tung quá.

    • @EasyFrontend
      @EasyFrontend  4 года назад

      Thang Dang Xuan hihi rất vui vì video giúp ích cho bạn, nếu bạn có thắc mắc gì thì thoải mái trao đổi với mình nhé! Cảm ơn Thắng nha! 🙂

  • @HoangVu-lr8mh
    @HoangVu-lr8mh 4 года назад

    Cảm ơn anh đã chia sẻ những kiến thức thế này :D Chúc anh nhiều sức khỏe

    • @EasyFrontend
      @EasyFrontend  4 года назад

      hihi cảm ơn em nhiều nhé Vũ 😍 Chúc em nhiều sức khoẻ và học tập thật tốt nhen 😉

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

    Intro music khá ấn tượng.

  • @maicongchuyen8704
    @maicongchuyen8704 4 года назад

    cảm ơn chia sẻ của anh🤩 đúng cái em đang tìm hiểu luôn ạ

    • @EasyFrontend
      @EasyFrontend  4 года назад +1

      Chuyên Bún's hihi hên quá, đúng video đúng thời điểm 😍 Cảm ơn bạn nhiều nha 😉 Nếu có phần nào khó bạn có thể gợi ý mình để làm cho những video sau nha 🙂

  • @TanNguyen-iy3vf
    @TanNguyen-iy3vf 4 года назад

    cám ơn người anh đi trước truyền lại những kiến thức cho tụi em cần ^^ a nên sắp xếp lịch làm series dài từ react-redux-router-saga-hooks nữa a nhé :v

    • @EasyFrontend
      @EasyFrontend  4 года назад +1

      Tân Nguyễn hihi cảm ơn Tân nhiều nha 😍à mà hiện có nhiều tài liệu về mấy cái này rồi, Tân thấy nó chưa hiệu quả hay sao Tân? 🙂

    • @TanNguyen-iy3vf
      @TanNguyen-iy3vf 4 года назад

      @@EasyFrontend tại mình thấy kiến thức của họ đã cũ rồi á

    • @EasyFrontend
      @EasyFrontend  4 года назад +1

      Tân Nguyễn À anh hiểu òi, cảm ơn Tân đã phản hồi nhé 🙂

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

    hay quá, cám ơn bạn nha! ^^

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

      yeahhh cảm ơn Phương nhé hehe, kênh còn nhiều series xịn bạn có thể tham khảo thêm nha 😍

  • @ongtiendaudinh
    @ongtiendaudinh 4 года назад

    rõ ràng dễ hiểu còn phát âm chuẩn nữa, nhưng mà a góp ý mai mốt nên hạn chế dùng từ "Được chưa" ở cuối câu ha e, nghe nó hơi nặng nặng á.

    • @EasyFrontend
      @EasyFrontend  4 года назад +1

      hihi e cảm ơn a Nhật nhé, sr a vụ cái chữ cuối câu, nó thành thói quen của em rồi ạ =))) Hơi khó sửa, mà em sẽ để ý tới nó hihi 😉

  • @trungminh549
    @trungminh549 4 года назад

    Trước hết xin cảm ơn Anh đã làm clip! Anh nói hay dễ hiểu quá không biết anh có Tutorial dạy react js cơ bản không?

    • @EasyFrontend
      @EasyFrontend  4 года назад +1

      hi Trung, hiện thì a hk có full series về ReactJS cơ bản nè 🙂 Anh chỉ dự định làm project thực tế thôi nhen Trung. Hiện thì đang có cái series project thực tế reactjs va redux nè 😉

  • @tucanh7781
    @tucanh7781 4 года назад +4

    Smart >< Dumb :)))) đặt tên quá đáng ghê :)))

    • @EasyFrontend
      @EasyFrontend  4 года назад +1

      Tứ Cảnh hahaaa ấn tượng cho dev dễ nhớ mà =))))) lúc đầu a thấy cũng hết hồn, y như chửi hahaa

  • @khailam7681
    @khailam7681 4 года назад

    Mong được nghe anh chia sẻ thêm nhiều về khó khăn trong việc học JS với ReactJS

    • @EasyFrontend
      @EasyFrontend  4 года назад +1

      hi Lâm, cảm ơn bạn đã quan tâm nhé. Cái này thiên về chia sẻ, tâm sự, chắc mình gom lại một video để giải đáp cho các bạn nhé. :) Hiện cho mình xin hỏi tí, Lâm hiện có đang làm gì với js/reactjs hk?

    • @khailam7681
      @khailam7681 4 года назад

      @@EasyFrontend em đang học bên Full stack web phần react rồi, mà e chưa hiểu cách viết JS với reactJS như nào hx

    • @EasyFrontend
      @EasyFrontend  4 года назад +1

      @@khailam7681 ơ em học hết rồi mà sao chưa biết cách viết là sao Lâm?
      Hay là không biết cách tổ chức folder, file trong project hở Lâm? :)

    • @khailam7681
      @khailam7681 4 года назад

      @@EasyFrontend cũng có thể e chưa biết cách tư duy viết code, a có cách nào chia sẻ e với

    • @EasyFrontend
      @EasyFrontend  4 года назад +1

      Khải Lâm hi Lâm, em có nắm được JS vững hk? với nó còn tư duy lập trình, kĩ thuật lập trình và các thuật toán nữa, nên nếu chưa có thì em đọc thêm tài liệu
      tìm hiểu nhen 🙂

  • @ongTrinh-mi6js
    @ongTrinh-mi6js 4 года назад

    Cám ơn anh nhé.video hay lắm anh ạ.

    • @EasyFrontend
      @EasyFrontend  4 года назад

      hihi cảm ơn Dũng nhiều nha! :) Bạn nhớ áp dụng vào dự án rồi nếu có thắc mắc gì thì có thể trao đổi thêm với mình nha hehe

  • @HungNguyen-y9n8z
    @HungNguyen-y9n8z Год назад

    mình nghĩ việc chia nhỏ component nhằm tách bớt state ở component cha để tránh những re-render ko cần thiết

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

      yeah mình đồng ý, state nào ko cần thiết chia sẻ thì nên đưa xuống component con xử lý 👍

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

    Hi vọng sắp tới anh làm video về Higher Order Component ạ ^^

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

      hi em, cơ bản nó là component trả về component cộng thêm một số thứ gì đó em nhen hehe
      hiện anh hk có plan để làm video về topic này nè, tại anh chuyển sang dùng hooks òi, hk có dùng HOC nữa :)

  • @DiVeNoiXa91
    @DiVeNoiXa91 4 года назад

    Cảm ơn tác giả !

  • @glorynt7925
    @glorynt7925 4 года назад

    Hóng dự án vs tất cả dự án theo list của chủ kênh

    • @EasyFrontend
      @EasyFrontend  4 года назад

      AmlfD NT lol cảm ơn bạn nhiều nha 😍 Ngày mai sẽ có một cái về reactjs component life cycle vào 9h tối nhé. Riêng bạn có yêu cầu làm video về chủ đề gì hk? 🙂

    • @glorynt7925
      @glorynt7925 4 года назад

      Easy Frontend mình chỉ hóng có dự án theo kèm thì lượng người xem với người biết tới kênh sẽ nhiều hơn vì đa số có rất ít kênh có dự án theo kèm
      Ví dụ có dự án về web chẳng hạn, nhưng sẽ tốn khá nhiều công sức của bạn nên mình chỉ hóng chứ không dám yêu cầu

    • @EasyFrontend
      @EasyFrontend  4 года назад

      AmlfD NT à mình hiểu, tức là dạng làm full một cái website nào đó bằng reactjs chẳng hạn đúng hk? 🙂 Cái này take time thiệt =)) nhưng sau khi cho mn các kiến thức cần thiết thì mình sẽ làm cho mn hiểu rõ hơn nè hehe 😉 Nhưng ý tưởng rất hay, cảm ơn bạn nhiều nhé 😍

    • @glorynt7925
      @glorynt7925 4 года назад

      Easy Frontend ok tks kênh. Hóng

  • @anhtainguyen7692
    @anhtainguyen7692 4 года назад

    Hay quá a ơi 👍

    • @EasyFrontend
      @EasyFrontend  4 года назад

      hihi cảm ơn e nhiều Tài ơi. Hiện em có đang học hay làm việc với reactjs hk Tài? :)

  • @anhtuta95
    @anhtuta95 4 года назад

    Hay vãi nồi a ơi :v

    • @EasyFrontend
      @EasyFrontend  4 года назад

      yeahhh cảm ơn em nhiều Tú ơi 😉

  • @ngogiaviet7643
    @ngogiaviet7643 4 года назад

    không học ReactJS nhưng xem rất hay hehe :))

    • @EasyFrontend
      @EasyFrontend  4 года назад

      =)) cảm ơn bạn Việt nhiều nha, tuy ko học và vẫn chịu ngồi xem hihi rất là quý nha 😉

  • @ImVuCms
    @ImVuCms 4 года назад +1

    Mình thấy có một vấn đề như này: giả dụ vì một lý do nào đó mà state/props của thằng container thay đổi dẫn đến việc phải re render lại toàn bộ components trong container. để hạn chế vấn đề này mình thường cho các component trong container tự lấy tự xử lý dữ liệu giảm bớt việc re render lại toàn bộ. Còn ý kiến của bác thì như thế nào ?

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

      hi Vũ, một câu hỏi hay nè, mình xin trả lời như sau:
      1. Khi component mà Vũ cho xử lý dữ liệu, thì nó đã thành container rồi.
      2. Container có thể chưa container con, nên việc của Vũ làm là hợp lý nhé.
      3. Nếu việc re-render của component nó độc lập với các components khác thì bạn làm như vậy là hoàn toàn hợp lý.
      Nên theo mình, nếu trường hợp của Vũ là như vậy thì mình hoàn toàn đồng ý nhé!
      Cảm ơn Vũ đã đặt câu hỏi cho mình nhen 👍

    • @ImVuCms
      @ImVuCms 4 года назад

      @@EasyFrontend Thanks bác, mình đã hiểu !

    • @amv1087
      @amv1087 4 года назад

      ​@@EasyFrontend 3. Nếu việc re-render của component nó độc lập với các components khác là sao ạ? Anh giải thích cụ thể giúp e với ạ. Thanks anh

  • @NgocNguyen-rk9gq
    @NgocNguyen-rk9gq 4 года назад +2

    Tks anh, video rất hay ạ, em có câu hỏi nếu đc a giải đáp giúp em:
    Ví dụ e có container manage product render component list product. Trong đó có modal chỉnh sửa product, e nên sử dụng các state ( các thông tin về product ) ở container hay trong component vậy a? Vì e sử dụng Formik trong modal nhưng có 1 số field e k quản lý bằng formik mà phải sử dụng state ( do mới xài formik nên 1 số field e k tích hợp vô đc ). Nếu sử dụng state của container khi gõ chữ hơi lag còn để state ở component thì mượt hơn. Mong a giải đáp giúp e, em cảm ơn

    • @EasyFrontend
      @EasyFrontend  4 года назад

      hi Ngọc, có một số thứ cần lưu ý ở đây nè
      1. State em đặt ở container là đúng rồi nhé.
      2. Việc quản lý form, em nên để component riêng biệt nó tự quản lý lấy, đừng cập nhật trực tiếp lên container. Khi nào submit thì mới đẩy lên container xử lý và cập nhật state trên container nha. Em coi video này để hiểu cách đẩy phần form ra một component riêng nha ruclips.net/video/HbERbcazLhY/видео.html
      Hi vọng giải đáp được thắc mắc của em 🙂

  • @ThienNguyen-ed3gu
    @ThienNguyen-ed3gu 4 года назад

    Hay lắm a!

    • @EasyFrontend
      @EasyFrontend  4 года назад

      hi Thiện, cảm ơn bạn nhiều nhé! :) Bạn có đang học hay làm với reactjs hk?

    • @ThienNguyen-ed3gu
      @ThienNguyen-ed3gu 4 года назад

      @@EasyFrontend dạ đang làm đồ án React a ạ

    • @EasyFrontend
      @EasyFrontend  4 года назад

      Thiện Nguyễn à okie Thiện, vậy có gì trong quá trình làm mà gặp gì khó khăn thì có thể trao đổi vs mình hen 🙂Mình hk tl liền được, nhưng xong việc mình sẽ tl cho hen 🙂

    • @ThienNguyen-ed3gu
      @ThienNguyen-ed3gu 4 года назад

      @@EasyFrontend dạ, e cám ơn a!

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

    làm thêm 1 khóa làm project thực tế đi anh đơn giản để làm mẫu á anh

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

      hi Thanh, em có thể tham khảo series hooks, rồi redux và cái mới nhất là series về redux saga em nha, toàn là mini project ko á em 😉
      Em xem các playlist ở đây nhen: ruclips.net/user/EasyFrontendplaylists

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

      @@EasyFrontend em xem mấy khóa react của anh hết rồi đợi anh ra mới mới nữa đó anh ơi khá hay cảm ơn anh

  • @viettruong3865
    @viettruong3865 4 года назад +1

    Mong bác làm demo 1 trang web băng react dc ko a

    • @EasyFrontend
      @EasyFrontend  4 года назад +1

      viet truong Sắp tới sẽ có nha bạn ơi, mình đang soạn tài liệu nè hihi 🥰

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

    anh ơi có vị dụ thực tế không ạ. nghe lý thuyết không thì thấy không thấm lắm ạ

  • @nguyensteven3268
    @nguyensteven3268 4 года назад +1

    Bạn có thể làm khoá học react js cho ng mới học đc không! Thanks

    • @EasyFrontend
      @EasyFrontend  4 года назад

      hi Steven, về phần này khá đơn giản nên mình dự định ko có làm nữa nè, thay vào đó mình chỉ làm một project thực tế cho mọi người thực hành thôi. Hiện bạn có đang gặp khó khăn gì về reactjs hk nhỉ? 🙂

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

    rk nó liên quan chi về cây thư mục của mình trong project ko anh? như phải chia ra 2 thư mục là container và components

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

      ở thời điểm hiện tại thì anh hk có phân biệt trong cây thư mục nữa em nha
      ý tưởng là dùng càng nhiều UI components càng tốt, logic nằm ở ít components thôi, thường là page-level, hoặc nếu phức tạp quá thì dưới page-level một bậc

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

      @@EasyFrontend dạ e cảm ơn chia sẻ của a ạ

  • @TamPham-oe2xc
    @TamPham-oe2xc 4 года назад

    Mình có thắc mắc thế này mong bạn giải đáp:
    - Ví dụ mình ko call API ở HomePage mà cho ProductList (lastest recipes) là container và call API ở đây > sau đó truyền props xuống cho dumb cmp là ProductDetail (card) thì có được không?
    Vì mình thấy thế này, nếu có gì đó ảnh hưởng tới 1 container lớn như HomePage chẳng hạn thì việc re-render lại toàn bộ container này là có và kéo theo là call API & re-render các cmp con ko cần thiết. Mong bạn giải đáp, cám ơn bạn. Chúc bạn sức khỏe và thành công.

    • @EasyFrontend
      @EasyFrontend  4 года назад +1

      hi Tâm, cảm ơn bạn đã đặt câu hỏi cho mình, mình xin giải đáp thắc mắc như sau:
      1. Container HomePage có thể chứa container con ProductList.
      2. Nhưng nếu bạn cho ProductList thành container, thì bạn sẽ không tái sử dụng được. Ví dụ HomePage muốn có ProductList 6 items, qua trang ProductSearch muốn có ProductList 12 items thì bạn làm thế nào? Vậy nên mình không nên cho ProductList làm container nhé.
      3. Về việc re-render, bạn dùng PureComponent giúp mình, cái này nó sẽ giúp mình ko re-render nếu props hoặc state không thay đổi.
      4. Còn trường hợp bạn vẫn muốn tách cái ProductList đó, thì hãy tạo ra một ProductContainer chẳng hạn.
      HomePage chứa ProductContainer
      ProductContainer sẽ gọi API và render cái ProductList.
      Hi vọng giải đáp được thắc mắc của bạn. 🙂

    • @TamPham-oe2xc
      @TamPham-oe2xc 4 года назад

      @@EasyFrontend cám ơn bạn đã giải đáp cho mình. Nãy mình có kết bạn trên FB, rất mong những video sắp tới của bạn về React nói riêng và FE nói chung. 😄

  • @thanhdungnguyen6953
    @thanhdungnguyen6953 4 года назад +1

    giả dụ như home page em không tương tác với api, em gọi luôn 4 component kia và k truyền gì qua cpn recipelist cả, vì em muốn component nào tương tác với api thì chia ra 2 file 1 file render ra ui giống như anh nói cho gì render đó, còn 1 file tương tác với api, anh thấy cách làm này sao anh

    • @EasyFrontend
      @EasyFrontend  4 года назад

      hi Dũng ơi, cách này được nhé em, cơ bản là thay vì dồn lên hết page level thì mình chia nhỏ ra tí, 1 page có nhiều container, mỗi container sẽ phụ trách việc xử lý data, xong pass data xuống UI component render lên là xong hehee.

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

    cách này còn áp dụng cho 2022 không ạ

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

      a nghĩ giờ nó không còn hợp lý lắm
      tuy nhiên có một mindset a vẫn còn giữ là tách UI và logic nhen Daniel hehe
      build càng nhiều stateless component càng tốt, để một vài ông thần stateful thôi, để mình dễ quản lý hehe

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

    chào a,
    e vừa nhảy ngang qua tìm hiểu reactjs, react-native,
    những phần về cấu trúc tệp, thư mục này a có thể chia sẻ cho e ít src để tham khảo vs dễ hiểu hơn đc k ạ?

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

      hi Tuấn ơi, em có thể tham khảo ở cái series về Redux nhé 😉

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

      @@EasyFrontend e cám ơn a

  • @TanNguyen-iy3vf
    @TanNguyen-iy3vf 4 года назад

    làm series react-hooks đi sư huynh ơi !

    • @EasyFrontend
      @EasyFrontend  4 года назад +2

      Tân Nguyễn hihi mình đang làm nè bạn ơi, dự là tuần sau mình sẽ release 2 videos đầu tiên nhen 😉

    • @thongvo7285
      @thongvo7285 4 года назад

      Easy Frontend mong lắm anh ạ :( Cảm ơn anh trước ạ

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

    authentication (login,logout) cho một web ecommerce thì e nên chia component như nào cho tối ưu ạ , ecó sử dụng redux ?

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

      hi Trường, cái này hơi khó trả lời em nhen, nó hơi chung chung hihi 🙃

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

    em muốn mua khóa reactjs của anh trên udemy mà k có visa mastercard paypal thì còn cách nào khác để thanh toán không anh

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

      à anh có thể hỗ trợ em thanh toán qua ngân hàng hoặc momo nhen, liên hệ anh qua facebook để được hỗ trợ nha Đức
      facebook.com/nvhauesmn/

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

      @@EasyFrontend anh check ib giúp e với ạ

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

    A ơi giá với đky khóa học react router v6 ở đâu anh?

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

      hi Thường, hiện react router v6 ko có khóa học hiện, chỉ có tích hợp trong khóa reactjs trên udemy thôi em nhen, cơ mà anh chưa làm tới phần này hihi

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

      @@EasyFrontend :=) ôi buồn thế anh

  • @viettruong3865
    @viettruong3865 4 года назад

    thanks

    • @EasyFrontend
      @EasyFrontend  4 года назад +1

      viet truong cảm ơn bạn nhiều nhé! Nếu có thắc mắc gì bạn cứ thoải mái bình luận hỏi nhé!

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

    Hi anh! Anh ơi cho em hỏi ngoài lề xíu ạ...Thường thì dự án thực tế nên responsive bằng bootstrap hay flexbox thuần vậy anh ?

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

      hi em, mình linh hoạt kết hợp cả 1 sao cho thuận tiện nhất em nhen 😉

  • @thengoc8294
    @thengoc8294 4 года назад

    Em mới tập học Reactjs thì có thể cho em hỏi cách học như thế nào không ạ. Em xem theo doc mà khó hiểu quá.

    • @EasyFrontend
      @EasyFrontend  4 года назад

      hi em, anh thì cũng xem docs rồi build UI để có kinh nghiệm nè.
      Kiều nào đi nữa em cũng cần học mấy kiến thức cơ bản trước rồi hẳn bay vào làm nè.
      Nếu docs chán quá thì em hãy tìm một khóa học online trên Udemy chẳng hạn để học nhé hihi

    • @thengoc8294
      @thengoc8294 4 года назад

      @@EasyFrontend Vâng ạ. Em cảm ơn ạ

  • @chungchamchi9808
    @chungchamchi9808 4 года назад

    Vậy logic mình sẽ viết ở đâu ạ? Ví dụ e muốn click vào 1 nút trong component rồi gọi lên server lấy dữ liệu. Thì flow sẽ như nào ạ?

    • @EasyFrontend
      @EasyFrontend  4 года назад +8

      hi Chung, câu hỏi hay nè. Trả lời ngắn gọn là logic bạn viết ở container nhé 🙂
      Chi tiết như sau, vd bán có container là HomePage, bạn có một component là ProductList.
      Trong ProductList bạn có một nút là Refetch (nút này để lấy lại dữ liệu mới về).
      Vậy nếu mình muốn click lên nút này để lấy dữ liệu mới thì làm sao?
      ProductList
      - Props: productList (type là ) và onRefetchClick (type là function)
      1. Thêm một props dạng function cho ProductList: onRefetchClick
      2. Khi nút Refetch được click thì chỉ việc pass cái handler onRefetchClick:
      3. Ở container HomePage thì sẽ truyền handler vào cho ProductList khi nút refetch được click.
      ví dụ có hàm handleRefetchClick() {lên server lấy dữ liệu rồi update lại state productList}
      trong hàm render của HomePage thì mình sử dụng thế này

    • @chungchamchi9808
      @chungchamchi9808 4 года назад

      @@EasyFrontendcảm ơn anh ! E hiểu ạ. nhưng nếu có nhiều sự kiện như vậy. giả dụ có tầm 20 sự kiện đi. Xong việc truyền tới 20 props và setState từ việc truyền vào thằng con function như vậy có làm giảm hiệu suất đi không ạ ?

    • @EasyFrontend
      @EasyFrontend  4 года назад +1

      Chung Đinh hi Chung, nếu nhiều sự kiện như vậy thì em coi lại cách chia component của em nha, component đó chia hơi lớn rồi đó 🙂
      Trường hợp cần thiết, e cân nhắc cho component đó trở thành một container luôn cũng được nha. 🙂

    • @chungchamchi9808
      @chungchamchi9808 4 года назад

      @@EasyFrontend Vì e có từng làm qua những component có nhiều logic. phải có tầm 20 state chưa kể những state để mình lưu trữ dữ liệu từ server. Vậy tại sao mình không để component xử lí logic của chỉnh nó và thằng container chỉ là thằng đi lấy dữ liệu về thôi ạ ?

    • @EasyFrontend
      @EasyFrontend  4 года назад +1

      Chung Đinh Ý bạn ơi, bản thân chính nó có thể tự handle logic liên quan tới state của nó nha. Chứ hk phải là hk đc handle logic. Xin lỗi bạn nếu mình làm bạn rối. Chính xác là mình đừng handle logic liên quan tới global state, hoặc dữ liệu của project trong dump component nè.
      Còn mình thì đồng ý vs bạn
      - Container lấy dữ liệu từ server, quản lý việc thay đổi dữ liệu này.
      - Component bên dưới chỉ sử dụng lại các dữ liệu từ container thông qua props và handle thêm logic nếu có state ( component state, chứ hk phải global state )
      Như vậy rõ hơn chưa Chung? 🙂

  • @Jakob089
    @Jakob089 4 года назад

    Anh có làm khoá học về reactjs ko anh hay chỉ làm các video như này ạ

    • @EasyFrontend
      @EasyFrontend  4 года назад +1

      hi Bảo, hiện thì a ko có dự định làm full khoá reactjs online nhé. A chỉ có dự định làm một project thực tế cho reactjs thôi 🙂

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

    Anh ơi, có thể cho em xin link khoá học trả phí reactjs của anh không ạ ? Em tìm trên google mà không thấy.

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

      hi Vỹ, link đây em nha, dùng links này mới có giảm giá, em tìm trên google thì ko có nè hihi
      Easy Frontend - Code xịn hơn mỗi ngày
      🔥 Khoá học Javascript: course.ezfrontend.com/javascript
      🎁 Khoá học ReactJS: course.ezfrontend.com/reactjs
      🎯 Fan cứng Easy Frontend: bitly.com/easy-fan-cung
      Nếu khó khăn gì thì ping trên facebook anh hen :)

  • @anhcao5452
    @anhcao5452 4 года назад

    anh ơi ah có source nào của ah chia theo cái này không ạ.vì khi nhìn vào code e dễ hiểu hơn.ah có thể share cho e được k ạ.e cảm ơn :))

    • @EasyFrontend
      @EasyFrontend  4 года назад

      hihi chào bạn, cảm ơn bạn đã quan tâm nha. Vì code dự án nên hk thể share được, nhưng sắp tới mình sẽ soạn code rồi gửi mn tham khảo nhen 😍

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

    em định học jquey mà tìm hiểu thì cái này đã lỗi thời, vậy nên có thể skip cái này đc đúng ko anh

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

      yeah mình có thể skip jquery em nhen, học javascript xong tới reactjs luôn em nha

  • @vantungpham159
    @vantungpham159 4 года назад

    a oi cho e hỏi 1 tuần a ra mấy video về react vậy a ?

    • @EasyFrontend
      @EasyFrontend  4 года назад

      Văn Tùng Phạm hi Tùng, cảm ơn bạn đã quan tâm nha. Hiện do mùa dịch nên có thể mình sẽ ra 1-2 videos về react hàng tuần. Nhưng tương lai thì chưa biết được nữa nè. Khi nào có lịch cụ thể mình sẽ update lên cho mn nắm hen. 🙂

    • @vantungpham159
      @vantungpham159 4 года назад

      @@EasyFrontend vâng e cảm ơn a

  • @haingoc1825
    @haingoc1825 4 года назад

    anh ơi video hay lắm ạ. em muốn theo a học được không ạ

    • @EasyFrontend
      @EasyFrontend  4 года назад

      Yeahhh cảm ơn em nhiều nhé Hải 😍
      Về việc theo anh học, ý là sao em hen? 🙂

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

    hiện tại anh làm cty nào vậy anh?

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

      hi Tuấn, a hiện đang làm cho một cty bên mảng crypto currency em nha 😉

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

    2/7/2021 hiện tại link tài liệu a share đã die
    :(

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

      hi Thành, ý em là link nào vậy e hen?

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

      @@EasyFrontend dạ Medium.com đó ạ

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

      @@thanhnguyvan820 à haha, chắc ở VN bị chặn á em =)))

  • @gin.sonlam
    @gin.sonlam 4 года назад

    Hi anh, có thể cho em hỏi về container / component khi so với atomic design được không ạ.
    Hiện tại em dùng theo kiểu atomic và thấy container tương đương page và component tương đương template, template thì sẽ gọp các mục từ organisms > molecules > atoms lại.
    Em thấy cách chia này điểm lợi là sẽ chia nhỏ thiệt nhỏ, có thể tái sử dụng nhưng mà em cảm giác có vẻ hơi bị rối.
    Anh cho em vài góp ý nha, em có nên tiếp tục dùng không hay chuyển qua container / component cho đơn giản bớt ạ.
    Cám ơn anh!

    • @EasyFrontend
      @EasyFrontend  4 года назад

      hi Lâm ơi, thật sự là mình cũng chưa làm cách mà Lâm nói nên cũng ko có kinh nghiệm thực tế để so sánh 🙂 Nhưng với container/component thì mình thấy đủ rồi nè, và thẩm chỉ thỉnh thoảng nó cũng đã đủ rối 😅

    • @gin.sonlam
      @gin.sonlam 4 года назад

      @@EasyFrontend Tuy chưa so sánh nhiều nhưng qua chia sẻ của anh thì chắc em phải đơn giản project bớt đi.
      Thực sự thì anh dạy khá hay, dễ hiểu và rất đúng trọng tâm mà ít người đề cập đến :3
      Cám ơn anh, hi vọng anh ra nhiều clip thêm xD

    • @EasyFrontend
      @EasyFrontend  4 года назад

      hihi rất vui khi chia sẻ của anh có thể giúp được chút ít gì đó cho em nè, hi vọng sẽ tiếp tục trao đổi với em ở những video tiếp theo nha 🙂

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

    like

  • @telutv4763
    @telutv4763 4 года назад

    ồ cuối cùng cũng tìm được a
    em muốn học react , khi em search youtube học react thì nó toàn cái cũ đã bị thay đổi. Giờ không tương thích nữa. Bây giờ a có học liệu react đầy đỷ ko cho em xin với (mail : cuphong2003hk@gmail.com). EM rất thích video của a. Giờ a cố gắng ra đầy đủ nhất về react nhé.

    • @EasyFrontend
      @EasyFrontend  4 года назад

      hi em, cảm ơn em rất nhiều nhé 😉 Hiện thì anh hk có trọn bộ về reactjs nè, chỉ có mấy videos trên RUclips thôi nè 🙂 Hiện anh đang làm mấy cái project thực tế vs mn, để mn có thể học được nhiều thứ hơn 😉

    • @telutv4763
      @telutv4763 4 года назад

      @@EasyFrontend dạ. em xin nhạc intro với ạ

  •  4 года назад

    Thanks

    • @EasyFrontend
      @EasyFrontend  4 года назад +1

      Phạm Ngọc Tưởng Cảm ơn bạn nhé!