fluent-react hello world example (stolen wholesale from https://github.com/projectfluent/fluent.js/blob/master/fluent-react/examples/hello-world/src/)

01 - i10n.js

import { FluentBundle } from 'fluent/compat';
import { negotiateLanguages } from 'fluent-langneg/compat';

const MESSAGES_ALL = {
  'pl': `
title = Witaj świecie!
today-is = Dziś jest { DATETIME($date, month: "long", day: "numeric") }.
  `,
  'en-US': `
title = Hello, world!
today-is = Today is { DATETIME($date, month: "long", day: "numeric") }.
  `,
};

export function* generateBundles(userLocales) {
  // Choose locales that are best for the user.
  const currentLocales = negotiateLanguages(
    userLocales,
    ['en-US', 'pl'],
    { defaultLocale: 'en-US' }
  );

  for (const locale of currentLocales) {
    const bundle = new FluentBundle(locale);
    bundle.addMessages(MESSAGES_ALL[locale]);
    yield bundle;
  }
}

02 - index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { LocalizationProvider } from 'fluent-react/compat';

import { generateBundles } from './l10n';
import App from './App';

ReactDOM.render(
  <LocalizationProvider bundles={generateBundles(navigator.languages)}>
    <App />
  </LocalizationProvider>,
  document.getElementById('root')
);

03 - App.js

import React from 'react';
import { Localized } from 'fluent-react/compat';

export default function App() {
  return (
    <div>
      <Localized id="title">
        <h1>Hello, world!</h1>
      </Localized>
      <Localized id='today-is' $date={new Date()}>
        <p>
          {'Today is { DATETIME($date, month: "long", day: "numeric") }.'}
        </p>
      </Localized>
    </div>
  );
}