Integrate React with Pinegrow

Hi everyone, I’m preparing to take a course on Scrimba’s Javascript and I want to delve into React and eventually get familiar with Next js. Now, given my previous experimentation with 11ty, (where I actually had a good experience and even did some small experiments [that worked…lol]) I noticed that obviously, since Pinegrow is not intended to work with other languages (for 11ty I had discovered nunjucks) the experimentation is a bit dead there… so, at this point - how can I hope to be able to integrate react with pinegrow? Will I be able to use Pinegrow only as a prototyping tool and then finish everything in VS Code?

  1. React uses jsx and not html/html-based-dsl for templating, and afaik Pinegrow’s tree panel doesn’t handle jsx syntax (at least not yet) and works nicely only with html-based templates.

  2. That said react apps or any other javascript framework ones, require compilation during development unlike static html. So, when you open a jsx/tsx component in Pinegrow, the internal browser doesn’t understand those formats and won’t render.

Vue uses html-based templating, so already ticks (1) above. We are working on Vite integration for Vue which will handle (2). Vue support in Pinegrow will also include support for metaframeworks like Nuxt.js (equivalent to Next.js, but for Vue)…

All said, your javascript upskilling will be a life-skill that will go a long way irrespective of which framework you choose. Btw, you are right in your assumption about using Pinegrow for html-based prototyping and you can take the design and integrate it elsewhere (like in React).

All the best in your journey :+1:t4:

5 Likes