Create a Hello World page component with a single string parameter allowing the user to enter a title to display in the component.
This tutorial assumes basic knowledge of JSON, REST APIs, and React.
Read [About Bloomreach Content](🔗) and have a [development project](🔗) with a local copy of the [Reference SPA](🔗) up and running.
[Obtain an authorization token](🔗) for the Site Management API if you haven't already done so.
Have the [Site Management API](🔗), [Base Components](🔗), and [SPA SDK](🔗) and [React SDK](🔗) reference documentation handy.
To perform the Site Management API request in this tutorial it is recommended to use the [Postman collection](🔗) for the Site Management API. However, you can use any other method or tool you like such as the [Site development app](🔗) or curl or httpies.
## Define the Hello World Component using the Site Management API
The first step is to define a new component and add it to the "brx-reference-spa" component group using the [Site Management API's](🔗) components endpoint.
The configuration for the new component will look as follows:
As you can see in the configuration, the new component is based on the [Base Component](🔗) and adds a string parameter "title" with default value "Hello World!".
To add the component to the "brx-reference-spa" component group, send a PUT request to the [components endpoint](🔗) using the above JSON representation as request body:
Make sure to include your authorization token in the `
The easiest way to send Site Management API requests is by using the [Postman collection](🔗).
## Implement the Hello World Component in the Reference SPA
Now that the Hello World component is defined in the backend, the frontend application must be updated to be able to render the new component.
In your [local copy of the Reference SPA](🔗), create a new file `
HelloWorld.tsx` in `
components` with the following contents:
The interface `
HelloWorldParameters` defines the expected parameters (just "title" in this case) and should be consistent with the parameters defined in the component configuration.
HelloWorld` React component reads out the title parameter and returns the JSX to render the component.
At the bottom of `
components/index.ts`, add the following line:
components/App.tsx`, add `
HelloWorld` to the list of components imported from '`
Also in `
components/App.tsx`, in the function `
App`, add `
HelloWorld` to the mapping constant:
## Add the Hello World Component to the Homepage and Change the Title
The Hello World component is now ready to be used!
In Bloomreach Content, navigate to _Projects_ and open your development project.
Click on the your channel to open it in the _Experience manager_.
(Alternatively, navigate to _Experience manager_, open your channel, and select your development project in _For Project_).
Make sure you are viewing the homepage.
In the _Page_ menu, select _Add to project_:
Make sure the component overlay is enabled.
Open the left sidebar and select _Components_.
Add the "Hello World" component from the catalog to the main container on the homepage. It will show the default title "Hello World!".
Click on the component to open the editor in the right sidebar.
Change the title to something else, for example “Hello SPA!”.
Click _Save_ and close the component editor.
Congratulations, you created and used your first Bloomreach Headless Experience Manager component!