` in the body tag ... then this \nframework isn't really going to bring many benefits to you. However, you are definitely invited to use it, if you want to.\n\n## Features\n\n- Tiny code footprint (only 4.4kb)\n- **Redux** supported\n- Pass data (props) to your components directly from HTML attributes and back again\n- Automatic data/JSON parsing\n- All page child apps can still share the same components, stores, events etc. (Everything is connected)\n- Simple to swap out components for others (The beauty of IOC containers)\n- For advanced users, you can use different components for different build environments\n- 100% W3C HTML5 Valid\n- TypeScript definitions included\n\n## Table of Contents\n\n- [Compatibility](#compatibility)\n- [Installing](#installing)\n- [Getting Started](#-getting-started)\n- [Registering components](#registering-components)\n - [Concept](#registering-components)\n - [Passing options to register](#passing-options-to-register)\n - [Passing default props to register](#passing-default-props-to-register)\n - [Dynamic imports and code splitting](#dynamic-imports-and-code-splitting)\n - [Writing and using custom factories](#writing-and-using-custom-factories)\n- [Resolving components](#resolving-components)\n - [Concept](#resolving-components)\n - [Passing props/properties to your components](#passing-properties-props-to-your-components)\n - [Passing data back again](#passing-values-back-again)\n - [Setting the Habitat's css class](#setting-the-habitats-css-class)\n - [Replace original node](#replace-original-node)\n - [Use encoded JSON in HTML attributes](#use-encoded-json-in-html-attributes)\n- [Controlling Scope and Lifetime](#controlling-scope-and-lifetime)\n - [Changing the Habitat query selector](#changing-the-habitat-query-selector)\n - [Dynamic updates](#dynamic-updates)\n - [Bootstrapper lifecycle events](#bootstrapper-lifecycle-events)\n - [Unmount react Habitats](#unmount-react-habitats)\n - [Disposing the container](#disposing-the-container)\n- [Examples](https://github.com/DeloitteDigitalAPAC/react-habitat/tree/master/examples)\n- [Contribute](#want-to-contribute)\n- [License information](#license-bsd-3-clause)\n- [Change log](https://github.com/DeloitteDigitalAPAC/react-habitat/blob/master/CHANGELOG.md)\n\n\n## Compatibility\n\n- Supports Browsers IE9+ and all the evergreens.\n- ES5, ES6/7 & TypeScript\n- React v15 and up\n\nPolyfills\n\n- IE9-11 Will require a [Promise Polyfill](http://babeljs.io/docs/usage/polyfill/)\n- IE9-10 Will require a [Object.assign Polyfill](http://babeljs.io/docs/usage/polyfill/)\n\nWe highly recommend you use something like [WebPack](https://webpack.github.io/) or [Browserify](http://browserify.org/) when using this framework.\n\n## Installing\n\nInstall with [NPM](http://npmjs.com/)\n\n`npm install --save react-habitat`\n\nThis assumes that you’re using a package manager with a module bundler like [Webpack](http://webpack.github.io) or [Rollup](https://rollupjs.org/).\n\nIf you don’t use a module bundler, and would prefer a single-file [UMD](https://github.com/umdjs/umd) build that makes `ReactHabitat` available as a global object, you can grab a pre-built version from the dist folder.\n\n## 🎓 Getting Started\n\n**Using ES5?** Read the [ES5 spec here](readme-in-es5.md#getting-started).\n\nThe basic pattern for integrating React Habitat into your application is:\n\n- Create a Container Builder.\n- Register React components.\n- Set the container for later use in the DOM.\n- At application execution ...\n- Use the DOM scope to resolve instances of the components.\n\nThis getting started guide walks you through these steps for a simple React application.\nThis document assumes you already know:\n\n- How to compile JSX; and\n- How to bundle using something like webpack or browserify\n\n#### 1. Create a bootstrapper class\n\nThe class must extend `ReactHabitat.Bootstrapper` and is intended to be an *[entry](https://webpack.github.io/docs/configuration.html#entry)* point of your bundled app. So if you're using something like webpack or browserify then this is the file to point it too.\n\nIn the *constructor()* of the class you need to register your React components with it and then set\nthe container. The container is later bound to the DOM automatically so your React components self-initiate.\n\nIn React Habitat, you'd register a component 'as' a unique key with something like this:\n\n```javascript\ncontainerBuilder.register(SomeReactComponent).as('SomeReactComponent');\n```\n\nSo for our sample application, we need to register all of our components to be exposed to the DOM so things get wired up nicely.\n\nWe also need to build and store the container so it can be used to resolve components later\n\n```javascript\nimport ReactHabitat from 'react-habitat';\nimport SomeReactComponent from './SomeReactComponent';\n\nclass MyApp extends ReactHabitat.Bootstrapper {\n constructor(){\n super();\n\n // Create a new container builder:\n const builder = new ReactHabitat.ContainerBuilder();\n\n // Register a component:\n builder.register(SomeReactComponent).as('SomeReactComponent');\n\n // Or register a component to load on demand asynchronously:\n builder.registerAsync(() => System.import('./AnotherReactComponent')).as('AnotherReactComponent');\n\n // Finally, set the container:\n this.setContainer(builder.build());\n }\n}\n\n// Always export a 'new' instance so it immediately evokes:\nexport default new MyApp();\n```\n\nBy default ReactHabitat ships with a plain ReactDOM factory.\n\n**If you are using Redux**\n\nYou will need to use a different factory. Please install & configure the [react-habitat-redux library](https://github.com/DeloitteDigitalAPAC/react-habitat-redux). Then continue with step 2 below.\n\nAlternatively learn how to [write and use your own custom factory](#writing-and-using-custom-factories).\n\n**If you are using TypeScript**\n\nYou will need to import ReactHabitat using `import * as ReactHabitat from 'react-habitat'` syntax in order to avoid 'module has no default export' error.\n\n#### 2. Application execution - resolve your components\n\nDuring the web application execution, you will want to make use of the components you registered. You do this by *resolving* them in the DOM from a scope.\n\nWhen you resolve a component, a new instance of the object gets created (Resolving a component is roughly equivalent to calling 'new').\n\nTo *resolve* new instances of your components, you need to attach a `data-component` attribute to a `div` or a `span` element in the HTML.\nAny child components should be nested inside the React components themselves.\n\nSet the `data-component` value to equal a component key you have registered the component *as*.\n\nFor instance:\n\n```html\n
\n```\n\nWill be resolved by the following registration.\n\n```javascript\ncontainer.register(SomeReactComponent).as('SomeReactComponent');\n```\n\nSo, for our sample app, we would do something like this\n\n```html\n\n \n
\n \n \n\n```\n\nWhen you view this page you will see an instance of `SomeReactComponent` automatically rendered in the div's\nplace. In fact, you can add as many as you like and it will render multiple instances.\n\nFor example. This is perfectly valid.\n\n```html\n\n \n
\n
\n
\n \n \n\n```\n\nWill render 3 instances of your component.\n\n> ⚠️ It's important that the output built javascript file is included at the end of the DOM just before the closing body tag.\n\nResolving and registering components alone is not all that special, but passing data to it via HTML attributes is pretty useful. This allows the backend to\neasily pass data to your components in a modular fashion. To do this you use [predefined prefix's](#passing-properties-props-to-your-components)\nsuch as `data-prop`.\n\nFor example, the following would create a new `MyReactComponent` instance with `title` and `colour` props.\n\n```html\n
\n