Skip to main content

Import Components

Note:
We would appreciate any feedback on our tutorial guide. If you are stuck at any time, make sure to contact the Abyss Admiral assigned to your team. If they cannot help, send a help request on our Contact Page.

Before starting, be sure to complete the Create Abyss App tutorial.

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 { Layout } from '@uhg-abyss/web/ui/Layout';
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" />
      <Layout.Group alignLayout="center">
        <Button href="https://abyss.uhc.com">View Abyss Docs</Button>
        <Button variant="outline" href="/hello-abyss">
          Hello Abyss!
        </Button>
      </Layout.Group>
      <Card>Hello tutorial - We did it!</Card>
    </React.Fragment>
  );
};

Great job, you have successfully imported components!

Table of Contents