InversifyJS with React, listing 1

Hello.tsx

import * as React from "react";
import { IProvider } from "./providers";

export class Hello extends React.Component {
  private readonly nameProvider: IProvider<string>;

  render() {
    return <h1>Hello {this.nameProvider.provide()}!</h1>;
  }
}

index.tsx

import "reflect-metadata";
import * as React from "react";
import { render } from "react-dom";
import { Hello } from "./Hello";

const App = () => (
  <div>
    <Hello />
  </div>
);

render(<App />, document.getElementById("root"));

ioc.ts

import { Container } from "inversify";
import { IProvider, NameProvider } from "./providers";

export const container = new Container();
container.bind<IProvider<string>>("nameProvider").to(NameProvider);

providers.ts

import { injectable } from "inversify";

export interface IProvider<T> {
  provide(): T;
}

@injectable()
export class NameProvider implements IProvider<string> {
  provide() {
    return "World";
  }
}