reagent 2020-11-19 | Slack Archive

recholsknauber15:11:39

How would you structure an app to generate 100% of html from reagent/react? I began my project with a basic template, and am now running into conflicts from index.html generating multiple :head and :body blocks. I'd like to control all of that programmatically, as opposed to sending everything to an "app" div.

p-himik17:11:31

I'm not sure what you mean. String templates (and Hiccup, since you mentioned keywords) that can generate HTML do allow you to avoid adding multiple <head> and <body>. And Reagent/React do not touch <head> at all. Or <body>, unless that's what you use for your app's container.

👍 3

recholsknauber17:11:13

Thanks for the help. This is the main reason I asked the question:

recholsknauber17:11:57

I 've been attempting to insert a "common" layout with a menu bar, head logo and such. It appears the conflict stems from attempting to insert a :body twice, once in index.html and next in the inserted hiccup (defn common [& body] [:ul {:class "menu_bar"} [:li {:class "menu_item"}

recholsknauber17:11:29

From what you're saying though, this structure is not the only or best option. How do you generate an initial index.html and more, without creating one manually?

p-himik18:11:31

When you're using Reagent, there has to be HTML generated outside of it. It cannot generate it for you. I create just a bare-bones HTML myself. If you want to stick to Hiccup, just transform it to text and serve it with your web server.

juhoteperi08:11:56

Not sure if it is documented somewhere, but I'm quite sure React can't be used to create html, head or body elements. React render target has to be a element inside body.

dgb2316:11:59

I assume you’d have to do it server side or do a workaround with something like this: https://www.npmjs.com/package/react-helmet

👏 3

recholsknauber17:11:02

This looks like a solid option, thanks.

👍 3

2020-11-19

Channels