2. Create a component

[ctrl+alt+n]

Nice browser. Is it antique?

No, seriously - your browser is so old that some features of patternplate don't work as expected.

Don't worry - you can either continue with a restricted version or install an up-to-date browser.

We messed up.

Sorry, but your user experience might be affected.

- Try reloading the page

- Report the problem at github.com/patternplate/patternplate

Create a Component

Learn how to add our own component to Alva.

Prerequesites

Make sure you have the following software installed on your machine.

🌲 git
🐢 Node.js >= 8
💻 A terminal emulator
🌐 Internet connection

1. Setup up Alva Design Library

In this guide we'll skip the project setup part by reusing the Alva Design Library.

If you want to start fresh, skip to our Create a Library Guide

Please make sure to follow our Connnect a Library Guide before continuing with step 2.

2. Add a Hello World component

Open your favorite text editor in the Alva Design Library folder you just connected to Alva. We'll show VSCode in screenshots and videos but any text editor will do.

Let's create a new folder called "Hello World" with an index.tsx file in it:

mkdir src/hello-world && touch src/hello-world/index.tsx

Add the following code to it. It is a simple React component rendering "Hello, World!" into an <h1> tag:

import * as React from 'react';

export const HelloWorld: React.SFC = () => {
    return (
        <h1>Hello, World!</h1>
    )
}

This won't do anyhting on its own in Alva just yet. Let's add our brand new component to src/index.ts to change that:

/** lines omitted */
export * from './space';
export * from './teaser';
export * from './hello-world';
/** lines omitted */
export * from './space';
export * from './teaser';
export * from './hello-world';

3. Build your changes

For Alva to understand your new code you need to build it with the TypeScript compiler. Let's do that real quick. Execute the following command in your Alva Design Library folder.

npm run build

When TypeScript is done translating your code the terminal window should resemble this:

λ npm run build

> [email protected] build /Users/marneb/Documents/alva/alva-design
> tsc

~/alva/alva-design
λ

We are all set, let's switch back to Alva.

4. Update Alva Design Library in your Alva project

Start Alva and open the project you created while working through the Connect a Library Guide.

Open the "Libraries" Tab. On the Alva Website UI card hit the "Update" button. Wait for the card to switch back from "Connecting" to "Connected".

5. Use the Hello World component

Let's put our component to use! Click on the search bar above the pattern list and type in "Hello World" (without quotation marks).

You should now see "Hello, World" into your preview, rendered by your very first component connected to Alva.

Congratulations! 🎉

Next: Create Properties