react-ecs is a declarative "Entity Component System" for React.
An ECS, or Entity Component System is a design pattern popular in game development. It eschews rich objects for simple Entities that compose data-only Components, or Facets as
react-ecs calls them (to avoid confusion with React Components).
Logic is then handled by small update functions called Systems that operate upon the facets related to it.
In the example to the right, a common scenario is illustrated. There are a number of entities, comprised merely as a collection of simple data facets. A
Position component may hold a simple vector. Whereas a
Graphics component might hold the URL of a sprite image.
GraphicsSystem are responsible for all the behavior and logic:
PhysicsSystemlooks at all the entities with both
Positionfacets, using the former to update the latter.
GraphicsSystemlooks at all the entities with both
Graphicsfacets, using the former to draw the latter.
The systems ignore the entities that don't have the facets they're interested in.
ECS takes "composition over inheritance" to its logical conclusion.
Entities are nothing more than their facets. They don't have their own data and they don't have any code.
There's no need to try to find the best inheritance tree to represent your problem domain.
Just slap some useful facets onto some entities and write some systems to process them. This also means entity capabilities can dynamically change at runtime.
It's a robust, easy to implement pattern that can enable a fun creativity.
The idea behind
react-ecs is to allow you to describe the parts of your ECS in standard React fashion:
First, define some useful Facets.
Let's add a system to remove entities when their
Lifetime has expired:
Let's add a couple of other systems for moving entities around:
Finally, let's write a system to sync an entity's
Position facet with its standard
Now we can put it all together: