---
title: Content Modeling in React
description: Learn how to handle custom blocks, render rich text, and use story references to manage content across your React project.
url: https://storyblok.com/docs/guides/react/content-modeling
---

# Content Modeling in React

Learn how to handle different content type blocks, render rich text, and use story references to manage content globally.

## Setup

In the existing space, create the following blocks:

-   An `article` content type block with the following fields:
    -   `title`: Text
    -   `content`: Rich text
-   An `article-overview` content type block with the following field:
    -   `title`: Text
-   A `featured-articles` nestable block with the following field:
    -   `articles`: References

  

> [!NOTE]
> Learn more about fields in the [concept](/docs/concepts/fields).

Next, create an `Articles` folder, open it, and create the following stories:

-   A few stories that use the `article` content type.
-   An article overview story with a `article-overview` content type. Select the option **Define as root for the folder**.

Finally, add the `featured-articles` block to the `body` field of the **Home** story, and select articles to feature.

  

> [!NOTE]
> Learn more about fields in the [concept](https://www.storyblok.com/docs/concepts/fields).

  

### Fetch and list all articles

Create a new `storyblok/ArticleOverview.jsx` file to get all stories from this new content type.

storyblok/ArticleOverview.jsx

```javascript
import { useStoryblokApi } from '@storyblok/react';
import { use, Suspense, useMemo } from 'react';
import { Link } from 'react-router';

export default function ArticleOverview() {
  const storyblokApi = useStoryblokApi();
  const articlesPromise = useMemo(() => {
    return storyblokApi.getAll('cdn/stories', {
      version: 'draft',
      starts_with: 'articles',
      content_type: 'article',
    });
  }, [storyblokApi]);

  return (
    <section>
      <h2>Articles</h2>
      <Suspense fallback={<p>Loading...</p>}>
        <ul>
          <ArticleList getArticles={articlesPromise} />
        </ul>
      </Suspense>
    </section>
  );
}

export function ArticleList({ getArticles }) {
  const articles = use(getArticles);

  return articles.map((article) => (
    <li key={article.uuid}>
      <Link to={`/${article.full_slug}`}>{article.name}</Link>
    </li>
  ));
}
```

Using the `starts_with` parameter, only stories from the “Articles” folder are fetched. Using the `content_type` parameter, the results are restricted to stories of the content type `article`.

> [!NOTE]
> Learn more about parameters and filter queries in the [Content Delivery API documentation](https://www.storyblok.com/docs/api/content-delivery/v2).

Now, the article overview page shows a list of links to all articles.

## Create the article block

Add a new `src/storyblok/Article.jsx` component to render the new article content type.

src/storyblok/Article.jsx

```javascript
import { storyblokEditable, StoryblokRichText } from '@storyblok/react';

export default function Article({ blok }) {
  return (
    <div {...storyblokEditable(blok)} className="article">
      <h1>{blok.title}</h1>
      <StoryblokRichText doc={blok.content} />
    </div>
  );
}
```

To render rich text fields, use the `StoryblokRichText` component provided by the `@storyblok/react` module.

  

> [!NOTE]
> Learn more about handling rich text in Storyblok in the [fields concept](/docs/concepts/fields) and the `@storyblok/richtext` [reference](https://www.storyblok.com/docs/libraries/js/richtext).

When clicking on links present in the article overview page, an article page renders correctly.

## Handle referenced stories

In the `src/App.jsx` data file, set the `resolve_relations` parameter to get the full object response of referenced stories.

src/App.jsx

```javascript
import { StoryblokComponent, useStoryblok } from '@storyblok/react';
import { useParams } from 'react-router';

export default function App() {
  const { '*': slug } = useParams();
  const story = useStoryblok(slug || "home", {
    version: 'draft',
    resolve_relations: 'featured-articles.articles',
  });

  if (!story?.content) {
    return <div>Loading...</div>;
  }

  return <StoryblokComponent blok={story.content} />;
}
```

> [!NOTE]
> Learn more in the [references concept](https://www.storyblok.com/docs/concepts/references) documentation.

Next, create a new `storyblok/FeaturedArticles.jsx` component.

src/storyblok/FeaturedArticles.jsx

```javascript
import { storyblokEditable } from '@storyblok/react';
import { Link } from 'react-router';

export default function FeaturedArticles({ blok }) {
  return (
    <section {...storyblokEditable(blok)} className="featured-articles">
      <h2>Featured Articles</h2>
      <ul>
        {blok.articles.map((article) => (
          <li key={article.uuid}>
            <Link to={`/${article.full_slug}`}>{article.name}</Link>
          </li>
        ))}
      </ul>
    </section>
  );
}
```

Now, this component will render links to the featured articles in the home page of your project.

## Related resources

[Concept: Fields](/docs/concepts/fields)

[Concept: References](/docs/concepts/references)

[@storyblok/richtext Package Reference](https://www.storyblok.com/docs/libraries/js/richtext)

  

## Pagination

-   [Previous: Dynamic Routing in React](/docs/guides/react/dynamic-routing)