DeloitteAU / react-habitat

⚛️ 🛅 A React DOM Bootstrapper designed to harmonise a hybrid 'CMS + React' application.
Other
261 stars 42 forks source link

A couple of question #1

Closed fatlinesofcode closed 8 years ago

fatlinesofcode commented 8 years ago

Nice project!

I had a few queries I was hoping you answer, its looks like its a very new project so I was a bit apprehensive about using it for a production site.

I've been tasked with adding some javascript components to an existing Wordpress site. As its a standard multi page site it not a option to develop a React SAP. I could use Angular and create some directives which would work fine but seen as how the whole world is moving to towards React I thought I'd investigate the possibility of using React without having a root container component.

Looks like you've had the same issue and hence React-habitat is designed to fill this gap. So my questions would be:

<div data-component="SomeReactComponent">
       <div data-component="SomeChildReactComponent"></div>
</div>

thanks.

jennasalau commented 8 years ago

Hi @fatlinesofcode

Thanks for reaching out!

Apologies for late reply, I am the lead maintainer for this repo and currently on holidays :)

This repository is new publicly, however we have been using it internally for over a year now.

Yes under the hood, this library calls multiple ReactDOM.render calls. This is a perfectly fine thing to do and in fact such a situation is not an uncommon. It will not impact on performance. Any application bottle necks will more likely be inside your custom React components long before this library would be a performance factor.

You should never nest react-habitat components (eg nested div and span with the data-component attr). In fact, this library will throw a friendly error if you try to do so. Instead the child component(s) should be placed inside the parent or root component using JSX.

This library is data backing agnostic, you can use Redux, Flux or anything you prefer.

I have put up some example code to see a typical simple setup using this framework. Please see https://github.com/jennasalau/react-habitat-example

Do let me know if you have any further questions or concerns.

Thanks Jenna

anujsachan1990 commented 7 years ago

Can you also share the example with Reducer along with Webpack server, where I can build different bundle according to the layout and included components?