React, Components, and Design

What is React and why?

I am a designer who studies & uses React.js for developing UI and UX in the front-end development team. In our team, we are using React.js for developing our application admin panel(管理画面). React is a component-based JavaScript library for developing user interface. It helps in building & handling a big application efficiently and as far as I can tell, react is the best library to connect designers and developers.

Our application is getting bigger and bigger as well as our team. Because of that, our codebase should be more organized and understandable for the new team members. Therefore, we decided to refactor our code directory structure.

We started refactoring our code directory structure based on the methodology of "Atomic Design" because atomic design matches the primary concept of React.js. Atomic design methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are:

• Atoms
• Molecules
• Organisms
• Templates(could be included in either Organisms or Pages)
• Pages

What we did

We organized and moved our components to those 4 stages folder and figured there were pretty many reusable components but never been used in more than 1 place(or some components are not even being used). We made everything a single atom component if they are reusable. We even made a styled component as an atom if it is reusable. In the directory refactoring, we were able to maximize the reusability of components and also deleted a bunch of useless code.

After the directory refactoring, Importing components and writing path is a lot easier and faster than before. Codebase gets lighter and simply organized. It improves reusability and updating applying changes became tremendously easier.

Before
import { Button } from '../../components/styled_components/buttons';
import { Input } from '../../components/styled_components/input'

After
import { Button, Input } from '@src/components/atoms';

Moreover, the well-organized components allow me to adjust CSS efficiently. In my point of view, React is the best JavaScript library particularly for designers who have basic knowledge of HTML and CSS because,

JSX(JavaScript XML):

This is because React uses JSX which allows us to write HTML in React and styled-components. Nowadays, there are many designers who know HTML and CSS. In react, designers can easily design or edit the component by using the styled-components library and JSX. Styled-component is basically a library that allows us to write plain CSS in your react components. Designers can simply go to the component file or a single styled-component that they want to style(most likely an atom component) and edit the CSS or if necessary, adding HTML(JSX) to the component directly. The separated single styled-component is easily adjusted by the designer.

styled-components

By using the JSX and styled-components, designers can easily style the JavaScript even though they are not so familiar with it. For example, we can style a button component like below:

const Button = styled.Button`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;
`
render(
  <div>
    <Button />
  </div>
)

To conclude, Front-end engineering and design have a very close relationship. And React with the atomic design directory structure is really beneficial not only for developers but also for designers who do coding. React and Atomic design methodology shares the primary concept together. It gives a better & faster understanding of the code structure to developers and also makes designers involved in code a lot more. They just match perfectly each other.