⚛️ Focused Styling in React and refactoring of Mobx

Are you using React on the project with an external theme? Read more theming of for React, some hints for mobx without decorators and more.

This article is for anyone who is

  • working with React
  • is planning to start working with React in the near future
  • likes practical examples ❤️
  • uses Mobx

Styling

Unqualified styling can create the worst technical debt possible. Try to write a minimum of new styles as possible.

  • 🚨style only using class name selectors!
  • 🚧do not nest selectors!
  • 🚨use class names that start with “.js-” for javascript functionality never for styling

Mobile first

  • Style simple components to take a full width
  • Layout components should scale up elements as the viewport changes
  • Use only media query based on minimum viewport widths
    @media (min-width: ___px) { ... }
  • In SCSS prefer mixins for media queries from Bootstrap 4
    @include media-breakpoint-up(size){...} // is all you need to use

Theming

Employ component library like bootstrap. Use the provided components and make customization exclusively by changing Sass variables.

Any code is generally clearer and easier to maintain when it does not use globals, CSS styles are global

Components should own styles

Solution to global styles is to make write styles inside of every component using CSS in the JS library like styled-components or emotion.

Emotion is a library designed for writing CSS styles with JavaScript

Component design

Thinking in react way. A component should use data to render UI. Design simple components that do only one thing. Components used for Layout and styling should not know about the application model.

function (data) { return UI; }

🏗 Component Categories

🧱 The base styled components

  • Elements with styles

💅 Presentational components

  • Reusable components with Styles

🎁 Container presenter components

  • Customized Presentational Components that know about application Model

🎛 Container components

  • Only inject data and behavior to Container presenter components

State management

⚛️React introduced Hooks

Hooks solve state management without an additional library.

Components should not misuse specific state management library

Consider a situation when the creator of mobx will make this project deprecated. If a project has components coupled with mobx, all the components will need to change, compared with only container components have a connection to the state using inject or connect function and the refactorings are much easier.

  • decorators make components harder to test
  • using store inside of the components requires to mock the whole store for testing
Instead, we should use inject and observer as a functions
https://github.com/mobxjs/mobx-react#inject-as-function

👍 Benefits of using inject and observer functions:

you are not using generators that are not part of the Javascript specification. (🤯 Currently unstable proposal)

  • 🚀 the code is future proof, and you do not have to change anything when new generators are released

you can prepare data and actions inside of the inject

  • 🍀 you can work with simple, functional components
  • ♻️ your components will not know about the store and can be reused

Example:

Example of Mobx Inject function without decorators
Example of a mobx project without decorators, and with inject functions

Use of Lerna with yarn workspaces and packages generator

Consider use of a monorepo project with

  • eslint config with prettier
  • precommit and prepush hooks build in
  • create new packages using package generators
  • one command versioning with an automatic changelog
  • releasing of all packages with one command

Link to example project and link to generator folder in the project
The styleguide, eslint config could be moved into this repository and released from here. It can enable to develop common packages faster with the current setup and we can create smaller packages with little to no overhead.

More about how to create a simple generator:

👏Clap, 👂follow for more awesome 💟#Javascript and ⚛️#React content.