How to build React Reusable components faster with Aspect?

React Reusable components are crucial in react development. Now it's easy to implement it. Thanks to the Aspect tool that offers drag and drop concepts to the developers. It offers a way to sync the design to the code base.?

The new tool also offers libraries like Material UI and Tailwind CSS.?

How to start Aspect?

The initial step is to sign up. After that, install the Aspect CLI globally with the command.?

Npm install @metacode-inc/aspect -g

The aspect will create the new project with an empty view to begin.?

Project overview

• Project: It enables you to view the list of the project's details like Product ID. Now you can generate and synchronize the codebase.?
• Views: Creating different project views.?
• Properties: Defining the projects custom properties
• States: Creating the custom states and setting the conditions for the elements.
• Elements: Projects elements management
• CSS: The main use of CSS is to define the project's styling.?
• +insert: Adding filter and also adding elements to the project.?

Creating a View:

Click on the + symbol on the VIEWS to create a new view. After that click on View 2 and give it the name “Product”

How to add Elements?

Creating the parent layout:

Click on the +INSERT and selective div from the dropdown. Now we will start by adding the parent div. Now you will see the + symbol once you hover over the view. It represents the adding of elements. Right-click on the element and again drag it to enlarge the element to the desired size.?

Creating the Navbar:

There will be a parent layout where you will add another div for the navbar. Repeat the same process and add the parent div. Set the min-height to 63 and width to 100% after going to CSS.?

Now it's time to add some navbar lists to the project after using a ul element. Click on the INSERT and then select ul. Add it to the parent div -div-0.?

Now add the three li list item elements in the ul element. P element will be in the li element. Now add home, about and product to the text property.?

Add the text to the p element and click on CSS>QUICK LAYOUT tab. Select the first layout to show the contents inline.?

Now change the list-style property in the ul element to none. For div-0, specify the background color of #42a7f5.?

The next will be aligning the element. Set the margin-right of 7px and colour #fff to each li element.?

Creating products:

Use the p element to make the layout for the product description. Later on, make the child layout for the product.?

Insert the div and add another div inside that. Add p inside div-1. Changing the text property of p-2 to the product.?

Click on the div-1 and go to CSS>Quick Layout Tab. Like this, you will style the child’s layout. Select the second layout and change the width property of div-2 to 100%.?

Add another div inside div 2 to hold the product details. Inserting one ‘image’, two ‘p’ and one ‘button’. Changing the text property of the p-3 element to Techno m16. Also, change the text property of the P-4 element to Price: $200. Setting the text property to “Add to card” and adding p to the button.?

Changing the font-size properties to 12 ppx for entire p elements. Setting the aligned properties to the center. Click div-3 and press Ctrl + D to duplicate the div. It will also create div-4. Change the text once you go ahead.?

Click on div-2, go to CSS>QUICK LAYOUT and select the first layout.?

Exporting the components:

We have finished creating the component using the aspect UI builder. You need to fetch the design and sync with the codebase. You can follow the below command.?

Aspect fetch? - -Project <projectID> - - out <outputDirectory> - - key? <apiKey>

You will get the project ID and API key by clicking on the project name in the project dropdown.?

Click on the generate new API key button. It will generate a new API. By default, the <apikey> is never generated.?

The aspect will create the component.css file and component.tsx.

Aspect is a good software development tool for react developers. It enables them to make working easy. It enables you to make the react reusable component work within the time frame.?