> For the complete documentation index, see [llms.txt](https://shopify-1.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shopify-1.gitbook.io/react/exercises/1.-productlist-light/step-2.md).

# Step 2

## Title

First create yout `Title` component. Since this is a stateless component you can use a simple `function` that returns JSX.

Try using children to be able to call your component as following in your `render()` function in `App.js`:

```jsx
import Title from '../Title';
...
render () {
  return (
    <div>
      <Title>
        Product Page
      </Title>
    </div>
  );
}
```

⚠️ Don't forget to import your component at the begining of `App.js` with: `import Title from '../Title';` and to `export default` your `function` or your `class` in your `Title` component.

## ProductList

Now that you have your title, create a component to render the list of products. Here is the expected API:

```jsx
import Title from '../Title';
import ProductList from '../ProductList';
...
render () {
  return (
    <div>
      <Title>
        Product Page
      </Title>

      <ProductList products={products} />
    </div>
  );
}
```