The react builder is used to develop apps with React when your project requires customized frontend solutions not covered by our native components.

This builder interprets the /react directory, where you must place the app’s React code using Typescript. When you run your app, this code is transformed into compiled bundles, ready for use in frontend apps.

To learn how to implement apps using this builder, check our Storefront apps guide.

An app that uses the react builder has a folder named /react in its root directory. The directory structure may vary depending on the development preferences or specific project settings.

The basic structure of a React folder is composed of the following files, as you can see in the React boilerplate app:

• typings: Folder holding TypeScript type definitions.
• .tsx files: Contain the source code of React components. Replace {ReactCodeFileName} according to your scenario.
• tsconfig.json: Specifies how the TypeScript compiler should behave, indicating the root directory and the output directory for the compiled code, among other project settings for TypeScript. Check the tsconfig.json documentation to learn more about this file.
• package.json: Defines the project’s metadata, dependencies, and custom scripts using Yarn, and other configuration settings.
• yarn.lock: Locks down the exact versions of your project’s dependencies, including transitive dependencies, to ensure consistent builds across different machines and environments. This file is automatically generated based on the dependencies in your package.json file.

To use the react builder, follow these steps:

1. Clone the React boilerplate app to your local files.

2. Modify the manifest.json file in the React example app to include your app’s metadata, such as its name, version, vendor, and dependencies. The react builder must also be declared in the app’s manifest.json file as follows:

   
   

   _10

   "builders": {

   _10

   "react": "3.x"

   _10

   }

   
   

3. Link your app to a development workspace.

For more information on how to create a React app using VTEX IO, see Creating a new app.

Learn how to link a React component to a Store Framework block in store builder.

The react builder is versatile and enables the development of frontend apps with different characteristics and objectives. The default template provides only the essential files, but the possibilities are countless.

Below is an example of a React component and its folders and files within the react directory.

The VTEX Store Components is a collection of components that can be used to create or extend other VTEX apps.

Note that an app using the react builder can export a single or multiple components.

This collection is composed by some components, such as Availability Subscriber, Buy Button, SKU Selector, Search Bar, among others.

The app’s file structure includes folders and files that enable the use of the collection’s React components. You can check some of them below:

• The components folder contains the folders of each React component.
• The graphql folder contains GraphQL queries and mutations, which some components use to communicate with the backend. Keeping GraphQL code separate from other parts of the React component promotes modularity and facilitates the management of queries, mutations, or subscriptions specific to the React component.
• The utils folder contains utility functions or helper modules used by some components.