<!DOCTYPE html>
<html>

  <head>
    <script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.js"></script>
    <script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react-dom.js"></script>
    <script src="https://unpkg.com/languages-js@latest/languages.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="example"></div>
    <script src="script.js"></script>
  </body>

</html>
class Example extends React.Component {
  
  constructor() {
    super();
    this.handleChange = this.handleChange.bind(this);
    this.state = {lang: Languages.current};
  }
  
  handleChange(event){
     let {value} = event.target;
     Languages.set(value, () => {
       this.setState({lang: value});
     });
  }
  
  render() {
    return (
      <div>
        <select onChange={this.handleChange} value={this.state.lang}>
          <option value="en_EN">English</option>
          <option value="fr_FR">French</option>
       </select>
        <h1>{'hello'.t()}</h1>
      </div>
    );
  }
  
}

Languages.init(['en_EN', 'fr_FR'], './languages/', () => {
  ReactDOM.render(
    <Example />,
    document.getElementById('example')
  );
})
/* Styles go here */

[
  {
    "hello": "hello"
  },
  {}
]
[
  {
    "hello": "bonjour"
  },
  {}
]