Skip to main content

How to create a new React component in web application?

In this guide, we will show you how to create a new React component in a web application package using ShipFast. The component will be named ExampleComponent, and it will display an Example component message.

Create Component Skeleton​

First, create a component main file and a separate styles file under packages/webapp/src/shared/components/exampleComponent/. The component file should look like this:

packages/webapp/src/shared/components/exampleComponent/example.component.tsx
import { FormattedMessage } from 'react-intl';

import { Container } from './example.styles';

export const ExampleComponent = () => {
  return (
    <Container>
      <h1>
        <FormattedMessage defaultMessage="Example component message" id="ExampleComponent / Header message" />
      </h1>
    </Container>
  );
};
info

In this example, we are using the react-intl package to localize the message. It is recommended to use only localized copy in the entire project from the start of the development. The component styles file should look like this:

packages/webapp/src/shared/components/exampleComponent/example.styles.ts
import { typography } from '@shipfast/webapp-core/theme';
import styled from 'styled-components';

export const Container = styled.div`
  ${typography.heading5};
`;
info

In this example, we are using the typography object from the @shipfast/webapp-core/theme package, which contains all project-wide theme parts like sizes, colors, and fonts.

To simplify imports, it is recommended to use barrel exports. You can create an index.ts file in the desired directory and use it to export all the components in that directory. This way, you can import multiple components from the same directory using a single import statement.

packages/webapp/src/shared/components/exampleComponent/index.ts
export { ExampleComponent } from './example.component';

Create a test for the Component​

Create a directory __tests__ in the component folder that will contain all tests along with the following file:

packages/webapp/src/shared/components/exampleComponent/__tests__/example.component.spec.tsx
import { render } from '../../../../tests/utils/rendering';
import { ExampleComponent } from '../exampleComponent.component';

describe('ExampleComponent: Component', () => {
  const Component = () => <ExampleComponent />;

  it('should render without errors', () => {
    render(<Component />);
  });
});
info

This test will simply check if the component renders without any issues. For more information about testing web application components, please visit the Writing tests for webapp section.

Create a Storybook File​

The last step of creating the component structure will be to create a Storybook file so that the newly created component will be displayed along with all other components in Storybook tool.

packages/webapp/src/shared/components/exampleComponent/example.stories.tsx
import { Story } from '@storybook/react';
import { ExampleComponent } from './example.component';

const Template: Story = () => {
  return <ExampleComponent />;
};

export default {
  title: 'Shared/ExampleComponent',
  component: ExampleComponent,
};

export const Default = Template.bind({});

Display component on application home page​

Finally, you can use the ready component on the home page of the app by importing it and displaying it under the welcome message:

packages/webapp/src/routes/home/home.component.tsx
...
import { ExampleComponent } from '../../shared/components/example.component';
...
return (
    <Container>
        ...
        <typography.H1>
            <FormattedMessage defaultMessage="Welcome!" id="Home / title" />
        </typography.H1>

        <ExampleComponent />
    <Container />
);
...

Generating components​

tip

The example component structure can be generated automatically using plop command. Check the webapp API reference for more information.