Reading the comments I'm wondering if I'm the only one who noticed that this example does NOT intermingle CSS.
This is a view component that keeps track of it's own state. It is 100% encapsulated and by building in events and data bindings it can be composed into more complicated applications.
It is in fact separation of concerns. This is only one concern. The UI of a single component.
In a full React app the business logic will be in controllers and models that don't themselves contain view/UI code.
But because an HTML like syntax was chosen to represent view hierarchy we draw a red flag because it looks like we are mixing HTML with Javascript. But that was only ever a red flag because HTML semantically was hypertext representing data and relationships.
Having tried React in earnest (and yes, I know people will have counter-anecdotes) I can say that being able to components my web application leads to more testable code, easier delegating of workload across teams (each team member only needs to know the interface of a component to use it), and better code reuse. It is beautiful (albeit busy looking).
This is a view component that keeps track of it's own state. It is 100% encapsulated and by building in events and data bindings it can be composed into more complicated applications.
It is in fact separation of concerns. This is only one concern. The UI of a single component.
In a full React app the business logic will be in controllers and models that don't themselves contain view/UI code.
But because an HTML like syntax was chosen to represent view hierarchy we draw a red flag because it looks like we are mixing HTML with Javascript. But that was only ever a red flag because HTML semantically was hypertext representing data and relationships.
Having tried React in earnest (and yes, I know people will have counter-anecdotes) I can say that being able to components my web application leads to more testable code, easier delegating of workload across teams (each team member only needs to know the interface of a component to use it), and better code reuse. It is beautiful (albeit busy looking).