React coding style

React coding style

Component creation

Children

Rule We should avoid children as possible.

Why We want control over HTML to ensure full compatibility with component and theme style. Opening the children to the user would implie that everyone can inject their HTML structure which would lead to incompatible css rules. To fix that, the user would write it's own css, that will cause to fix things in multiple places.

Exception When your component is something that manage only a sort of Panel (like a Drawer, a Carousel, ...) where you can put anything you want in it, we should enable children.

Customisation

Rule In some points you could have render a specific element in a component. Ex : render badges in the list. This should be done by passing a renderer in props. The renderer should developped into the repo and attached to the main component. Ex : List with List.BadgeRenderer

<MainComponent
    items={[
        { name: 'toto' }, // default renderer
        { name: 'tata', renderer: MainComponent.MyCustomRenderer }, // custom renderer
    ]}
/>

Why Supporting all cases in the List implementation will cause the component to be quite heavy and it becomes very hard to maintain. Separation of concern is the key, a renderer will be responsible to this specific part, making the core component implementation lighter.