Clean coding with React in a nutshell
summary
Claims a concrete clean‑architecture pattern for front‑end code: three layers (domain entities, application use‑cases, adapters), strict dependency rule, and that business logic stays testable without React. Shows a runnable e‑commerce demo (cart, order, payment, notification) implemented with React + TypeScript, uses ports/interfaces and adapters for payment/notification/storage, wires use‑case hooks into UI, and warns about extra upfront work, higher code volume, and potential overengineering for tiny projects.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 1:15Clean coding architecture
- 5:35Clean architecture in front-end
- 9:06E-commerce project structure
- 16:15Domain layer details
- 18:49Application layer & use cases
- 21:18Ports and adapters for services
- 23:50Adapter layer & UI binding
- 27:03Improvements & best practices
- 29:09Conclusion & Q&A
related talks
42mClean Code vs. Dirty Code: React Best Practices
49mDeveloping a clean architecture-inspired React application with MVVM
17mDeveloping a clean architecture-inspired React application with MVVM
38mMaintainable React
22mTips for a Clean, Complete React Stack
22mCrafting Pristine React: Best Practices for Maintainable Code
01h 04mWhat makes React different?
38mWriting highly reusable React components