Basic Domain Model
Without any plugins, the Reactium framework comes with these fundamental building-block artifacts. Use them to quickly start building DDD functionality.
Last updated
Without any plugins, the Reactium framework comes with these fundamental building-block artifacts. Use them to quickly start building DDD functionality.
Last updated
Reactium aggregates all route.js or reactium-route*.js files into a list of routes used to render similar to components. Reactium also extends this concept to allow controlled transitionary states between routed components using Reactium.Routing
All the properties in this object that you specific that are not pertaining to matching the route will be passed on as properties to your component. This is useful when multiple routes render the same component with a different context (in addition to route params and search query).
When generated by reactium
cli, the boilerplate for this file will vary based on the type of component you specified when generating.
See: Creating A Component for additional information
YourComponent.jsx is conceptually part of your domain, but it is not added to the built-time manifest src/manifest.js
. Your component must be registered to be used in the application:
reactium-route-<yourcomponent>.js - import component here to assign it to a route
reactium-hooks.js - import here to register component globally for shared use (using Reactium.Component.register()
), or to a rendering zone (using Reactium.Zone.addComponent()
)
One opinion of Reactium is to NOT use css-in-js by loading and processing styles using Webpack. Instead we use gulp and dart SASS to compile one or more CSS stylesheets. This would ordinarily make placing your styles with your component challenging, as you would have a lot of extra work to manage the imports into your main stylesheet.
This is no sweat with Reactium. By placing a scss partial with a filename beginning with _reactium-style
in your domain folder, Reactium will automatically manage the imports into a common generated partial, src/assets/style/_scss/_reactium-modules.scss
This generated partial is included in the compilation of the style.css for your application by default with a new Reactium install.
There are some common directories or filename suffixes that will result in your partial being sorted differently in the generated _reactium-modules.scss partial:
mixins/_reactium-style.scss
_reactium-style-mixins.scss
-1000
variables/_reactium-style.scss
_reactium-style-variables.scss
-900
base/_reactium-style.scss
_reactium-style-base.scss
-800
atoms/_reactium-style.scss
_reactium-style-atoms.scss
0
molecules/_reactium-style.scss
_reactium-style-molecules.scss
800
organisms/_reactium-style.scss
_reactium-style-organisms.scss
900
overrides/_reactium-style.scss
_reactium-style-overrides.scss
1000
If you're looking to get some things done before the first render or in the file scope, this is the place. Many of the Reactium SDK functions are available and those that are not, can be accessed after a plugin has been successfully registered.
There are times when you will need to describe the domain for certain situations. The domain.js
file is where that should happen. An important feature of domain.js
is it will allow you to prevent namespace conflicts between your domains when Reactium builds your build-time manifest.
Reactium aggregates all services.js or reactium-service*.js files into the services property of the dependencies module default export.
A typical services.js file may look like this:
Services are an area where it may seem like a good idea to share between domains. This is generally not encouraged as domains should be as self sufficient as possible. If you find the need to share a service, consider making it a domain above or adjacent to the consumer domains. You may also want to consider extending the Reactium SDK
You can think of reactium-boot.js to be for the Reactium Node/Express server, what reactium-hook.js is for the client application. Generally, this file is used for hooks that are meant to be used server-side, such as registering Express middleware, server globals, loading scripts and stylesheets, and manipulating the server template.
Reactium adds a test for your domain when it the test command is run.
A typical test.js file may look like this:
If Redux is being used in the above component MyComponent would be imported from ./MyComponent instead of ./index
If you set transition to true
in your route.js
, you will need to manage the current routing state in your code programmatically, advancing to the next state using Reactium.Routing.nextState()
. See for more information.
We highly recommend the book by to understand the significance of these distinctions!
See the .