Building Reusable React Components with Aspect
Getting Started with Aspect
To begin using Aspect, simply sign up for an account and install the Aspect CLI globally using the following command:
npm install -g @aspect/cliOnce you’re signed up, Aspect will create a new project with an empty view to get you started.
Exploring the Aspect Project UI
Before diving into building your component, take a moment to familiarize yourself with the Aspect project UI. The interface is divided into several sections:
- Project: View your project’s details, generate and sync your codebase, and access your API key.
- VIEWS: Create and manage different views for your project.
- PROPERTIES: Define custom properties for your project.
- STATES: Create custom states and set conditions for elements in your project.
- ELEMENTS: Manage elements in your project and define their hierarchy.
- CSS: Define your project’s styling and use the quick layout to organize elements.
Building a Reusable Component
Now that you’re familiar with the Aspect UI, let’s build a simple product page component. We’ll start by creating a new view and adding elements to it.
- Create a parent layout: Add a parent div element to your view using the + INSERT button.
- Add a navbar: Add a navbar div element to your parent layout and style it using the CSS tab.
- Add products: Create a child layout for products and add a p element for the product description.
- Style the component: Use the CSS tab to style your component and add layouts to organize your elements.
Exporting Your Component
Once you’ve finished building your component, use the Aspect CLI to fetch and sync your design with your codebase. Aspect will generate a component.tsx and components.css file that you can import and use in your projects.
aspect fetch
aspect syncBy following these steps, you can reduce the development time associated with creating reusable React components. With Aspect, you can focus on building complex applications without worrying about the hassle of setting up a React project.