https://embed.notionlytics.com/wt/ZXlKd1lXZGxTV1FpT2lJeE1ESmhZemMwTWpFMk5qQTBZVFZoT0RVNU16aG1PR00zWm1ZNU1EZGtOaUlzSW5kdmNtdHpjR0ZqWlZSeVlXTnJaWEpKWkNJNklrbGpiM1pzV2pOcU1VUnBRM1ZUUm1WNFRtdHlJbjA9

What is a ScandiPWA component?

A component is independent, not a single block, which divides the UI into smaller pieces and lets you think about each piece in isolation. A Component is one of the core building blocks of ScandiPWA. We could say that ScandiPWA UI will be made up of pieces called components.

See the guide to understand how ScandiPWA components interact with the application:

What is the architecture of ScandiPWA?

What ScandiPWA component folder consists of?

The component folder consists of many files which component uses:

• The *.component.js file is responsible for rendering components to UI.
• The *.container.js file is responsible for the logic of the component.
• The *.config.js file is responsible for defining any values, constants for the component.
• The *.style.scss file is responsible for the design of the component.
• The index.js file is responsible for exporting component which enables aliasing.

In ScandiPWA components are located under the src/component folder and under the src/route folder in the root of the ScandiPWA folder. Component names are always named after the UpperCamelCase pattern. For example, ProductList.

<aside> ➡️ When creating a component, the component name must start with an upper case letter.

</aside>

How to create a component?

There are different ways how to create components, either with ScandiPWA CLI commands or with the VSCode plugin. You can auto-generate component structure using ScandiPWA Development Toolkit in VSCode.

You can create components either with ScandiPWA CLI commands or with the VSCode plugin.

• How to use ScandiPWA CLI commands for creating components?