Introduction to React Components

An overview of React Components and how they work in Aurora.

Custom React components enable you to create dynamic elements in your Community that enhance the member experience. Like Handlebars components, your React components can be placed virtually anywhere in your Community and can be enhanced with unique styling, community data from our GraphQL API, localization, and more.

These components can be easily reused across different parts of your community, promoting consistency and reducing redundancy. React components enhance maintainability and scalability by breaking the UI into independent, manageable pieces.

All the resources for these types of custom components are located in the GitHub customization repository for that particular community.

While you can add HTML components via the Page Templates area in the Aurora Designer, you must commit and push the custom components directly to the Git Repository.

Prerequisites

• After installing Node.js, open a terminal and navigate to the project directory. Run npm install to install the necessary dependencies, including the Aurora SDK. This command ensures that all required packages are available.
• Ensure your development environment is configured with Node.js, specifically version 18 or newer. It is recommended that you use Node Version Manager (NVM) to manage and switch between different Node.js versions. If NVM is installed, execute nvm use in the terminal to switch to the appropriate Node.js version.
• You must clone the GitHub customization repository for that particular community where these components are required.

Setting up environment

1. Open a terminal and run npm i from the root directory of the repository.
2. Open the repo filesystem and locate the .env.local file in the root directory. Use a text editor to make the necessary modifications.
3. Define the LIA_URL variable within the .env.local file. This variable should be set to the base URL of your community. For example: LIA_URL=https://community.bigco.com.
4. Define the SDK_KEY variable by assigning it the value of the SDK Key, which can be found in the Dev Tools section (/admin/dev) of your community's admin console. For example: SDK_KEY=abcd1234.
5. Save the changes made to the .env.local file.

To create a React component manually, you can start by checking out to a new dev branch locally and developing the custom component. Once it is completed and you have verified that the component is working properly, you can raise a PR with your changes in the main branch.

The components should be available on Aurora's Designer page, where you can add them to any of the different pages in the UI.

In this section, you will learn how to:

• Utilize React Component Typescript Types
• Create a React Component Manually
• Style a React Component
• Add Text Properties for a React Component
• Add Miscellaneous Assets to React Components
• Add GraphQL Queries and Fragments to a React Component
• Add React Components to a Quilt

As an example, throughout this React component section, we will create a custom React component named catFactToast and describe how you can customize it.