How does misago's react components take over from the html generated from django's template?

dorafmon
Feb. 10, 2021
chat_bubble_outline 1
  • link
    Members 21 posts
    Feb. 10, 2021, 5:36 p.m.
    link

    Hi, it seems you have implemented two sets of UI with the same functionality but both in React and Django's template, I can see that the two of them both uses the same class names for the components but I am not sure how and when to react actually take over from the HTML. Could you please explain how this works a bit more? Thanks!

    Also, seems that even in dev, the frontend is using a prod version (misago.js) I am wondering if I can use a dev build so I can see the components in more details? I know there is a source map but not sure how to make it work.

  • link
    Project Lead
    Feb. 10, 2021, 7:42 p.m.
    link

    Could you please explain how this works a bit more? Thanks!

    Misago uses so called hybrid approac. This means that server first renders read-only HTML response where all controls and options are present but are disabled, only for for proper interactive versions of those HTML items to overtake.

    When Misago's JS starts, it runs functions called initializers that setup required features and mount correct React's components in place of pre-existing HTML.

    I can use a dev build so I can see the components in more details?

    We don't ship dev build. If you want to run frontend code for dev, run gulp watch in the frontend directory. If you are happy with the changes, do production build via gulp build.

    I know there is a source map but not sure how to make it work.

    Source maps work by default in the browsers. Browser checks for source map presence when debug tools are opened.