Rules Hub
Coding Rules Library
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
frontend ruleP2stack specificStack: react
reactcomponentsreadabilityjsx
Favor named components over deeply inline div markup in render
Extract chunks of JSX (especially conditional div soup) into named components whose name says what they are and whose props say what they need; it reads far better than raw nested tags.
PR: hegnar-web · org-mining-hist-2026-06Created: Jun 19, 2026
Bad example
Old codetsx
| 1 | return ( |
| 2 | <div> |
| 3 | {top && <div className=""><div>{top.title}</div>{top.more && <div>More</div>}</div>} |
| 4 | </div> |
| 5 | ); |
Explanation (EN)
Objašnjenje (HR)
Good example
New codetsx
| 1 | return ( |
| 2 | <div> |
| 3 | {top && <TopArticle article={top} />} |
| 4 | </div> |
| 5 | ); |
Explanation (EN)
Objašnjenje (HR)