Build React reusable components faster with Aspect
Tags: react, webdev
Published: 2022-07-20 18:14:00

**Written by [Clara Ekekenta](https://blog.logrocket.com/author/claraekekenta/)✏️**

[Aspect](https://aspect.app) is a new development tool that allows you to create React components virtually in your browser. It eliminates the stress of creating and setting up a React project for applications. 

Aspect saves on development time by providing a dashboard with HTML drag-and-drop functionality that greatly simplifies the process of creating React components. Aspect also syncs your designs to your codebase and provides an option to export them as a zip file. 

Lots of additional, cool features are promised in a [future version](https://twitter.com/aspectdotapp), like support for libraries such as MaterialUI and Tailwind CSS, as well as Sketch and AdobeXD. 

In this tutorial, we'll demonstrate how to use Aspect to build a reusable component faster. We’ll build the simple product page shown below: 

![Simple Product Page](https://blog.logrocket.com/wp-content/uploads/2022/07/simple-product-page.png) _Jump ahead:_

*   [Getting started](#getting-started)
*   [Project UI overview](#project-ui-overview)
*   [Creating a view](#creating-view)
*   [Adding elements](#adding-elements)
    *   [Creating the parent layout](#creating-parent-layout)
    *   [Creating the navbar](#creating-navbar)
    *   [Creating products](#creating-products)
*   [Exporting components](#exporting-components)

## Getting started <a name="getting-started">

To get started with Aspect, [sign up here](https://aspect.app/signup). 

Then, install the Aspect CLI globally using the following command:

```
npm install @metacode-inc/aspect -g    
```

Once you’re signed up, Aspect will create a new project with an empty view to get you started.

## Project UI overview <a name="project-ui-overview">

Before we go any further, let's take a quick look at the Aspect project’s UI to become more familiar with how to navigate and use the tool. 

![Aspect Project UI](https://blog.logrocket.com/wp-content/uploads/2022/07/aspect-project-ui.png) 

Here’s a summary of the different sections of Aspect’s user interface:

*   **Project**: View a list of your project’s details, such as the product ID; you can also generate, view, and sync your codebase using your project's API key from here
*   **VIEWS**: Create different views for your projects; double-click on a view to change its default name
*   **PROPERTIES**: Define the custom properties of your project
*   **STATES**: Create custom states and set conditions for the elements in your project
*   **ELEMENTS**: Manage the elements in your project and define their hierarchy
*   **CSS**: Define your project’s styling; use the quick layout to organize your elements; the CSS section is visible when the ELEMENTS section is expanded
*   **+ INSERT**: Add a filter and add elements to your projects

Now that we have more familiarity with Aspect’s features, let’s work on building our product page.

## Creating a view <a name="creating-view">

We already have a view created by Aspect. To create a new view, click on the **+** symbol on the **VIEWS** tab. Then, double click on **View2** and rename it “Product”. ![Product Name](https://blog.logrocket.com/wp-content/uploads/2022/07/product-name.png)

## Adding elements <a name="adding-elements">

Now, let's add some elements to the view.

### Creating the parent layout <a name="creating-parent-layout">

We'll start by adding a parent `div` by clicking on **+ INSERT** and selecting **div** from the dropdown. When you hover on the view, you should see a **+** symbol appear. This indicates that an element has been selected. Right click on the element and drag it to enlarge the element to the desired size. ![Large Layout](https://blog.logrocket.com/wp-content/uploads/2022/07/large-layout.png)

### Creating the navbar <a name="creating-navbar">

Now that we have a parent layout, let’s add another `div` for the navbar. Repeat the same steps you followed to add the parent `div`. Then, go to the **CSS** tab and set the **width** to **100%** and the **min-height** to **63**. 

![CSS Tab](https://blog.logrocket.com/wp-content/uploads/2022/07/css-tab.png) The resulting layout should look like this: ![Layout With Header](https://blog.logrocket.com/wp-content/uploads/2022/07/layout-with-header.png) 

Next, let's use a `ul` element to add some navbar lists to the project. Click on **INSERT**, select **ul**, and add it to the parent `div`, **div-0**, by dropping it on it. 

Now, add three `li` list item elements in the `ul` element. In the `li` elements, add `p` elements and “Home", "About", and "Products" to the **text** property in the **PROPERTIES** tab. 

Add the text to the `p` elements, then click on the first layout in the **CSS** > **QUICK LAYOUT** tab to add styling. Select the first layout to display the contents inline. 

![Home About Products](https://blog.logrocket.com/wp-content/uploads/2022/07/home-about-products.png) 

To remove the bullet symbols, change the **list-style** property in the `ul` element to **none**. Add a black background by specifying **background-color** of **#42a7f5** for the **div-0**. 

Next, align the elements and change the font to white by adding a **margin-right** of **7px** and a color of **#fff** to each `li` element. ![Home About Products Blue Header](https://blog.logrocket.com/wp-content/uploads/2022/07/home-about-products-blue-header.png)

### Creating products <a name="creating-products">

Now, let’s make a layout for the products. We’ll use a `p` element for the product description. Then, we’ll create a child layout for the products. 

Insert a `div`, and inside of that insert another `div` and a `p` inside **div-1**. Now, change the **text** property of **p-2** to "Products". 

To style the child layout, click on **div-1** and go to the **CSS > QUICK LAYOUT** tab. Select the second layout, and change the **width** property of **div-2** to **100%**. Your project should look like this: ![Products Line](https://blog.logrocket.com/wp-content/uploads/2022/07/products-line.png) 

Next, insert another `div` inside **div-2** to hold the product details. Inside the **div-3** insert two `p`, one `img`, and one `button`. Change the **text** property of the **p-3** element to “Techno m16”, and change the **text** property of the **p-4 ** element to **Price: $200**. Next, add a `p` to the **button** and set the **text** property to “Add to cart”. 

Now, change the **font-size** properties of all the `p` elements in **div-3** to **12px** and set the **align** properties to **center**. 

Set the image’s **src** property to `https://tslnigeria.tv/wp-content/uploads/2021/05/mobile-phone.jpg`. 

Next, click on **div-3**, and press **Ctrl + D** to duplicate the div and create **div-4**. Go ahead and change the **text** and the **src** properties of each element in **div-4**. 

Now, click on **div-2**, go to **CSS > QUICK LAYOUT**, and select the first layout. 

You should have output similar to this: ![Products on Page](https://blog.logrocket.com/wp-content/uploads/2022/07/products-on-page.png)

## Exporting components <a name="exporting-components">

We’ve finished creating our component UI using the Aspect UI builder, Now, let’s fetch the design and sync it with our codebase using the following command:

```
aspect fetch --project <projectId> --out <outputDirectory> --key <apiKey>
```

You can get the project ID and API key by clicking on the project name in the **Project** dropdown. ![Project ID and API Key](https://blog.logrocket.com/wp-content/uploads/2022/07/project-id-and-api-key.png) 

**_N.B.,_** _the_ `<apiKey>` _is not generated by default, you'll need_ _to click on the_ **_Generate new API key_** _button_ 

After the design is successfully fetched and synced, you should see the following output: ![Successfully Fetched Project](https://blog.logrocket.com/wp-content/uploads/2022/07/successfully-fetched-project.png) 

Aspect will generate a `component.tsx` and `components.css` file. Now, you can import and use the view in your projects.

## Conclusion

In this tutorial, we demonstrated how to use Aspect to reduce the development time associated with creating reusable React components. 

Feel free to follow the steps outlined in this tutorial to add more features to the application.

---

## Full visibility into production React apps

Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, [try LogRocket](https://www2.logrocket.com/react-performance-monitoring). 

[![LogRocket signup](https://blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png)](https://www2.logrocket.com/react-performance-monitoring)

[LogRocket](https://www2.logrocket.com/react-performance-monitoring) is like a DVR for web and mobile apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.