shalkam

import React, { Component } from 'react';
import { injectIntl, defineMessages } from "react-intl";

import logo from './logo.svg';
import './App.css';

const messages = defineMessages({
  title: {
    id: 'app.title',
    defaultMessage: 'Welcome to React'

shalkam

import React, { Component } from 'react';
import { IntlProvider, addLocaleData } from "react-intl";
import arLocaleData from "react-intl/locale-data/ar";
import esLocaleData from "react-intl/locale-data/es";
import translations from "./i18n/locales"
import App from "./App";

addLocaleData(arLocaleData);
addLocaleData(esLocaleData);

shalkam

import ar from "./ar.json";
import en from "./en.json";
import es from "./es.json";

export default { ar, en, es };

shalkam

[
  {
    "id": "app.title",
    "defaultMessage": "Welcome to React",
    "filepath": "src/App.js"
  },
  {
    "id": "app.content1",
    "defaultMessage": "To get started, edit",
    "filepath": "src/App.js"

shalkam

{
  "name": "react-intl-example",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-intl": "^2.4.0",
    "react-scripts": "1.1.1"
  },

shalkam

const path = require("path");
const manageTranslations = require("react-intl-translations-manager").default;

manageTranslations({
  messagesDirectory: path.join(__dirname, "src/i18n/messages"),
  translationsDirectory: path.join(__dirname, "src/i18n/locales/"),
  languages: ["en", "ar", "es"] // any language you need
});

shalkam

import React, { Component } from 'react';
import { injectIntl, defineMessages } from "react-intl";
import arLocaleData from "react-intl/locale-data/ar";
import esLocaleData from "react-intl/locale-data/es";

import logo from './logo.svg';
import './App.css';

const messages = defineMessages({
  title: {

shalkam

import React, { Component } from 'react';
import { IntlProvider, addLocaleData, injectIntl } from "react-intl";
import arLocaleData from "react-intl/locale-data/ar";
import esLocaleData from "react-intl/locale-data/es";
import App from "./App";

addLocaleData(arLocaleData);
addLocaleData(esLocaleData);

class AppWrapper extends Component {

shalkam

node_modules/
build

shalkam

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  // You can declare that a prop is a specific JS primitive. By default, these
  // are all optional.
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,