# CMS React: Blog Templates

**URL:** <https://community.hubspot.com/t/cms-react-blog-templates/129141>\
**Category:** CMS Development\
**Created:** [April 2, 2025, 5:31pm UTC](https://community.hubspot.com/t/cms-react-blog-templates/129141 "2025-04-02T17:31:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tricialeach](https://avatars.discourse-cdn.com/v4/letter/t/9f8e36/32.png) [@tricialeach](https://community.hubspot.com/u/tricialeach)\
**Post date:** [April 2, 2025, 5:31pm UTC](https://community.hubspot.com/t/cms-react-blog-templates/129141/1 "2025-04-02T17:31:14Z")

</div>

Hello,

I’m trying to create a blog template with CMS React. This is an example of my template. How do I inject the Blog Body entry field into my theme template?

Thank you!

Tricia

```lia-code-sample
{% extends "./layouts/base.hubl.html" %}

{% block header %}
 {% module "header_js_module"
 path="@projects/app/src/components/modules/Header" %}
{% endblock header %}

{% block body %}
 HOW DO I PUT BLOG BODY HERE?
{% endblock body %}

{% block footer %}
 {% module "footer_js_module"
 path="@projects/app/src/components/modules/Footer" %}

{% endblock footer %}

```

---

<div class="post-metadata">

**Author:** ![Berangere](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/berangere/32/220784_2.png) [@Berangere](https://community.hubspot.com/u/Berangere)\
**Post date:** [April 3, 2025, 7:22am UTC](https://community.hubspot.com/t/cms-react-blog-templates/129141/2 "2025-04-03T07:22:14Z")

</div>

Hi @tricialeach and welcome, we are so glad to have you here!  
Thanks for asking the HubSpot Community!  
I’d love to put you in touch with our Top Experts: Hi @Anonymous, @jeremymandle and @Anton do you have suggestions to help @tricialeach, please?  
Have a wonderful day and thanks so much in advance for your valuable contributions!  
Kind Regards,  
Bérangère

---

<div class="post-metadata">

**Author:** ![nickdeckerdevs1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nickdeckerdevs1/32/5198_2.png) [@nickdeckerdevs1](https://community.hubspot.com/u/nickdeckerdevs1)\
**Post date:** [April 8, 2025, 7:16pm UTC](https://community.hubspot.com/t/cms-react-blog-templates/129141/3 "2025-04-08T19:16:06Z")

</div>

Why are you using react for this? Are you building this locally and having it build, then pushing the built js into the module?  
If your template is set up as a blog template, you should refer to the how the blog template is setup. That is going to be the first step -- I’d attempt to get the template setup with html/hubl before approaching anything with react.  
[Template markup and examples](https://developers.hubspot.com/docs/guides/cms/content/templates/types/blog)

---

<div class="post-metadata">

**Author:** ![tricialeach](https://avatars.discourse-cdn.com/v4/letter/t/9f8e36/32.png) [@tricialeach](https://community.hubspot.com/u/tricialeach)\
**Post date:** [April 15, 2025, 4:34pm UTC](https://community.hubspot.com/t/cms-react-blog-templates/129141/4 "2025-04-15T16:34:23Z")

</div>

I’m using React for this, because I’m using HubSpot’s [CMS React](https://github.hubspot.com/cms-react/) product, and want to create a blog using custom React components.

---

<div class="post-metadata">

**Author:** ![nickdeckerdevs1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nickdeckerdevs1/32/5198_2.png) [@nickdeckerdevs1](https://community.hubspot.com/u/nickdeckerdevs1)\
**Post date:** [April 15, 2025, 5:34pm UTC](https://community.hubspot.com/t/cms-react-blog-templates/129141/5 "2025-04-15T17:34:53Z")

</div>

Okay -- so what you look to be needing is a [react/js partial](https://github.hubspot.com/cms-react/reference/js-partials.html)

You would create this Blog.jsx partial and build out your component there, this is super basic

```lia-code-sample
{% extends "./layouts/base.hubl.html" %}

{% block header %}
 {% module "header_js_module"
 path="@projects/app/src/components/modules/Header" %}
{% endblock header %}

{% block body %}
 {% js_partial "blog_partial"
 path="@projects/project-folder/js-package/components/partials/Blog.jsx"
 %}
{% endblock body %}

{% block footer %}
 {% module "footer_js_module"
 path="@projects/app/src/components/modules/Footer" 
 %}
{% endblock footer %}

```

You could use graphql to bring in the blog data, or you could pass the data to your partial -- this is a bit more thought out and better example:

[Example blog listing component from the elevate theme](https://github.com/HubSpot/cms-elevate-theme-public/tree/9ccb83038fe0d681484fe0b50f1c4d7fb25e3016/src/unified-theme/components/modules/BlogListing)