Components play an outsized role in building web applications using React. Therefore the design of components themselves can influence overall efficiency and structure of the app. Ideally, they should be small and easy to reuse.
As your web application scales, you’re going to need more components and to create more pages. You can only do this if your web application is built on a strong foundation. In this article, we will try to give best practices for building components in React.
Great components should help both developer and the user
Components typically encapsulate a certain small part of a website. Most components have a simple logic and presentational part as well. A collection of components makes up the entire web application. However, it is the developer’s job to organize individual components into a functional web app. Components’ design should allow developers to easily piece them together. User experience should be seamless as well. React.js string interpolation can help you add dynamic features to React apps.
Three design principles for component design
First principle is that every component should have one primary responsibility. Like gears in the clockwork, overall web application can have complex features, but an individual component should do one task and do it well. I don’t recommend building components that can have multiple uses. Build one for a specific use case, and another component for a different purpose.
Separation of concerns
This is related to previous point about single responsibility. Try to separate complex apps into several more manageable parts. For example, the parent component at the top most likely is not going to have hundreds of children. Instead, it will have several children components to handle major aspects of a web application. These child components will have some of their own. Structuring React apps this way makes them easier to maintain.
Separation of concerns is also about building components to handle very specific concerns. For example, you could technically reuse a to-do list as a note, but that would unnecessarily complicate structure and functionality of the app.
Open and close principle
A good component design allows you to build on top of it to extend its functionality. Open-closed refers to the quality where a component is open for extension, but closed when it comes to modifying its core functionalities and appearance.
For example, you have a radio button input you want to decorate further. Instead of modifying the existing code, you can create another candidate that uses existing radio button design and builds upon it. The original component stays the same, and the new effect enhances and customizes its functionality without writing too much extra code. Any part of the application that uses the original component stays the same and doesn’t needs to be fixed.
Create a structure and layout for the component
Before writing any code, sit down and write what problem the component needs to solve. What is the application lacking? Study the missing feature and all the caveats of filling that role. Will the new component affect other components? Maybe you’re going to need multiple components to deliver a certain feature? You need to answer these questions before writing a component.
Data management
React components often receive data. Whether it comes from the API, from users, or from parent components via props, you need to follow React design patterns to ensure data consistency.
Specifically, follow these steps:
- Store user inputs in the state, and get input values from the state. You can use the onChange event handler and value attribute for input elements to do this. This practice is called controlled components. Handling user inputs this way can help you dramatically reduce number of errors. Controlled inputs are more predictable as well.
Style components
Changing the appearance of elements is key part of web development. In React, there are several ways to style React components. Other user-friendly features include redirect to another page on form submit.
Here are safe styling solutions you can use.
React (more specifically JSX) itself has built-in support for setting inline styles to JavaScript objects. Use curly braces to set className and/or style attributes to JavaScript expressions. However, building a large scale web applications requires a better CSS-in-JS solution. Styled-components is a good pick. It allows you to create custom inline styles and reuse them to style components.
You can use CSS modules to create separate styles for components. Unlike global CSS files, naming scopes are limited to a specific component. Components can technically borrow styles from a module and use them to style certain element.
Accessibility
This is an important factor when building components in React. Visual elements should have ARIA attributes so technologies can help people who can not see understand content in front of them. Alt tags can play an important role as well. Not only in describing the image for assistive technologies, but also for SEO purposes.
Finally, use appropriate React elements to define JSX structure of the app. Semantics are important in helping assistive technologies describe the page, and help vision impaired users navigate your app.
Testing the component
Testing is the key to consistency of any web application. The same is true for React. Here’s how to design components that are easy to test.
Use libraries like Jest to design unit tests for testing various components. Unit tests are most effective tools for catching errors early and thus help you avoid many headaches later on. React components manage data via props and state. Testing these two aspects of your component can save you from most common errors.
Finally, actually render your components and try different user interactions. This Is tied with managing state. If certain inputs or actions cause an error, you may need to go back to the drawing board and fix state, event handlers, and/or props. This helps to keep each component and overall web application accessible and usable to users.
Conclusion
Hopefully this article helped you learn how to build and design React components to build scalable and powerful apps. There are many different angles to consider – from component organization to individual component design.
Top comments (0)