vtex-io-react-apps

To build a custom storefront component for VTEX IO, you create a React app using the VTEX IO React Builder, export components from the root /react directory, and map them as blocks using interfaces.json for Store Framework integration.

Integrating a React component with the VTEX Site Editor requires defining interfaces.json for block mapping and contentSchemas.json to establish editable content schemas, allowing merchants to customize component properties directly within the editor.

The best way to style storefront components in VTEX IO is by using vtex.css-handles, which provides consistent CSS class naming and allows external styling overrides while adhering to VTEX Store Framework styling standards.

Yes, you can fetch data in VTEX IO React apps using GraphQL with the useQuery hook, enabling efficient data retrieval for storefront blocks and admin interfaces directly within your React components.

Yes, building admin panel interfaces in VTEX IO requires aligning with the VTEX Styleguide, ensuring UI consistency and proper component behavior within the VTEX admin environment.

If a VTEX IO storefront block does not appear in the Site Editor, it likely lacks proper interfaces.json mapping or root-level exports in the /react directory, preventing the Store Framework from registering the component.