Example for using React in front-end

[ivanjeremic]

Hello, since it is a very requested feature in the React community but not supported out of the box in Gutenberg, can we get a minimalistic example on how to make react also work in the save function (front-end)? Most issues on the web lead to no help or existing projects which are full of code unrelated to this problem, the easiest way would be to have an example that renders just one counter. Any info anyone can give and what do you think?

I personally think the reason why React developers struggle with this is React is an amazing tool for building interactive UI and the fact that Blocks are not interactive in the front-end is somehow a missed opportunity considering how manny react developers are out there, something like this build in would not only boost the block development since more react devs would come in, it will also help create amazing new things with Gutenberg and blocks.

[youknowriad]

I think WooCommerce achieve this already. Maybe @senadir could shed some light here on how they did it.

[Aljullu]

We just published a post which explains the technique WooCommerce uses to render React-based blocks in the frontend, hopefully it will be helpful or serve as an inspiration for other projects trying to achieve the same.

cc @senadir

[gziolo]

There is a related issue to bring native support for blocks to render the content with JavaScript and support interactivity: #14446.