Learn how to add our own component to Alva.
Make sure you have the following software installed on your machine.
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.
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';
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.
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".
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! 🎉