rubicon44TechBlog
    Search by

    Component Design in React.

    created_at:October 01, 2022

    updated_at:October 01, 2022

    Table-of-contents

    Today, I am going to explain Component design process in React.

    Purposes of this article creation

    • To be able to create Component in React on my own.
    • To be able to do Component design.

    Component Design Process

    In this case, I will create Component for a SNS task management application on ?? as a deliverable.

    【What is Component Design?】

    • Componentization is the process of designing components such as screens by dividing them into separate parts.
    • The purpose of componentization is to increase reusability by dividing parts of various granularities into units called “components,” and at the same time, to facilitate collaboration between design and technology.

    [There are four elements that make up a component]

    • Information structure: HTML is responsible for this part.
    • Style: CSS is responsible for this.
    • State: the component is responsible for this.
    • Interaction/function: the component is responsible for this.

    ※The above two are not difficult if UI parts are simply decomposed according to the philosophy of Atomic Design, etc.

    ※Components also need to pass data and callbacks to/from external parties, which creates restrictions in terms of implementation efficiency.

    ※The purpose of componentization is to improve productivity of engineers, so there is often a conflict between conceptual cleanness and ease of implementation.

    【Why “componentization”?】

    • State management can be done for each component.
    • Easy to expand components
    • Components can be reused.

    ※For more information on “State Management,” see State Management in React..

    Information Structure and Style

    Information structure and style are closely related concepts, so they are grouped together.

    Atomic Design as a Principle

    【What is Atomic Design?】

    • A method of capturing UI by dividing it into two levels: “general framework (page)” and “components (parts)“.

    [5 types of units]

    • Atoms: The smallest unit of UI. Things that cannot be functionally divided any further. Buttons, text, etc.
    • Molecules: Elements created by combining Atoms, such as search forms.
    • Organisms: Elements created by combining Molecules and Atoms. The difference from Molecules is that Organisms have multiple roles instead of a single function.
    • Templates: A combination of Organisms. So-called wireframes.
    • Pages:Templates are filled with data such as actual wording.

    Talk about Atomic Design being difficult to use.

    【Merits of Atomic Design】

    • Material classifications are helpful in guiding us when classifying components.
    • We can classify components mechanically to some extent. Although there are some difficulties in drawing boundaries such as “what is the difference between molecules and organisms?

    【Demerits of Atomic Design】

    • Because it is not classified from a UX perspective, it is very difficult to find something that is mechanically classified from a material perspective.
    • Engineers are also human beings; taxonomies without a UX perspective should not contribute to ease of use and ease of search.

    ※In other words, Atomic design is an excellent abstraction guideline, but it does not enhance component accessibility.

    【Solution】

    • At present, it is said that a directory structure by purpose of use is a good idea.

    【But】

    • Atomic Design is a pain, but it’s easy to categorize components for React beginners.
    • If you set some constraints/rules, it is not that difficult to use.
    • Also, Atomic Design is a design pattern that many people have experience with, and its ideas can provide suggestions for future component design, so beginners to React can try Atomic Design for now.

    Single-responsibility principle

    • As a general rule, a component should be responsible for one thing.
    • This is an important concept when designing components in units of Molecule, and it is a sign of bad design if a component has multiple functions and roles, because it reduces reusability.

    ※The solution to the question, “How should we view Organisms and above, they have multiple roles?” is that components in Organisms and above units do not have “roles as functions” but have “roles as layouts”.

    Open-Closed Principle

    【We have two types of what I call styles】

    • Appearance style
      • Defines the look and feel of the component of the target.
    • Layout style
      • For components with a unit of Molecule or greater, the style defines how the component lays out its internal components.

    [Design Considerations]

    • Child components must not know the “layout style” of the parent component.
    • The parent component must not know the “appearance style” of the child component.

    The reason for the above is that both of them are less reusable.

    Determine which styles to make variable

    • Sometimes it is better to allow the parent to specify some styles for its children to make a good component that is easy to use.
    • The basic stance is “In principle, styles should be closed to the component, but when it becomes necessary or beneficial to make them variable, they should be made variable”.

    State and Interaction

    • State is a value that can change during the operation of an application.

    【Type of state】

    • Data
    • UI
    • Session
    • Communication
    • Location (Routing, etc.)

    To flux or not to flux

    • The first thing to consider when working on “state management” is whether to adopt a “flux architecture”.
    • To put it simply, flux is an architecture that limits the flow of data to one direction to facilitate state management.
    • When using flux, a store layer is set up outside of the component to manage the state, so whether or not to adopt flux will affect the design of the component.
    • The essence of flux is “to make the flow of data visible to realize state management with fewer bugs and easier debugging”.
    • It is not necessary for small to medium-sized applications that do not have a large number of component hierarchies or states to handle.
    • Instead of just installing Redux or Vuex, consider whether it is really necessary before installing it. Because React or Vue are quite powerful tools by themselves.

    “Container Component” and “Presentational Component”

    • Presentational: What UI is rendered (expressed). Responsible for rendering.
    • Container: The container that controls the display. It is responsible for the data structure and data flow.

    By dividing components in this way, the task that each component is entrusted with becomes clear, and implementation can be kept simple.

    The divisions can also improve reusability.

    Basically, it is better to design with the above in mind, since it is easier to manage states without scattering them as much as possible.

    Container Component

    • In most cases, it does not have a concrete DOM representation inside.
      • It plays a controller role in providing concrete data and behavior for rendering to child components (rendering of UI is the responsibility of the child component).
    • In some cases, it may have its own state.
    • Update data.

    Presentational Component

    • Implemented with Stateless Functional Component (SFC) (pure function without side effects).
      • SFC allows separation of responsibility between state and drawing.
      • SFC will continue to be the basis of components (e.g., Hooks) as more and more things can be realized with SFC + α.
    • Implement the function so that it always works as expected if a fixed value is passed.
    • SFC is responsible only for firing the function passed from Container (It is not necessary to know the internal information of the function to be fired, so that it can be used anywhere.).
    • It may have Local State(Depending on the situation, it may be better to allow a component to have a State in a closed form.).

    Closed to components

    • In some cases, it may become complicated to pass the state to the global Store layer, etc.
    • The best way is to allocate them based on the criterion of “whether the state is closed to a single component or not.
    • The statuses do not necessarily have to all be collected in one place, it is important to use local state management and other methods according to the situation.

    Extract common behaviors/know patterns of their implementation

    • Extract the common behaviors itself used by various components.
    • For example, it is good to extract common behaviors such as “only selected items change style” or “only logged-in users can see”.
    • By making this possible, various components can be created flexibly from a single component.
      • Example: From a simple button component, you can easily create a button component that changes the style only for selected items, or a button component that only logged-in users can see.
      • If behavior is not extracted, each must be defined as a separate component, which is very cumbersome.
      • There are several patterns to implement this. The major ones are Higher-Order Components and Render Props, and after Hooks, Custom Hooks.

    Things to consider when creating components

    • Maintain reusability
    • Define the role of the component
      • To maximize reusability

    【Tips (from CSS Design)】

    • Don’t be in a hurry to optimize.

      • Component design focuses on “maintainability” and “reusability” of the component.
      • Premature optimization is the root of all evil(quoting Donald Knuth).

    • Rule of three

      • A pattern is established if it is repeated three times.
        • 1.When a pattern appears for the first time, do not think about reusing it.
        • 2.When you encounter a pattern that has been solved once, resist the urge to make it a component.
        • 3.The third time, think about what is known as the pattern and what is not known as the pattern, and “refactor” to make it into a component.
      • If the component was usable in 3 projects, there is a possibility that it can be used in other projects.

    【The “prop drilling” problem】

    • When a component at the end needs to pass data from a component three or four levels above it, it is necessary to create an extra interface to pass the data to the intermediate component.
    • Redux and MobX are often used to solve this problem.
    • Recently, React can solve this problem by using the Context API, which is new since v16.3.

    Introduction to Component-Splitting

    【Purpose】

    • Improve reusability
    • Improve readability
    • Improve Testability

    Separating View and Logic provides the above benefits.

    Component Splitting methodology before Hooks

    • Composition: Basic React functionality (still used today)
    • Higher-Order Components
    • Render Props

    Component Splitting methodology after Hooks

    • Custom Hooks

    Compromise with actual operation

    • It is important to find a compromise to make it realistic to operate.
    • In some cases, it is OK to compile all the elements into one component.
      • When there is not enough time (e.g. new development).
      • If you want to discuss it with others later.
    • Beware of excessive Atomization (Atoms that are not reused have no value.).
      • Unnecessary componentization puts a burden on implementation.

    ※It is a good idea to put anything that cannot be figured out after 10 minutes of thinking into one component for now, implement the whole thing quickly, and ask your boss to check it later. Prioritize making a prototype quickly rather than wasting time worrying about the same thing.

    React Folder structure when designing components

    ※Combine “Presentational & Container” & Atomic Design well.

    ※Or consider other folder structures.

    Deliverables(React Folder Structure)

    ※The below indicates that I mastered the basic design patterns such as Atomic Design.

    • The components and below are divided into containers and presentational to separate UI and logic.
    • Atomic Design is applied to facilitate the categorization of components, and the “containers” section is divided into organisms, pages, and templates, while the “presentational” section is divided into atoms and molecules.
    • The organisms, pages, and templates are divided into directories by function for easier handling.
    • The directories under atoms and molecules are divided by parts for easy reuse.
    - src
  - assets
    - images
    - styles
  - auth
  - components
    - containers
      - organisms
        - likes
        - search
        - tasks
          - taskList.jsx
          - tasksList.jsx
          - ganttChart.jsx
          - ...
        - users
      - pages
        - search
        - static_pages
          - notFound.jsx
          - signIn.jsx
          - signUp.jsx
          - top.jsx
        - tasks
          - index.jsx: List view.
          - show.jsx: Detail view.
          - create.jsx
          - edit.jsx
          - taskIndex.test.jsx: Test file.
        - users
      - templates
        - search
        - tasks
          - index.jsx
          - show.jsx
          - create.jsx
          - edit.jsx
        - users
    - presentational
      - atoms
        - Button
          - index.jsx: Basic buttons (extended buttons below).
          - logOut.jsx
          - backButton.jsx
          - nextButton.jsx
        - Link
        - Title
      - molecules
        - Form
        - List
  - hooks
  - infra
  - App.css
  - App.js
  - index.css
  - index.js
  - ...

    References

    [Component Design]

    [Atomic Design]

    [React Folder Structure]

    [Component Implementation Rules]

    Word Explanation

    NONE.

    Summary/What I learned this time

    【Summary】
    NONE.

    【What I learned this time】
    NONE.

    © 2022, rubicon44TechBlog All rights reserved.