# Modify the \<Root> component

Let's continue by taking our initial baby steps in getting Frontity to display the content we want.

Modify the `<Root>` component in the `/packages/my-first-theme/src/index.js` file so that it returns an `<h1>` element containing the text “Hello Frontity".

```jsx
// File: /packages/my-first-theme/src/index.js

const Root = () => {
  return (
    <>
      <h1>Hello Frontity</h1>
    </>
  )
}
```

Once you save the file you should see the content in the browser change.

{% hint style="info" %}
Webpack watches for changes in the `/packages` directory and refreshes the browser if it detects any changes. Since we have changed the content of a file within the `/packages` directory the content in the browser should automatically update.
{% endhint %}

{% hint style="success" %}
**Check you're on the right track** by comparing your changes with [the ones in this commit](https://github.com/frontity-demos/tutorial-hello-frontity/commit/7ba7b0879bb02240c6bf627a4f15c50ba249726b).
{% endhint %}

It would be convenient, and make our codebase cleaner and more logical, and hence our future development much easier, if all our React components were placed together in a single directory. So, let's move the `<Root>` component into its own file which we'll put in a separate directory.

Create a new directory called `components` inside `/packages/my-first-theme/src`. This is where we will create all the component files for our theme. Then, inside `/packages/my-first-theme/src/components` create a new file called `index.js`.

Add the following code to the new file *(which we will henceforth refer to as the 'root component' file to distinguish it from the other `index.js` file in the `src` directory one level below in the structure)*.

```jsx
// File: /packages/my-first-theme/src/components/index.js

import React from "react"

const Root = () => {
  return (
    <>
      <h1>Hello Frontity</h1>
    </>
  )
}

export default Root
```

You will see that this is the same `<Root>` component as before but moved into the new file and then exported. We also need to import React into our new file.

We now need to import the component into the file `/packages/my-first-theme/src/index.js` which you can modify as follows:

```jsx
// File: /packages/my-first-theme/src/index.js

import Root from "./components"

const myFirstTheme = {
  name: "my-first-theme",
  roots: {
    theme: Root,
  },
  state: {
    theme: {},
  },
  actions: {
    theme: {},
  },
}

export default myFirstTheme
```

Save both files and make a quick check to see that everything is still working in the browser.

{% hint style="success" %}
**Check you're on the right track** by comparing your changes with [the ones in this commit](https://github.com/frontity-demos/tutorial-hello-frontity/commit/88e834628e3e4a66676425b45314f98e0046c3c2).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tutorial.frontity.org/part1-creating-a-custom-theme/modify-the-root-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.