Hướng dẫn React + Redux Toolkit - Phần 1

preview_player
Показать описание
😎 Mình là Duy (Daniel), qua video này chúng ta sẽ học thêm về React cũng như Redux Toolkit. Sau video này, chúng ta sẽ được hiểu thêm về sự hữu ích của Components trong React, tạo store trong Redux Toolkit, xử lý bất đồng bộ trong Redux Toolkit để tạo 1 cái blog dựa trên Reddit nhé :D Đây chỉ là phần 1 của series này th, sẽ là 1 project hoàn thiện trong tương lai :D

😎 Part 2:

Hướng dẫn React cơ bản 2021:

🧠 Tài liệu hữu ích:

😎 Extensions mình xài trong video (IDE: VS Code):
- Simple React Snippets (auto import cho React)
- Prettier (Code Formatter để code nhìn thẳng hàng ngay ngắn)
- Night Owl (No italics) (VS Code theme)

Mốc thời gian:
0:00 - Lời mở đầu phần 1
0:36 - Giới thiệu project (Part 1+2)
3:21 - Setup React
11:25 - Inline CSS style trong React
14:20 - Ẩn/hiện Edit Component
18:35 - Bắt đầu style Edit Component
31:21 - Sử dụng onChange cho input
33:49 - Lấy URL của ảnh thông qua OnClick
36:30 - Tạo Input Component để tái sử dụng
49:00 - Sử dụng onSubmit cho form
51:08 - Bắt đầu Redux/ Redux Toolkit
52:34 - Tại sao lại dùng Redux?
52:50 - Cách tạo store trong Redux Toolkit
54:29 - Tạo Slice trong Redux Toolkit
56:28 - Reducers
58:00 - State vs action
1:03:10 - Provider
1:04:41 - useSelector()
1:10:37 - useDispatch()
1:12:35 - Redux Extension
1:20:00 - Tạo server
1:23:43 - Xử lý bất đồng bộ thông qua Redux Toolkit
1:34:20 - Hiển thị Loading + Error
1:39:28 - Lời kết phần 1

👽 Liên hệ với mình tại:
Рекомендации по теме
Комментарии
Автор

//App.css
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.App{
  display: flex;
  flex-direction: column;
}

body, .App {
  min-height: 100vh;
  margin: 0;
  text-align: left;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  font-size: 1.15rem;
  font-family: "Noto Sans", sans-serif;
  background-color: #0c0c0c;
  color:white;
}
.loading{
  color:white;
  text-align: center;
}
.error {
  color:rgb(255, 56, 56);
  text-align: center;
}


//edit.css
.edit-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #0c0c0c;
    height: 100vh;
  }
  .close {
    background-color: transparent;
    border: none;
    align-self: end;
    margin: 1rem 1.15rem 0 0;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    color: rgb(41, 128, 243);
  }
  .input-container {
    width: 80%;
    font-size: 1rem;
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
  }
  .input-container > input {
    margin: 1rem 0 1rem 0;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    background-color: #505050;
    border: none;
    border-radius: 4px;
    color: white;
  }
  .input-container > textarea{
    padding: 0.25rem 0.5rem 4rem 0.5rem;
    height: 100px;
    background-color: #505050;
    border: none;
    border-radius: 4px;
    color: white;
    margin: 1rem 0 1rem 0;
    text-align: start;
    font-family: "Noto Sans", sans-serif;
  }
  .input-image-container {
    flex-wrap: wrap;
  }
 
  label:nth-child(7) {
    margin-bottom: 1rem;
  }
 
  .input-image {
    cursor: pointer;
    border-radius: 14px;
    background-color: white;
    padding: 0.5rem;
    width: 90px;
    margin-right: 1rem;
    margin-bottom: 2rem;
    height: 130px;
    object-fit: cover;
    overflow: hidden;
  }
 
  .theme-container {
      display: flex;
      align-items:center;
      margin-bottom: 3rem;
  }
 
  .theme-container > label {
      margin-right: 5rem;
  }


//header.css
header {
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .info-edit{
      cursor: pointer;
      align-self: flex-end;
      border:2px solid white;
      margin: 1rem 1.15rem 0 0;
      padding: 0.45rem;
      border-radius: 16px;
      font-weight: 700;
      font-size: 1rem;
  }
 
 
  .info-container {
    display: flex;
    flex-direction: column;
    text-align: start;
    padding-left: 2rem;
    color: white;
  }
  .info-username {
    width: 50%;
    font-weight: 700;
    margin-bottom: 0.5rem;
  }
  .info-age, .info-about {
      font-size:0.85rem;
      margin-bottom: 0.5rem;
  }
 
  .info-ava {
    width: 85px;
    height: 130px;
    object-fit: cover;
    overflow: hidden;
  }

DanielTruongDev
Автор

Link avatar trong clip cho bạn nào muốn xài nhe:

DanielTruongDev
Автор

Cảm ơn anh đã giới thiệu redux, em đã phần nào hiểu được cách dùng rồi ...tuyệt vời quá á ứng dụng dễ thương xem lại 5 lần để hiểu hơn

Eatkakamy
Автор

cảm ơn em, em có kỹ năng giảng dạy tuyệt vời! chúc em năm mới khỏe mạnh thành công!

leminhcanh
Автор

Lớn hơn ông 1 tuổi nhưng công nhận ông giỏi quá. Cảm ơn ông vì đã chia sẽ nhưng dự án cơ bản rất hay như vậy!

locvd
Автор

em thường coi video của a, rất dễ hiểu ạ, mong a ra nhiều video về reactJS hơn :3

yashainu
Автор

vừa code vừa giải thích hay quá bạn ơi, niceee

tuannguyenthanh
Автор

Cảm ơn em rất nhiều về clip này, đúng cái a đang cần, mong e sẽ làm thật nhiều project về ReactJs, rất cảm ơn e

unclefivefootball
Автор

rất hay, mong b làm thêm hướng dẫn về RTK query trong redux

namhoai
Автор

nếu tạo giá trị ban đầu trong initialState với giá trị là 1 mảng rỗng [] thì sao khi mình console.log giá trị đó ra nó lại không ra giá trị là mảng rỗng nhỉ

haivu-fyvu
Автор

rất ủng hộ bạn, mong bạn ra nhiều video hơn nữa nhé!!!

studdev
Автор

anh ơi bây giờ học phần 1 này thì oke k ạ
Em sợ nó update lên nhiều cái khác với video này ạ

Dkid
Автор

Đoạn 1:00:44 phần export userSlice.actions, cái actions là mặc định khi xuất các reducers mình sẽ kèm theo phải k b

nlatui
Автор

+1 hữu ích mong bạn ra thêm nhiều video nữa nhé

jasonpham
Автор

siêu dễ hiểu luôn anh, I love you 3000.

ucvinhhoang
Автор

Cảm ơn bạn nhiều. Bạn làm video rất hay và dễ hiểu

phuvo
Автор

Để e cày 2 video trc của anh mới hiểu đc video này ạ:))))

phamcongtoan
Автор

bạn có thể làm thêm video về redux saga dc ko ạ, hoặc project sử dụng nó đi ạ

viewvue
Автор

hay lắm anh, dể hiểu. mong anh ra video mới .

ngocphuchuynh
Автор

em coi của anh 3 lần rồi ko hiểu. sao khi làm dự án dùng context giờ xem lại hiểu :))) dị có chậm tiêu ko anh

duoctran