Standard model of UI development
When building React apps a multitude of components is created. They end up scattered across the project, making it hard to control and use them. React UI tries to solve the problem by encapsulating all of the components into a single dependency that is used across the app:
importUIfrom'src/components/ui';constHeader=()=>(<section><UI.Label>Press the button to greet everyone</UI.Label><UI.Buttonkind="primary">Hello, GitHub!</UI.Button></section>);npm install --save @react-ui/coreUnlike other UI related libraries, React UI doesn't include any built-in components. It rather suggests a pattern for managing components in an app. So, let's create a React UI-compatible component:
// src/components/ui/basic/button.jsximport'src/styles/button.css';exportdefault()=>(props)=>(<inputtype="button"className={`button-${props.kind}`}>{props.children}</input>);As you can see, the stateless component is wrapped by a function. It is used for passing styles in more complex use cases (explained later in the docs).
React UI exports only a single function that is used for preparing UI for the app:
// src/components/ui/index.jsimportinitUIfrom'@react-ui/core';importButtonfrom'./button';importLabelfrom'./label';constcomponents={
Button,
Label,};constUI=initUI(components)();exportdefaultUI;React UI pattern revolves around the following three aspects:
single point of initialization
styles are passed to components as a parameter, thus, easing UI theming
UI components can be grouped in layers, where a given layer has access to the components of parent layers. This exact property helps to achieve the proper UI composition.
- docs and examples;
- core components (as a separate repository);
- styleguide generator;
If you have a suggestion, please, create an issue.
Apache License, Version 2.0