Anadama: An Example WordPress Recipe Theme Based on React

react

Since Matt Mullenweg gave the WordPress community a homework assignment to “Learn JavaScript, deeply,” links to tutorials and training courses have been flying around. Once you have grasped some of the basics, one of the best ways to learn is to start building a small project.

If you’re looking to explore adding JavaScript to WordPress theming, check out Anadama, an experimental React-based theme that uses the WP REST API to deliver content.

Anadama was designed to display recipe content in a vintage recipe book style. This niche theme is well-suited to presentation as a single-page app, since it has no comments or widgets. The homepage features a menu and post titles that pop up as recipe cards.

single-recipe

Anadama is a project still in progress, created through the collaborative efforts of developer Kelly Dwan and designer Mel Choyce, authors of popular themes Flounder and Aventurine.

The theme is small project where you can see an example of how React might fit into a WordPress theme. It requires the REST API plugin and WP API Menus. If you want to take it for a spin and experiment for yourself, clone the theme’s GitHub repo to your test install and then run npm and gulp to install and build the JavaScript and CSS files. If you prefer a more traditional blog example, Dwan recommends checking out her Foxhound theme on GitHub.

9

9 responses to “Anadama: An Example WordPress Recipe Theme Based on React”

  1. Cool to get this example theme! I’m also looking forward to seeing some examples of more intense react-live-page-updates that include something more complex like a text area that turns into a slider area. I’m sure that there are tutorials out there for things like that already – I am excited to see how that will operate.

  2. Iam also learning React in combination with the new Rest API at the moment so thanks a lot for all the input in the last weeks. Checking daily for news regarding that topics. Great to see that there is something new in WordPress land. :)

  3. I’m curious. Could someone write a post about why you would want to make a theme this way and when?
    What is the benefit of making a SPA using React and WordPress? Why not just go meteor or node+x directly?
    What are potential drawbacks with localization, internationalization, google search engine etc?
    How does this work with plugins that alter page content, login handling, admin bar etc?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Discover more from WP Tavern

Subscribe now to keep reading and get access to the full archive.

Continue reading