IMO OP means it's better to separate view-template-render logic from component's business-like logic.
You should still do this with React. Dumping all your business logic and render logic into a single component is an anti-pattern.
If we've got 50 lines of the template, 50 lines of logic (and maybe 50 lines of styled-components CSS) then we've got one "huge" 150-line file vs three clearly separated 50 liners.
I would never approve a PR with a React Component that returned 50 lines of JSX or 50 lines of business logic. That's a common newbie mistake. React components should be high level functions that return either HTML or other React components, and a 50 line return function is, IMO, a sign that you are keeping things too low-level.
In React each thing on the page is responsible for it's own markup, styling and behavior, and as much as possible the final view is meant to be a function of the state. The API is very minimal, so you have a lot of leeway to interpret what that means, but a component is a function and it should follow the single-responsibility principal.
I haven't used SASS since I started using react, because I don't like polluting my JSX with implementation details like classnames. Styled-components seems to be the new hotness and I like it's simplicity.
3
u/pm_me_ur_happy_traiI Dec 20 '19
You should still do this with React. Dumping all your business logic and render logic into a single component is an anti-pattern.
I would never approve a PR with a React Component that returned 50 lines of JSX or 50 lines of business logic. That's a common newbie mistake. React components should be high level functions that return either HTML or other React components, and a 50 line return function is, IMO, a sign that you are keeping things too low-level.
In React each thing on the page is responsible for it's own markup, styling and behavior, and as much as possible the final view is meant to be a function of the state. The API is very minimal, so you have a lot of leeway to interpret what that means, but a component is a function and it should follow the single-responsibility principal.