Build Robust and Scalable React UI Components with TypeScript and Storybook

In this blog post, we will explore how to build robust React UI components with TypeScript and Storybook. TypeScript and Storybook are powerful tools for building complex and scalable web applications, and they can help you save time and effort when writing React code.

TypeScript and React:

React is a popular JavaScript library used for building user interfaces, while TypeScript is a statically-typed language that provides better development-time tooling, error checking, and code readability. 

When used together, TypeScript and React provide a powerful toolset for building complex and scalable web applications. TypeScript and React can help developers write more efficient and maintainable code, leading to faster development times and more reliable applications.

Why use TypeScript with React?

TypeScript provides several benefits when used with React:

• Type Checking: TypeScript allows developers to catch type-related errors at compile time, rather than runtime. This can save a significant amount of time and effort when debugging code.

• Code Readability: TypeScript provides better code readability with its syntax and strict typing rules. This makes it easier to understand and maintain codebases.

• Development-Time Tooling: TypeScript provides rich tooling for code editors, including code completion, error checking, and more. This helps developers to write better code faster.

Why use Storybook for React?

Storybook is a powerful tool for building UI components in isolation, allowing developers to work on individual components in a controlled environment. It is used in developing, testing, and documenting individual UI components in isolation from the rest of the React application. 

It helps to improve development speed, simplify collaboration, test components in isolation, and enhance design consistency. By using Storybook for React, developers can streamline the development process, make it easier to catch and fix bugs, and improve the overall code quality.

Build Robust React UI Components with TypeScript and Storybook:

1. Set up the project:

To set up a new React project with TypeScript and Storybook, we can use create-react-app with the --template typescript flag. This creates a new project with TypeScript support.

Copy
1     npx create-react-app my-app --template typescript 

We can then add Storybook to the project using the following command:

Copy
1     npx -p @storybook/cli sb init --type react 

‍

2. Create components:

Once we have set up our project, we can start building our components. We can create a new folder called components in the src directory and create a new TypeScript file for each component we want to build.

Here is an example of a simple React component written in TypeScript:

Copy
1     import React from 'react';
2    
3    interface Props {
4      name: string;
5    }
6    
7    const HelloComponent: React.FC<Props> = ({ name }) => {
8      return <div>Hello, {name}!</div>
9    };
10    
11    export default HelloComponent;
12     

This component takes a name prop and displays a greeting message. We have used React.FC type to specify that this is a functional component and used an interface to define the props for the component.

‍

3. Use Storybook:

Once we have created our components, we can use Storybook to view and interact with them in isolation. To add a component to Storybook, we can create a new file with the stories.tsx extension in the same directory as the component.

Here is an example of a story for the HelloComponent:

Copy
1     import React from 'react';
2    import { Story, Meta } from '@storybook/react';
3    
4    import HelloComponent, { Props } from './HelloComponent';
5    
6    export default {
7      title: 'Components/Hello',
8      component: HelloComponent,
9    } as Meta;
10    
11    const Template: Story<Props> = (args) => <HelloComponent {...args} />
12    
13    export const Default = Template.bind({});
14    Default.args = {
15      name: 'World',
16    };
17    

In this story, we have used the Storybook Story and Meta types to define the title and component for our story. We have also defined a Template component that takes the component props and renders the component with those props. Finally, we have defined a Default story that sets the name prop to World.

‍

4. Test components:

TypeScript and Storybook can help us test our components more effectively. For example, we can use TypeScript's strict typing to ensure that, whether our components are receiving the correct props.

We can also use Storybook's testing features to test our components in isolation. And we can use the Storybook knobs add-on to interact with the props of our components and see how they affect the component.

Creating Reusable and Scalable Component Libraries

When building large applications or multiple projects, creating a reusable component library can save time and ensure consistency across your UI. TypeScript ensures these components are type-safe and easier to maintain.

Strategies for Organizing Components

1. Folder Structure: Organize components into folders based on their use case. For example:

Copy
1src/
2  components/
3    Button/
4      Button.tsx
5      Button.stories.tsx
6      Button.test.tsx
7    Input/
8      Input.tsx
9      Input.stories.tsx
10      Input.test.tsx

2. Component Exporting: Ensure all components are exported from a central file for easy importing.

Copy
1
2export { default as Button } from './Button/Button';
3export { default as Input } from './Input/Input';

3. Versioning and Publishing: Use tools like Lerna or Nx to manage and version your component libraries. If your team builds multiple projects, you can publish your library to a private npm registry, enabling easy reuse across projects.

Best Practices for Creating React UI Components with TypeScript and Storybook

1. Leverage TypeScript for Strong Typing

1. Use Prop Types: Define Props interfaces or types for each component. This ensures that components only receive the correct types of data, improving code quality and reducing runtime errors.

Copy
1interface ButtonProps {
2  label: string;
3  onClick: () => void;
4  disabled?: boolean; // optional prop
5}

2. Strict Type Checking: Enable strict mode in your TypeScript configuration to catch potential issues early. This ensures better type safety throughout your project.

Copy
1
2"strict": true
3

2. Create Reusable and Modular Components

1. Atomic Design: Follow the Atomic Design methodology by breaking down the UI into small, reusable components like buttons, inputs (atoms), and larger, composite components (molecules, organisms).

2. Component Reusability: Make components as reusable as possible by keeping them independent of specific business logic and passing configurable props.

3. Isolate Components with Storybook

1. Component Isolation: Develop and test UI components in isolation using Storybook. This helps avoid side effects and ensures each component is built correctly without interference from the application context.

2. Create Meaningful Stories: Write multiple stories for different component states (e.g., loading, error, default, etc.). This helps visualize all possible variations of the component.

Copy
1export const Primary = Template.bind({});
2Primary.args = {
3  label: 'Submit',
4  disabled: false,
5};

3. Storybook Knobs: Use Storybook add-ons like Knobs to dynamically change props during development for better interaction testing.

4. Integrate Testing with Storybook

1. Snapshot Testing: Use Jest with Storybook to create snapshot tests for components. This helps ensure that components do not change unexpectedly over time.

Copy
1
2npm install --save-dev @storybook/addon-storyshots
3

2. Unit Testing: Integrate React Testing Library or Jest for unit tests, ensuring that components function as expected and pass all required props and states.

Copy
1test('renders correctly', () => {
2  render(<Button label="Click Me" />);
3  expect(screen.getByText('Click Me')).toBeInTheDocument();
4});

5. Follow a Consistent Folder Structure

Organize components by feature or type (e.g., atoms, molecules, organisms). Include TypeScript, Storybook, and test files in the same folder for better maintainability.

6. Document Components with Storybook

1. Auto-generate Documentation: Use Storybook’s Docs feature to generate documentation automatically for each component, making it easier for developers and designers to understand component usage and props.

2. Prop Descriptions: Provide clear descriptions of each prop using TypeScript comments or JSDoc to improve auto-generated documentation.

7. Use Default Props and Optional Chaining

Use default props in TypeScript to ensure that components can still work even if not all props are provided.

tsx

const Button: React.FC<ButtonProps> = ({ label, disabled = false }) => (
  <button disabled={disabled}>{label}</button>
);

2. Use optional chaining to safely access props or nested objects without causing runtime errors.

Copy
1
2user?.address?.street;
3

8. Use TypeScript with React Hooks and Context

1. Custom Hooks: Ensure custom hooks are typed correctly, especially when managing complex state or API calls.

Copy
1
2const useFetch = <T,>(url: string): T[] => { /*...*/ };

2. React Context: When using the Context API, define and export the context types explicitly to ensure type safety throughout the app.

9. Optimize Component Performance

• Use React.memo to prevent unnecessary re-renders of functional components, especially for UI components that rely on props.

• For large forms or data-heavy components, split them into smaller, more manageable parts to avoid performance bottlenecks.

10. Ensure Accessibility

• Follow accessibility guidelines (WCAG) when building components. Use ARIA attributes and ensure that components are keyboard navigable.

• Test components with tools like aXe or Storybook’s accessibility add-on to ensure that they meet accessibility standards.

By following these best practices, you ensure your React UI components are robust, reusable, and scalable, making your development workflow more efficient and error-free.

Conclusion:

In this blog post, we have explored how to build robust React UI components with TypeScript and Storybook. The combination of TypeScript and Storybook helps us to create high-quality React UI components that are both durable and maintainable.

By using TypeScript, we can catch errors at compile time, improve code readability, and take advantage of rich development-time tooling. With Storybook, we can view and interact with our components in isolation, making it easier to test components and maintain them.

Overall, they help us ensure that our React projects are scalable, maintainable, and efficient, leading to a better user experience for our end-users.

Well, if you are building a React app with TypeScript and want to use Storybook to build your components in isolation try DhiWise. The platform now provides built-in support for React TypeScript.