Questions

[edbras]

Hello, Where can I find an example of usage with a CMS ?

As I understand: you feed it with html and it will add the components. But how can I feed it exactly?

What are comparable react projects/components that do about the same thing?

• Ed

[jennasalau]

Hi Ed,

Thanks for your questions, ill try to answer them and clear things up as best I can.

The problem React Habitat helps solve is a CMS will render the HTML. Given that CMS's can change create, remove and modify HTML on the fly, it can be a challenge to ensure your web app code runs predictably.

This is where React Habitat steps in. It can say every time I see "this" type of HTML from the CMS, I will put in a React Component for you (which might give the user a richer experience).

For example, your CMS might have a google map module where admins can add "maps" to a page.

You would then configure a "map" react component and define it in React Habitat to match with a HTML pattern such as <div data-component="Map"></div>. This means any time the CMS renders this HTML you can be confident your react component will initialise automatically.

Going further from this, in our example the CMS will probably also hold some sort of lat/long and zoom information that was defined inside the CMS. You can pass/retreive this information by using React Habitat data attribute props.

For example:

<div data-component="Map" 
    data-prop-zoom="11" 
    data-n-prop-lat="-37.8343" 
    data-n-prop-lon="144.9632">
</div>

You will be able to read those properties inside your component like normal using props

So for context your CMS back end developers might implement a CMS Map module this like depending on the language the CMS is written in.

C# Razor example

<div data-component="Map" 
    data-prop-zoom="@MapModel.zoom"
    data-n-prop-lat="@MapModel.lat" 
    data-n-prop-lon="@MapModel.lon">
</div>

PHP example

<div data-component="Map" 
    data-prop-zoom="<?= $mapZoom ?>"
    data-n-prop-lat="<?= $mapLat ?>" 
    data-n-prop-lon="<?= $mapLon ?>">
</div>

What CMS are you using? If this is not clear, I'm happy to provide you examples for a specific CMS. Also check out the React Habitat example, although this example doesn't use a CMS, it does gives you an idea of how it works.

[edbras]

Thank you for your quick and detailed answer. I think I wasn't clear in my question, as your details are clear to me. What I don't understand, how to process/feed the received html from the backend? Example: I fetch some html from a backend API, and what do I do then? I think I should feed it to your code such that it's processed, but I can't find any example how this is done. Where can I find an example to see how this works? (the example you refer to, uses the index.html as html feed, nothing fetched from any other source like an api backend)

[jennasalau]

Oh you mean processing ajaxed HTML after the app has initlised. Yes sorry I miss understood you.

There is a "dynamic container" feature that is currently in development. However there is a temporary work around.

Does that help?

[edbras]

Thanks a lot, I will have a look at it.

[edbras]

I just looked at it, but still not find an answer to my question, that is: how to retrieve html from an external source and render it, such that it uses the container.

The answer you give is about rerendering an existing html feed, but my question is about different feed sources. I hope it's more clear now. Thanks.

[jennasalau]

hmm I'm really struggling to understand what you mean by "feed". React Habitat will only process any HTML on the page its included on.

Can you give a very specific/detailed example of your problem? I'm more than happy to set up a skype call if you want to run me through it?

[edbras]

React Habitat will only process any HTML on the page its included on. So how can I connect it to a CMS backend system?

That's what I mean by "feed": the html source that is feed to your html parser to generate the final page through React.

[jennasalau]

The concept is your CMS is the one that generates the HTML of which React Habitat will parse. Since the CMS can change the HTML it can in effect change the properties being sent to React.

Here is a complete flow of a typical React Habitat web app + cms implementation.

What CMS/Backend system are you using?

Please also note the React Habitat does not support server side rendering at this time.

[edbras]

Thank you for the details.

But how does the cms alternative looks in code? (that is exactly the answer I am looking for). Like you mentions in the drawing: "React Habitat parses the HTML" ->> How does this work, look like in code (the html from the backend "feeds" the habitat parser, see my previous posts)

The type of cms I use shouldn't matter, as I should be able to use any external html source that I connect to and use to retrieve a html page of html snippet to change parts of a page.

[jennasalau]

React Habitat will parse the CMS generated HTML and look for any elements with the data-component attribute. For example <div data-component="myComponent"></div> will "feed" React Habitat.

Depending on its value (in this case "myComponent") it will render the corresponding component you registered in the container.

class MyComponent extends React.Component {
    ...
}

...

container.register('myComponent', MyComponent)

This is explained further in the Getting Started guide.

[edbras]

Thanks, but can you please show the code to parse the html that is retrieved from the backend?

[jennasalau]

All you have to do is:

• call setContainer() if using es6; or
• pass in a container to createBootstrapperif using es5

Thats it.. At this point, running the above code will parse your HTML.

Its important that your javascript is included at the end of the page (just before </body>) as it will only parse HTML rendered before it.

If you're asking to see the source code that does this, then please see this method.

Again, I'm happy to set up a skype call to help you with your project and walk you through this if you need?

[jennasalau]

Closing this issue as no response for 7 days.

[edbras]

Why you close it? Are you sure it's 7 days ago?