Lesson Overview

[00:00] So you've got your hands on some JSON, but lets be real, that's not impressing anyone. People want sleek, stylish HTML that looks like it was made just for them.

[00:09] Some content can be turned into HTML very simply by injecting that content directly into your project's code.

[00:16] Eight fields return a simple value in the API, like a number or a color code.

[00:21] Here's an example of how a number field might be returned in the API.

{
  "data": {
    "min_number": 8
  }
}

[00:26] These simple fields can be added directly to your website code using the API IDs that represent them. So here's how you would template that same example in our website code using React.

<label>
  The minimum is: {data.min_number}
</label>

[00:38] The other 10 fields return a structured object in the API, such as the Rich Text. The Rich Text field has this more advanced structure because in the CMS you can define an array of formatting options when customizing how the text might look.

[00:52] This is how the API response of a rich text field might look.

"exampleText": [
  {
    "type": "paragraph"
    "text": "I started reading Great Expectations!",
    "spans": [
      {
        "start": 18,
        "end": 36,
        "type": "em"
      }
    ]
  }
]

[00:56] Don't worry though - our react development package comes with a handy helper component to make this just as easy as templating the simple fields.

import { PrismicRichText } from "@prismicio/react";

<PrismicRichText field={document.data.exampleText} />

[01:03] The same goes for image fields, which contain the image URL, the dimensions and alt text. The next package helper component turns all of this into HTML for you.

[01:14] The client package also comes with useful helpers like asText and isFilled. These packages are already installed for you.