Use I18nProvider and translate HOC

src/I18nProvider.js

@@ -0,0 +1,29 @@
import { Children, Component, PropTypes } from 'react';
import Polyglot from 'node-polyglot';

import messages from './messages';

class I18nProvider extends Component {
    getChildContext() {
        const { locale } = this.props;
        const polyglot = new Polyglot({
            locale,
            phrases: messages[locale],
        });

        const translate = polyglot.t.bind(polyglot);

        return { locale, translate };
    };

    render() {
        return Children.only(this.props.children);
    }
};

I18nProvider.childContextTypes = {
    locale: PropTypes.string.isRequired,
    translate: PropTypes.func.isRequired,
};

export default I18nProvider;

src/Video.js

@@ -1,7 +1,7 @@
import React from 'react';
import VideoMetas from './VideoMetas.js';

export const Video = ({ metas, picture, title, translate }) => (
export const Video = ({ metas, picture, title }) => (
    <div className="video">
        <img
            src={picture}
@@ -12,7 +12,6 @@ export const Video = ({ metas, picture, title, translate }) => (
            <VideoMetas
                duration={metas.duration}
                views={metas.views}
                translate={translate}
            />
        </div>
    </div>

src/VideoList.js

@@ -1,15 +1,14 @@
import React from 'react';
import Video from './Video';

export const VideoList = ({ translate, videos }) => (
export const VideoList = ({ videos }) => (
    <div className="videos-list">
        {videos.map(video => (
            <Video
                key={video.title}
                title={video.title}
                metas={video.metas}
                picture={video.picture}
                translate={translate}
            />
        ))}
    </div>

src/VideoMetas.js

@@ -1,4 +1,5 @@
import React from 'react';
import translate from './translate';

const Metas = ({ duration, translate, views }) => (
    <div className="video-metas">
@@ -11,4 +12,4 @@ const Metas = ({ duration, translate, views }) => (
    </div>
);

export default Metas;
export default translate(Metas);

src/index.js

@@ -5,18 +5,13 @@ import './index.css';
import videos from './data';
import VideoList from './VideoList';

import messages from './messages';
import Polyglot from 'node-polyglot';
import I18nProvider from './I18nProvider';

const locale = window.localStorage.getItem('locale') || 'fr';
const polyglot = new Polyglot({
    locale,
    phrases: messages[locale],
});

const translate = polyglot.t.bind(polyglot);

ReactDOM.render(
  <VideoList videos={videos} translate={translate} />,
    <I18nProvider locale={locale}>
        <VideoList videos={videos} />
    </I18nProvider>,
  document.getElementById('root')
);

src/translate.js

@@ -0,0 +1,18 @@
import React, { PropTypes } from 'react';

export default (BaseComponent) => {
    const LocalizedComponent = (props, context) => (
        <BaseComponent
            translate={context.translate}
            locale={context.locale}
            {...props}
        />
    );

    LocalizedComponent.contextTypes = {
        translate: PropTypes.func.isRequired,
        locale: PropTypes.string.isRequired,
    };

    return LocalizedComponent;
};