Frontity Tutorial
  • 👋Welcome
  • ✔️Checking your progress
  • 1️⃣ Creating a custom theme
    • Create a Frontity Project
    • Create a Theme Package
    • Modify the <Root> component
    • Connect the <Root> component to the state
  • 2️⃣ Adding a menu
    • Use the <Link> component
  • 3️⃣ Displaying posts
    • Understanding the Frontity state
    • Display the list of posts
    • Display the post content
    • Display posts and pages separately
    • Formatting the date
  • 4️⃣ Adding styling
    • Global styles
    • Styled components
    • Styling the links
    • Styling the post info
    • Add dynamic styling
  • 5️⃣ Adding behaviour
    • Use 'state' and 'actions'
    • Add pagination
  • 6️⃣ Custom Post Types
    • Add support for Custom Post Types
  • 7️⃣ Finishing touches
    • Add a <Loading> component
    • Add a 404 page
    • Use the <html2react> component
    • SEO and head tags
    • Other things to do
  • 8️⃣ Deploying the project
    • Deploy to Vercel
  • 9️⃣ Next Steps
    • Learning resources
    • Getting help and support
    • Contributing to Frontity
Powered by GitBook
On this page

3️⃣ Displaying posts

PreviousUse the <Link> componentNextUnderstanding the Frontity state

Last updated 4 years ago

This third section can be considered to be the heart of this step-by-step tutorial. It contains the key concepts and information that you will need to properly understand Frontity and how it works.

We will start this section by taking a deep dive into Frontity's "state", and see how retrieving data from the state involves a two step process. This two step process starts with the current URL which we've already seen is available to us in state.router.link.

We will go on to use our conceptual understanding of the state and our knowledge of the two step process of data retrieval to firstly display a list of posts, and then the actual post content.

The knowledge thus gained will enable us to distinguish between posts and pages and treat them differently using separate components for each.

Frontity is fully compatible with a wide variety of JavaScript and React packages available on , so we'll end this section by looking at how we can use an external third party library with Frontity to format the post date.

By the end of this section most of the core functionality of our theme will be in place and your understanding of Frontity will have deepened greatly.

npmjs.com