React Cơ bản ( React Router, React Context, UseState, UseEffect, UseNavigate, Axios,…)

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

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

  • @DanielTruongDev
    @DanielTruongDev  3 года назад +5

    // App.css
    *,
    *::before,
    *::after {
    box-sizing: border-box;
    padding:0;
    margin: 0;
    }
    body {
    background-color: #fae1dd;
    min-height: 100vh;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    padding:1rem 2rem 1rem 2rem;
    font-size:1.25rem;
    letter-spacing: 0.15rem;
    font-family: 'Inter', sans-serif;
    }
    .page-container{
    display:flex;
    justify-content:center;
    height: 100vh;
    }
    // dogs.css
    .dogs-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 4rem;
    text-align: center;
    }
    .dogs {
    background-color: #d8e2dc;
    padding: 1rem;
    border-radius: 14px;
    width: 350px;
    height: 450px;
    margin-bottom: 1.5rem;
    display: grid;
    align-items: center;
    grid-template-areas:
    "img info"
    "img info"
    "desc desc"
    "price price"
    "btn btn";
    }
    .dogs-info {
    grid-area: info;
    }
    .dogs-img-container {
    grid-area: img;
    width: 150px;
    height: 150px;
    overflow: hidden;
    }
    .dogs-desc {
    grid-area: desc;
    }
    .dogs-price {
    font-weight: 700;
    margin: 1rem 0 1rem 0;
    grid-area: price;
    }
    .dogs-btn {
    padding: 0.35rem;
    border-radius: 14px;
    cursor: pointer;
    background-color: #e8e8e4;
    grid-area: btn;
    border: none;
    font-size: 1.25rem;
    transition: 100ms ease-in-out;
    }
    .dogs-btn-disabled {
    padding: 0.35rem;
    border-radius: 14px;
    background-color: #94d2bd;
    grid-area: btn;
    border: none;
    font-size: 1.25rem;
    transition: 100ms ease-in-out;
    }
    .dogs-btn:hover {
    background-color: #0a9396;
    color: white;
    }
    .dog-img {
    width: 100%;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    }
    //cart.css
    .cart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    }
    .cart-items {
    text-align: center;
    margin-top: 4rem;
    background-color: #f8f9fa;
    box-shadow: 0px 0px 15px 5px #fec5bb;
    border-radius: 14px;
    font-size: 1.5rem;
    padding: 2rem;
    }
    .cart-item {
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
    }
    .cart-header {
    font-size: 2rem;
    font-weight: 800;
    }
    .cart-item-img {
    border-radius: 50%;
    object-fit: cover;
    width: 70px;
    height: 70px;
    margin: 0rem 2rem 0 0;
    }
    .cart-total {
    font-weight: 800;
    }
    .cart-checkout {
    border: none;
    background-color: #fec5bb;
    border-radius: 14px;
    padding: 1rem;
    margin-top: 2rem;
    cursor: pointer;
    font-size: 1.5rem;
    transition:200ms ease-in-out;
    }
    .cart-checkout:hover, .cart-gohome:hover{
    background-color: #ff8fa3;
    }
    .cart-gohome {
    border: none;
    background-color: white;
    border-radius: 14px;
    padding: 1rem;
    margin-top: 2rem;
    cursor: pointer;
    font-size: 1rem;
    transition:200ms ease-in-out;
    }

  • @luminshz
    @luminshz 4 месяца назад

    Công nhận anh dạy dễ hiểu thật. Em từ Backend qua giờ muốn học thêm React để làm Fullstack mà còn quá nhiều khái niệm mới đối với em mà em nghe anh giảng thấy vô đầu hẳn luôn. Chúc anh luôn thành công trong cuộc sống ạ!

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

    Thích giọng Nam và phong cách nói rất chuẩn tự nhiên, hay. Cám ơn!

  • @kienthuc5phut97
    @kienthuc5phut97 11 месяцев назад

    Cám ơn bạn, phải công nhận giữa người có mục đích dạy thật và mục đích kiếm học viên khác nhau hoàn toàn, mình coi mấy kênh khác nói vòng vo cuối cùng k hiểu gì luôn, xem kênh bạn đi thẳng vấn đề nhanh gọn!

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

    bạn dạy hay quá , dễ hiểu thực sự , mình xem nhiều kênh mà tìm mãi được kênh thực chiến như vậy thank pro

  • @nguyenquangtienk16dn9
    @nguyenquangtienk16dn9 3 месяца назад

    Trời ơi giá như biết sớm hơn các video về React của anh thì em đã không rớt môn :(((

  • @VuNguyen-lh1rd
    @VuNguyen-lh1rd 2 года назад +2

    Thề anh dạy cực dễ hiểu, chứ em xem ở các kênh lớn khác, lý thuyết nhiều nên kh đọng lại gì trong đầu, xem của a phát hiểu ngay vấn đề.

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

    hi vọng anh ra thêm mấy khóa node vs nextjs với công nghệ cho tương lai

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

    Lần đầu e mới xem a mà em thấy hay dễ hiểu nữa cảm ơn anh. Mong anh sẽ ra nhiều video mới nữa

  • @Lalakids-khamphacungbe
    @Lalakids-khamphacungbe 8 месяцев назад

    thank pro. I learn a lot from you. You are mastering reactjs

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

    Quá đẳng cấp bạn ơi học được từ bạn rất nhiều. Tks u !

  • @hoanghuy.trannn
    @hoanghuy.trannn 2 года назад

    Coi rất dễ hiểu và thực tế, đã ấn sub kênh của bạn liền luôn :>. Cảm ơn bạn đã chia sẻ kiến thức.

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

    anh day rat de hieu a.Cam on anh Duy rat nhieu. Em thich coi cac video cua anh. Anh oi, bao gio ranh anh ra video day ve backend voi cac du an mongDB, PostgreSQL di anh
    ah, voi ca anh day them ve cach su dung AWS Lambda nua nhe!

  • @21.obuiphuonglinh78
    @21.obuiphuonglinh78 3 года назад

    bạn nói rất hay và dễ hiểu
    mặc dù mình không hiểu gì nhưng sẽ support kênh của bạn ạ 😇

  • @K.Huynh.
    @K.Huynh. 2 года назад

    Em cảm ơn anh rất nhiều.
    qua em có gặp lỗi mà được anh hỗ trợ rất tận tình.

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

    dù đã học rồi nhưng xem lại thì vẫn cuốn, video bạn làm hay lắm :v

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

    rất hay cảm ơn bạn

  • @vutrungquan782
    @vutrungquan782 Месяц назад

    Em ko thấy phần fe trong github ạ anh xem lại giúp em với

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

    Dạ anh dạy hay quá ạ! Em cũng mới bắt đầu học React, coi video này dễ hiểu ạ

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

    ban day de hieu qua ban,ban lam them video ve React duoc khong

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

    có 1 vấn đề là từ trang mycart chuyển sang dogs thì button added nó chuyển sang lại add to cart. có cách nào giải quyết không ạ

  • @bachkhoait4.052
    @bachkhoait4.052 3 года назад

    Bạn dạy rất dễ hiểu . Đã ấn like đăng kí để ủng hộ , mong bạn sớm ra những video tiếp theo
    from lào cai

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

    Cực dễ hiểu lun . Mong bạn ra thêm nhiều video hơn nữa ạ 👍👍

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

    anh cho em hỏi cách xem folder frontend trên repo ạ

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

    hay và dễ hiểu à mong anh có thể ra video nhiều hơn , hướng dẫn cách dùng redux thì tốt quá ạ em học mãi mà vẫn mơ hồ về redux

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

      nó tương tự cái React Context á em, để có gì anh làm video về Redux, Redux tool kit

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

    Hay quá anh

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

    Thấy anh post bài trên group Cộng đồng sinh viên IT em vào thả like để lưu lại mấy hôm nữa chứ chuẩn bị thi giữa kì chưa xem được ngay

  • @DuyAnh-xz8dm
    @DuyAnh-xz8dm 2 года назад

    Cảm ơn bạn video rất bổ ích

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

    Rất dễ hiểu ạ, em cảm ơn anh

  • @HuongLe-gj4mt
    @HuongLe-gj4mt 2 года назад

    anh ơi link git của anh folder frontend em thấy trống, anh update lại được ko ạ :((

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

    anh để vid lên 2k được không tại em thấy vid cua anh 1080p mà nó cứ như 480p á

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

    A zai có thời gian làm hẳn series nodejs vs reactjs đi ạ

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

    Anh có thể up lại link github k ? phần fronend không có ? tiện thể cho hỏi tý em gặp lỗi này mà k biết giải quyết sao cả Uncaught TypeError: Cannot read properties of undefined (reading 'map')

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

    Làm về Mutil layout với v6 này đi bạn

  • @Hehe-xq5sn
    @Hehe-xq5sn 2 года назад

    ví dụ muốn add sp vào card nhưng mà muốn xóa đi sp thì xử lý ntn ạ

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

      lấy cái id của dogs xong slice cái id đấy đi thôi

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

    *Thanks a .Bổ ích*

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

    41:31 lm kiểu j để nó chia ra dòng nhanh thế mn

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

    E ơi chỗ lấy data từ backend sao chị làm như e hướng dẫn mà bị lỗi này: '"Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
    - options.allowedHosts[0] should be a non-empty string." E xem fix giùm chị với. Thanks e đã ra những video chị xem rất hay và dễ hiểu!

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

      chị vào Discord hỏi cho tiện nha

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

      @@DanielTruongDev chị vào gửi câu hỏi rồi mà ko biết tạo có đúng ko nữa vì lần đầu chị biết cái discord này

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

    Mong anh làm vuejs với expressjs

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

    Quality

  • @NamNguyen-qp1gk
    @NamNguyen-qp1gk 3 года назад

    Chào bạn,bài rất hay.nhưng link git bị lỗi phải kh nhỉ,mình vào để lấy init dog mà kh vào đc

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

      à để mình sứa lại link github, thanks b

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

    Phần cuối ....xin chào tạm biệt á...chỉnh lại ....do tiếng chạy trc hình...khắc phục trong video sau nhé

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

    anh học trường gì vậy ạ

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

    cho ban 1 sub ne , yeu yeu

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

    hi bạn,
    mình đã add "proxy": "localhost:8080" vào package.json những vẫn lỗi settle.js:19 Uncaught (in promise) AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
    nhờ bạn chỉ giáo giùm, tks

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

      mình cũng bị lỗi này. Ko biết fix kiểu sao nhỉ. Bạn fix được chưa

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

      @@KuNhiRonaldo b thử xóa folder backend của b đi xong cop nguyên folder backend của a vào xem sao, lúc đầu tôi cũng vừa xem vừa làm theo cũng bị lỗi như thế xong cop của anh vào thì hết lỗi

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

      @@vietlinh1219 cảm ơn bạn. Mình làm đc rồi nha

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

      @@vietlinh1219 cảm ơn bạn nhé, nếu có ai biết được lý do tại sao cop folder backend của daniel hết lỗi thì mọi người chỉ giúp với nha