KHOÁ HỌC LẬP TRÌNH MERN STACK 100% DỰ ÁN THỰC TẾ & CHẤT LƯỢNG

KHOÁ HỌC NÀY PHÙ HỢP VỚI NHỮNG AI?​

Bất kỳ ai có kiến thức cơ bản về lập trình là đều có thể học được khoá này, bởi vì mình sẽ dạy các bạn rất đầy đủ, chi tiết và cẩn thận mọi thứ, cùng code với các bạn từ những dòng code đầu tiên của dự án.

Tuy nhiên mình vẫn recommend các bạn đã học qua HTML – CSS – Javascript cơ bản, như vậy thì đỡ vất vả hơn cho các bạn. Còn Node.js, ReactJS hay MongoDB các thứ…vv thì cứ yên tâm vì mình sẽ có cách dạy thực tế rất thú vị cho các bạn nhé!

mern-stack-trungquandev-youtube-thumnail-awesome-course

NHỮNG GÌ BẠN SẼ HỌC ĐƯỢC TỪ KHOÁ HỌC NÀY

react-icon-trungquandev

ReactJS * Front-end

Các bạn sẽ được mình hướng dẫn phân tích, xây dựng và triển khai giao diện ứng dụng từ những dòng code đầu tiên.
Sử dụng các kỹ thuật lập trình Javascript, ReactJS, React Hooks, React Router, Redux, React Hook Form, Bootstrap, SCSS...vv
Cách tìm và đọc tài liệu, lựa chọn những công nghệ, thư viện cho dự án. Học được cách Design Pattern tổ chức thư mục dự án tối ưu, dễ bảo trì, Clean Code...vv

mongodb-icon-trungquandev

MongoDB * Database

Các bạn sẽ được học cách phân tích một bài toán business tính năng của một ứng dụng cụ thể, từ đó thiết kế ra Database Schema. Rồi áp dụng và triển khai với cơ sở dữ liệu MongoDB.
Khi làm việc với MongoDB, mình sẽ hướng dẫn các bạn cách sử dụng MongoDB Native Driver NodeJS thay vì Mongoose hay bất kỳ một ODM nào khác, vì vậy nên các bạn sẽ nắm được những khái niệm, từ khóa, kiến thức chuẩn của MongoDB nhé.
Ngoài ra, các bạn sẽ còn được học cách quản lý trực tiếp Database với MongoDB Cluster Cloud Platform, hoặc cài đặt MongoDB ở local nếu bạn muốn....vv

github-icon-trungquandev

Github Teamwork chuyên nghiệp

Github đã rất nổi tiếng rồi, nó được sử dụng rộng rãi bởi rất nhiều các công ty, nhưng đối với những bạn mới bắt đầu tìm hiểu về nó thì sẽ khá bối rối không biết làm như nào cho đúng.
Hiểu được những điều này nên trong nội dung khoá học, các bạn cũng sẽ được mình hướng dẫn thao tác, xử lý code với Git - Github như là đang làm dự án Teamwork thực tế nhé.

logo-trungquandev-white-bg-192x192

22 videos bài giảng FREE nhưng cực kỳ chất lượng

Với 22 videos miễn phí mà mình up lên youtube, các bạn có thể trải nghiệm & cảm nhận cách dạy học cực kỳ chi tiết và cẩn thận của mình. Đồng thời, tuy là miễn phí nhưng mình tự tin đảm bảo 22 videos này hoàn toàn có chất lượng hơn hẳn nhiều khoá hiện tại trên mạng, kể cả là những khoá có phí. (Link mình sẽ để ở phần giáo trình bên dưới)

nodejs-icon-trungquandev

Node.js * Back-end

Các bạn sẽ nắm được RESTful API là gì và cách để tạo ra chúng với Framework ExpressJS của NodeJS. Mình cũng sẽ hướng dẫn các bạn rất tỉ mỉ và cẩn thận từ A-Z, từ những dòng code đầu tiên khi bắt đầu khởi tạo cho tới khi kết thúc dự án.
Các bạn sẽ hiểu được bản chất luồng chạy của một API từ đâu tới đâu cũng như cách để triển khai, debug (gỡ lỗi) chúng, đây đều là những kỹ năng mà bất kỳ lập trình viên nào cũng phải nắm được...vv

Xử lý Real-time thời gian thực

Riêng với đặc thù dự án trong khoá học này là ứng dụng quản lý công việc tương tự Trello, nên vì thế mà mình cũng sẽ hướng dẫn cho các bạn cách để tạo ra một ứng dụng có tính năng Real-time thời gian thực nhé.
Cụ thể hơn về tính năng này cho những bạn nào chưa trải nghiệm Trello đó là:
- Khi các bạn thao tác chỉnh sửa, kéo thả các columns, cards thì những người đang online trực tuyến trong cùng board đều có thể thấy được sự thay đổi ngay lập tức mà không cần phải reload lại trang web hay thực hiện bất kỳ một hành động nào khác.

Kinh nghiệm đi làm lập trình dự án thực tế

Rất nhiều kỹ năng chuyên nghiệp và thực tiễn sẽ được mình áp dụng vào khoá học này.
Những gì mình list ra ở trang giới thiệu này là có giới hạn nên các bạn hãy phần nào trải nghiệm những gì mình nói để cảm nhận hơn nữa thông qua 22 videos bài giảng miễn phí trên kênh youtube Trungquandev Official của mình nhé. (Link mình sẽ để ở phần giáo trình bên dưới)

logo-trungquandev-white-bg-192x192

Học Online trực tiếp với mình

Sau khi học xong khoá Start MERN Stack với 22 videos miễn phí, các bạn có thể liên hệ với mình nếu muốn đăng ký học khoá MERN Stack nâng cao nhé. Khoá này mình sẽ mở lớp dạy Online trực tiếp, có test đầu vào cũng như giới hạn số lượng học viên để đảm bảo chất lượng đầu ra. Mình sẽ không nhận dạy đại trà. Để biết thêm thông tin các bạn kéo xuống phía dưới xem tiếp nha.

NỘI DUNG KHOÁ START MERN STACK (22 VIDEOS MIỄN PHÍ)

Dưới đây là outline giáo trình của 22 video miễn phí nhưng cực kỳ nhiều kiến thức chất lượng. Và cho dù mình có nói bao nhiêu đi chăng nữa thì cũng không thể bằng được việc các bạn hãy tự học và trải nghiệm hết khóa nha. 

Lưu ý quan trọng: Việc học khoá Start MERN Stack này cũng là yêu cầu bắt buộc đối với bạn nào muốn học khoá nâng cao trực tiếp với mình nhé, mình sẽ nói rõ hơn ở phần nội dung khoá nâng cao phía dưới.

* Cài đặt các môi trường, Node.JS, Npm, Yarn, quản lý các version Node với NVM.

* Init Project với Create-react-app, xoá bỏ những file không cần thiết, cài đặt node-sass, viết Hello World & run ứng dụng

* Tạo repo trên Github, add Remote vào project, push code lên Github đúng chuẩn.

* Code khung giao diện Trello cơ bản.

* HTML, CSS, JS, SCSS…vv

* Tách nhỏ code thành các Components chuẩn.

* Xử lý Relative Imports

* Cách đặt tên file code sao cho clean, dễ maintain…vv

* Tạo một file dữ liệu mẫu để render vào React Code.

* Xử lý Audit Fix, cài đặt Lodash.

* Kỹ thuật Sort nâng cao – sắp xếp một Array dựa trên một Array khác.

* Cấu hình Eslint cho dự án.

* React-beautiful-dnd vs React-smooth-dnd

* Xử lý State trong React Hook (useState)

* Xử lý State data sau khi kéo thả elements.

* Thao tác data qua lại giữa Parent Component & Child Component. (State & Props)

* Tổng quan về Redux và lý do sử dụng Redux.

* Implement react-bootstrap (react-bootstrap là gì, sử dụng nó để xử lý phần nào Responsive với Container, Col, Row…vv)

* Add new column & các kỹ thuật Javascript xử lý dữ liệu.

* Update & Remove Column.

* Kỹ thuật xử lý Inline Editor

* Html-react-parser, Bootstrap Modal, Bootstrap Dropdown…vv

* Add new Card.

* Xử lý Clone chuẩn một Object với Lodash.

* Khởi tạo ứng dụng Node.js và cấu trúc thư mục chuẩn.

* Quản lý phiên bản Node.js với NVM

* Cài đặt Eslint, cấu hình file .gitignore

* Babel là gì và lý do vì sao mình lựa chọn sử dụng Babel?

* Cài đặt và sử dụng nodemon

* Viết các lệnh script build code ở môi trường dev, môi trường production.

* Xử lý Relative Import cho project Node.js

* So sánh nhanh MongoDB Native Driver với Mongoose

* Tạo tài khoản và cấu hình cơ sở dữ liệu trên MongoDB Cluster Cloud.

* Viết code cấu hình Connect Database & List các Databases.

* Pattern xử lý biến môi trường ENV chuẩn trong Node.JS

* Code Pattern Connect Database chuẩn.

* Design – thiết kế Database Schema

* Validate các Schema

* Viết function tạo mới bản ghi vào MongoDB Cluster Database

* RESTful API code flow.

* API tạo mới Board.

* Create Column – MongoDB insertOne({…})

* Update / Delete Column – MongoDB findOneAndUpdate({…})

* Create new Card

* Viết API get Board theo id và toàn bộ Columns cũng như Cards bên trong Board đó.

* Join trong MongoDB :)))

* Hiểu về MongoDB ObjectID vs String ID

* MongoDB aggregate, $lookup, $push, $match, toArray, to String…vv

* Handle logic data, cấu trúc dữ liệu và giải thuật.

* Cài đặt và sử dụng axios, config API_ROOT

* Xử lý CORS trong dự án Node.js, config WHITELIST_DOMAINS

* Ghép api (Back-end) vào project React app (Front-end)

* Cài đặt và sử dụng Lodash cho project Node.js

* Ghép các API: Create new column, create new card, update column, delete column.

* Rất nhiều kỹ thuật xử lý data nâng cao trong bài này.

* Ghép các API xử lý việc kéo thả Column và Card trong Board.

* Trường hợp update data bị lỗi thì UI sẽ xử lý sao cho ứng dụng vẫn chạy mượt mà.

* Kinh nghiệm tối ưu việc xử lý data, tối ưu việc gọi API để ứng dụng chạy nhanh hơn.

* Code giao diện cho 2 thanh App BarBoard Bar

* Deploy ReactJS Front-end lên Firebase của Google (Free version)

* Deploy Node.js Back-end lên Heroku (Free version)

* Rất nhiều kỹ năng xử lý các vấn đề gặp phải khi deploy ứng dụng sẽ được mình hướng dẫn trong bài giảng này.

* Tại thời điểm hiện tại mình xuất bản bài giảng này thì gói package MongoDB Node Driver đã được tác giả update lên phiên bản mới nhất (4.1.2), nên trong quá trình học, có thể một số bạn chưa biết cách xử lý những vấn đề phát sinh khác với phiên bản MongoDB (3.6.6) mà mình hướng dẫn ở những video trước.

* Vì vậy mình quyết định bổ sung thêm video số 21 này để hướng dẫn các bạn cách cập nhật phiên bản MongoDB Node Driver trong dự án cũng như kinh nghiệm xử lý những vấn đề phát sinh sau quá trình cập nhật nhé.

* Bài này mình sẽ hướng dẫn các bạn cập nhật ReactJS lên phiên bản mới nhất là 18 cũng như cập nhật toàn bộ các thư viện khác lên version mới nhất ở cả 2 con dự án FE web và BE api nhé.

* Và dĩ nhiên là chúng ta sẽ xử lý các vấn đề phát sinh đối với phiên bản mới nha, ví dụ một vài thứ như:

+ Automatic batching for fewer renders in React 18

+ node-sass error – update to sass

+ autoprefixer: Replace color-adjust to print-color-adjust

+ …vv

 
 
 
 

Link tới khoá Start MERN Stack – Trungquandev

Các bạn nhớ đăng ký kênh và bật thông báo để không bỏ lỡ những video chất lượng nào của mình ra trong tương lai nha ^^

– – – – 

Youtube playlist: MERN Stack – Coding Trello app from scratch by TRUNGQUANDEV

– – – – 

NỘI DUNG KHOÁ MERN STACK NÂNG CAO​

Ở khoá MERN Stack nâng cao này, các bạn sẽ được học Online trực tuyến với mình, một lớp mình chỉ nhận tối đa 7-10 học viên (hoặc ít hơn) để có thể support các bạn tốt nhất, đảm bảo chất lượng đầu ra. Không lãng phí tiền của các bạn.

 

Về điều kiện để học thì có 3 cái quan trọng này nha:

1.  Các bạn phải hoàn thành 22 videos đầu tiên trong khoá Start MERN Stack bên trên nhé, bởi vì khóa nâng cao mình sẽ dạy base trên khóa đó, cũng như học xong nó thì các bạn sẽ có một lượng kiến thức nền tảng tốt thì mới có thể theo được khóa nâng cao trực tiếp này với mình. Vì học nâng cao này là mình sẽ dạy các bạn “Kỹ năng và kinh nghiệm thực tế để đi làm” nha.

2. Bạn cần phải có ít nhất 2 màn hình, (có là thể một laptop cắm một màn hình rời vào, hoặc 2 laptop, 2 máy tính tùy điều kiện) nhưng phải chắc chắn có 2 màn hình. Bởi vì trong mỗi buổi học, mình sẽ code và các bạn cũng sẽ code theo mình theo hình thức cầm tay chỉ việc, chúng ta sẽ cùng nhau code, hoàn thiện tính năng ngay trong buổi học online luôn nhé.

3. Tinh thần chăm chỉ và nghiêm túc học, mình không yêu cầu các bạn phải là người quá giỏi hay có học lực phải ở dạng top gì cả, chỉ cần các bạn thực sự kiên trì và chăm chỉ là được.
Mình sẽ dạy và theo sát tất cả các bạn để đảm bảo không một ai bị rớt lại. Và mình có thể tự tin nói rằng học xong khóa nâng cao này, các bạn có thể thoải mái apply ứng tuyển vào các công ty cho các vị trí Fresher hoặc Intern (tùy thời gian đi làm Full-time hay Part-time mà các bạn có thể đáp ứng cho công ty nhé) 

 

Video demo chi tiết thành quả ứng dụng ở đây: (các bạn nên xem video này trước hoặc vừa xem vừa kết hợp đọc giáo trình này nhé)

Về Nội dung giáo trình sẽ lần lượt như sau:

(Mình đã cố gắng liệt kê tối giản nhất nhưng vẫn đảm bảo đầy đủ nội dung nha, nếu muốn hiểu kỹ hơn thì hãy xem video giới thiệu của mình ở trên nha, vì khi dạy học, có nhiều kinh nghiệm thực tế như tối ưu, tối giản code, cấu trúc cũng như sử dụng code sao cho hợp lý, những thứ kinh nghiệm này khó mà viết hết vào nội dung bên dưới được.)

 

* Refactor lại cấu trúc code cho phần ColumnCard để dễ quản lý và bảo trì (maintain) code.

 

* Tối ưu tốc độ cho ứng dụng web bằng cách hạn chế Re-render các components không cần thiết trong một Page.

– Phân tích và nắm được bản chất các kỹ thuật liên quan: React Memo, Lodash CloneDeep, Javascript Spread operator…vv

 

 *  Triển khai áp dụng Redux và Redux Toolkit vào dự án để quản lý các dữ liệu Global States

– Cấu hình Store với Redux Toolkit

Khác khái niệm quan trọng: createSlice, initialStates, reducers, extraReducers, actions, selectors, createAsyncThunk

Đưa toàn bộ dữ liệu một Board cụ thể vào trong Redux.

 

* Full tính năng authen người dùng: RegisterLoginLogout – Lưu thông tin user vào Redux Store, xử lý JWT tokens…vv

Cấu hình các tuyến đường (routers) với React-Router-DOM như: /login, /register, /404…vv

– Áp dụng React-Hook-Form vào dự án và tạo Form đăng ký người dùng

– Validate dữ liệu Form phía client trước khi gọi API

– Sửa lại phần gọi API từ Client, hiển thị thông báo success hoặc errors với React-Toastify

Viết một file cấu hình Axios chuẩn thực tế, tạo mới axios instance, sử dụng các Interceptors request và response

– Viết code Catch lỗi một lần cho toàn bộ các APIs với Axios (những cái như này là kinh nghiệm code rất hay nè)

– Cấu hình accept những mã success và mã lỗi với  ValidateStatus trong axios, support hỗ trợ redirect status 302 từ phía Backend

Xử lý vụ call api nhiều lần nếu người dùng cố tình click nhanh bất kỳ một button nào đó. (Kỹ thuật này rất hay, tận dụng axios interceptors kết hợp một trick CSS đặc biệt mà không cần phải dùng tới JS Debounce)

 

* Viết API register đăng ký người dùng phía Back-end

Tạo Model Users trong MongoDB, default random token để gửi mail cho user xác nhận account.

– Cấu hình BUILD_MODE trong dự án cho dev production (như dự án thực tế), mục đích để hỗ trợ việc call api từ cả hai nơi là postman và từ Web App (ReactJS)
Cập nhật script build & run (deploy) code ở phía API (cho đầy đủ các môi trường code như MacOS, Linux, Windows)

– Validate dữ liệu nâng cao cũng như Custom validation message với Joi

– Hash Password trước khi lưu vào Database

– Cách Pick Object để chọn lọc dữ liệu trả về bằng 2 cách: Lodash hoặc Javascript thuần (với JS thuần sẽ khá hack não nhưng đảm bảo hay :D)

 

* Tính năng Gửi mail cho user xác nhận account xong thì mới cho phép đăng nhập

– Viết một Provider riêng cho nhiệm vụ gửi mail trong NodeJS với OAuth2 Nodemailer, dùng service Gmail của Google

– Tạo verification link với đúng website domain theo từng môi trường dev/production, gán vào email để gửi đi.

– Viết API verify người dùng

– Phía Front-end sẽ tạo một route tương ứng với link nhận được từ email và xử lý logic để gửi api xác thực sang phía Back-end

– Tạo một component Loading dùng chung cho tất cả mọi chỗ ở phía Front-end.

 

* Tạo Form đăng nhập phía Front-end

* Viết API xác thực đăng nhập phía Back-end

Compare so sánh Hash Password

– Khởi tạo Access_TokenRefresh_token với Jsonwebtoken JWT

– Sử dụng HTTP Only Cookie để tăng thêm phần bảo mật cho 2 cái token ở trên

– Cấu hình sử dụng Cookie với tất cả các axios requests

 

* Viết API Logout đăng xuất người dùng

– Xử lý clear Cookie phía Back-end.

– Cấu hình History phía Front-end để sử dụng cho việc Redirect Routes trong các file xử lý code thuần Javascript ngoài scope của React.

 

* Viết API Refresh Token khi Access Token hết hạn và xử lý Retry Request Axios Front-end

* Lưu thông tin user vào trong Redux Store để sử dụng ở nhiều Component

* Triển khai Redux-Persist để khi người dùng F5 – Refresh trang web thì thông tin trong Redux Store vẫn còn, không bị clear theo mặc định.

 

* Tạo một page để cập nhật thông tin User, sử dụng Bootstrap Tabs + xử lý Params để tạo và điều hướng các thành phần con bên trong.

* Viết API cập nhật thông tin User phía Back-end

Cập nhật các thông tin cơ bản (displayName, Password…)

Cập nhật Avatar người dùng, lưu file ảnh lên dịch vụ lưu trữ đám mây trực tuyến Cloudinary (đây là cách mà các ứng dụng thực tế thường làm, ngoài Cloudinary còn có Amazone S3, Azure Storage của Microsoft hoặc Firebase của Google…vv)

 

* Các tính năng nâng cao liên quan đến Boards – Columns – Cards của User đã đăng nhập:

 

* Trang list toàn bộ các boards của một user

– Chia Layout với React-Bootstrap

– Hiển thị toàn bộ boards với Grid CSS

Phân trang cho màn list boards (tính năng rất phổ biến trong các ứng dụng web ngày nay)

– Xử lý giao diện phân trang với React-Pagination

Các kỹ thuật query phân trang nâng cao phía Back-end MongoDB như skip(), limit() cho từng page nhưng vẫn đảm bảo tính toán đúng tổng số lượng bản ghi trả về.

Filter tìm kiếm board theo tên, sử dụng kỹ thuật Debounce tránh spam gọi API (tính năng filter này cũng sẽ ảnh hưởng đến phần Phân Trang ở trên, và dĩ nhiên mình sẽ hướng dẫn các bạn nhé :D)

 

* Viết API tạo mới Board với các giá trị default ví dụ như user nào là người tạo ra board (Board owners)

 

* Kiểm tra quyền truy cập của một user đối với một board cụ thể, nếu user không có quyền với board mà cố tình truy cập thì sẽ xử lý và đưa ra thông báo lỗi hoặc ngược lại.

 

* Viết API xử lý Update một Card cụ thể.

 

* Tạo một Component Modal để xử lý phần show/update Cards (Dữ liệu card sẽ lấy ra từ Redux Store và thao tác xử lý)

Cập nhật Card Title

Sử dụng Markdown Editor cho phần update Description của Card.

User người dùng có thể Comment vào trong từng Card.

Cập nhật ảnh Cover cho Card (ảnh sẽ được lưu vào thư mục cụ thể trên Cloudinary)

Quan trọng việc đồng bộ data: Sau khi cập nhật card ở modal rồi tắt modal đó đi thì ngoài màn hình board cũng sẽ cập nhật giá trị mới của card đó.

 

* Tính năng Invite (mời) thêm người dùng join vào Board (Real-time thời gian thực)

– Tạo Collection mới trong MongoDB để lưu trữ các lời mời (Invitations)

Viết API cho phép người dùng mời một ai đó vào board bằng email.

– Xử lý giao diện phần Invite form, notification list, lưu notifications ở phía client vào Redux.

 

* User có thể Accept (đồng ý) hoặc Reject (từ chối) lời mời join board

 

* Tính năng bắn thông báo Notification Real-time thời gian thực tới cho người được mời vào Board với Socket.io ở cả 2 phía Back-endFront-end.

 

* Tính năng cho phép User có thể tự Join vào trong một Card hoặc chỉ định một người dùng vào Card với giao diện UI UX xịn như Trello (xem video sẽ thấy mình demo rõ hơn nhé)

 

* Last but not least Tính năng nâng cao quan trọng:

* Chạy Background Tasks phía Server NodeJS với Redis Cloud Database để giảm thiểu thời gian chờ thao tác của người dùng trên trang web.

Áp dụng khi người dùng cập nhật thông tin cá nhân như là AvatarDisplayName thì chúng ta cũng sẽ cần update thông tin mới nhất ở toàn bộ các Comments thuộc về User đó trong tất cả Cards.

 

(Ngoài ra trong quá trình học mình sẽ còn list cho các bạn nhiều ý tưởng  bài tập về nhà thú vị để các bạn thoải mái phát triển mở rộng thêm ứng dụng Trello này cũng như luyện tập code nhé.)

CƠ HỘI NGHỀ NGHIỆP VỚI mern sTACK?

Phần nội dung này mình chưa viết thành văn bản, tuy nhiên mình đã có nói ở trong video giới thiệu khoá MERN Stack nâng cao bên trên, các bạn có thể kéo lên trên xem video đó trước nhé.

HỌC VIÊN CỦA MÌNH NÓI GÌ?​

Dưới đây sẽ luôn là 100% review thực tế từ những học viên của mình, các bạn ấy nói gì về khoá học? Nói gì về giảng viên? (là mình)

– Tất cả reviews sẽ được mình cập nhật đều đặn vào slide bên dưới nhé.

– (Lưu ý: Do ảnh chụp ngẫu nhiên các cuộc trò chuyện nên kích thước sẽ khác nhau, các bạn thông cảm nha ^^)

Thông tin giảng viên

trungquandev-avatar-2021

Trung Quân (trungquandev)

Full-stack Web Developer & Trainer

Để có một cái nhìn toàn diện nhất về giảng viên (là mình) các bạn vui lòng click qua trang CV Online trực tuyến này của mình để xem đầy đủ tất cả nhé.

Ngoài ra dưới đây sẽ là những liên kết tới các trang mạng xã hội chính thức của mình, các bạn có thể liên hệ với mình qua những kênh chính thức bên dưới nhé.

Qua một ngày, chúng ta học thêm được gì mới hay "lặp lại" ngày hôm qua?

A little bit of fragrance always clings to the hands that gives flowers!

NHỮNG CÂU HỎI THƯỜNG GẶP

Thực ra câu hỏi này cũng có khá nhiều bạn từng hỏi anh, vì chưa có thời gian viết lại lên blog, nên giờ anh sẽ tóm lược một vài ý như sau nhé:

– Về định nghĩa, 2 thằng này là khác biệt, tuy nhiên giữa chúng lại vẫn có điểm chung trong việc giải quyết cái vấn đề pass dữ liệu qua các components, thành ra nhiều người bị conflict.

– Context là một cơ chế Dependency Injection có thể giúp em làm cho một giá trị dữ liệu có thể truy cập được từ các component khác sâu phía dưới cây component trong ứng dụng.

– Còn Redux nó là một “State management tool” nghĩa là bộ quản lý dữ liệu State trong ứng dụng, nó làm được những gì mà Context ở trên đang làm và nó cũng đi kèm với nhiều lợi ích khác.

– Nếu mục đích của em chỉ đơn giản là muốn là tránh việc pass dữ liệu lồng nhau giữa các component thôi thì đúng, em có thể sẽ không cần tới Redux. Mặt khác, vì là State Management Tool nên Redux giúp em tách mã code xử lý State của ứng dụng ra một nơi riêng rất rõ ràng, dễ quản lý cũng như xử lý logic bên ngoài component, một cái hơn nữa là nhờ có các Action, Reducer và đặc biệt là Redux Dev Tools extension sẽ giúp em rất nhiều trong việc tracking theo dõi dữ liệu State xem nó thay đổi như thế nào rồi Debug gỡ lỗi code khi có vấn đề xảy ra. Chưa kể đến một số thứ khá hữu ích nữa như redux-persist, redux-logger, redux-saga…vv

– Ngày trước việc cấu hình Redux vào dự án React là khá cồng kềnh code, thành ra nhiều người cũng đặt ra câu hỏi là tại sao phải cần Redux trong khi đã có Context…vv Ngay cả @dan_abramov cũng có nói trong một bài viết là “You might not need Redux”, và trong bài viết cũng có chỉ rõ những lợi ích của Redux, em có thể search bài này trên google sẽ thấy nha, rất hay. Tuy nhiên bây giờ sau khi đã có Redux Toolkit xuất hiện, việc cấu hình Redux đã cực kỳ clean và sạch sẽ, gọn gàng, cấu trúc dễ quản lý cũng như cực dễ dàng maintain bảo trì, mở rộng code…vv

– Cũng khá dài rồi, vì anh cố gắng tóm tắt tổng quan trong một comment nên chắc chắn là chưa đủ cũng như câu từ chưa hoàn chỉnh, em có thể nghiên cứu trên google với những từ khoá kiểu như “why redux”, “redux vs context” … nhớ là đọc các bài post tiếng Anh cũng như các câu trả lời được nhiều upvote trên Stackoverflow nha, bài viết Tiếng Việt thì a ít đọc, anh sẽ cố gắng sắp xếp thời gian viết riêng một bài về vấn đề này. – Cuối cùng, với câu hỏi của em là nên dùng vào những dự án nào, thì thật ra câu trả lời nó cũng không cụ thể được mà nó thiên hướng về cá nhân hơn, nó dựa vào sự quen thuộc trong cách sử dụng của người code cũng như người khởi tạo dự án, Leader dự án, người đó quen sử dụng cái nào thì họ sẽ chọn cái đó. Riêng với cá nhân anh, anh gần như là không dùng tới Context API, dù là dự án mới thì anh cũng vẫn sẽ chọn sử dụng Redux với bộ Redux Toolkit thần thánh. Còn với em thì dĩ nhiên, lựa chọn là ở em nhé ^^

Thank you for reading!

 * Cảm ơn các bạn đã theo dõi bài viết giới thiệu khóa học này cũng như blog chính thức trungquandev của mình, chúc các bạn một ngày tốt lành!

* À nếu bạn nào thắc mắc, thì chiếc ảnh bên dưới chính là mình đang ngồi code theo phong cách vẽ Anime nhé :))

 

– “You’re a flower on earth, let’s make your life beautiful and meaningful !” –

 

Sincerely,

https://trungquandev.com

https://cv.trungquandev.com

trungquandev-cover-animation