Skip to main content

Import Components

Tip

We would appreciate any feedback on our tutorial guide. If you are stuck at any time, please reach out on our GitHub Discussions boardopens in a new window.

Before starting, complete Workplace Setup and follow one setup path from Getting Started.

Step 1: Open Home.tsx​

In Visual Studio Code, open my-new-app project. From here, navigate into products/web/src/routes/Home, and open the Home.tsx file.

└── products
    └── web
        ├── src
        |   ├── routes
        |   |   └── Home
        |   |       ├── index.ts
        |   |       └── Home.tsx
        |   ├── browser.tsx
        |   └── document.tsx
        └── package.json

Step 2: Import React​

Anytime you're using a React component, make sure to import the following dependency at the top:

import React from 'react';

Step 3: Importing Component​

Depending on the project requirements, the @uhg-abyss/web/ui, @uhg-abyss/web/hooks, and @uhg-abyss/web/tools libraries have different components in order to assemble products quickly.

There are multiple ways to customize and integrate components into your project. Let's start with the Card component. A Card acts as a container used to display content related to a single subject.

You can access the documentation for the Card through the Abyss Portal. The import statement for a card should look like this:

import { Card } from '@uhg-abyss/web/ui/Card';

In Home.tsx, within the tsx of Home functional component, insert the following code:

<Card>Hello tutorial - We did it!</Card>

Step 4: Verifying Your Code​

Your code in Home.tsx should now look like this:

import React from 'react';
import { Router } from '@uhg-abyss/web/ui/Router';
import { Group } from '@uhg-abyss/web/ui/Group';
import { Button } from '@uhg-abyss/web/ui/Button';
import { Card } from '@uhg-abyss/web/ui/Card';


export const Home = () => {
  return (
    <React.Fragment>
      <Router.MetaTags title="Home" />
      <Group justify="center">
        <Button href="https://abyss.uhc.com">View Abyss Docs</Button>
        <Button variant="outline" href="/hello-abyss">
          Hello Abyss!
        </Button>
      </Group>
      <Card>Hello tutorial - We did it!</Card>
    </React.Fragment>
  );
};

Great job, you have successfully imported components!

Table of Contents