Internacionalización con React Intl

Clase 34 de 58 • Curso Profesional de React con Redux 2016

Contenido del curso

Bienvenido al curso

Fundamentos

Creación del proyecto

Implementación de Redux

Desafíos

Contenido bonus

Tomar examen

Resumen

React Intl nos permite manejar multiples idiomas en una aplicación, para instalarlo ejecutamos npm i -S react-intl

Comentarios

John Steven Neira

student•

Hola profe, gracias por el curso, un poco tedioso parra traducir los sitios no? bueno profe excelente curso, saludes desde colombia

KaMi lml

student•

Justo necesitaba algo que me ayude con los idiomas, y esto está más que genial!

Pero tengo algunas dudas ojalá puedas responder mi comentario Sergio.
1- Cómo hago para que el usuario elija el idioma y se mantenga en futuras recargas o renders del sitio?
2- Lo otro es que según veo ahí se condiciona si el explorador “permite” cierto idioma. Que pasa si permite 10 idiomas, hay forma de jalar el principal?

Saludos y gracias por esta clase =)

KaMi lml

student•

PD. quiero hacer un sitio multi idiomas por eso el punto 2.

Sergio Daniel Xalambrí

student•

Ponés en tu UI un selector de idioma, si es la primera vez que entra el usuario (o no inició sesión) usas el del navegador, luego cuando el usuario hace el cambio guardas el idioma que eligió en una DB, cuando vuelva a entrar revisas la DB para buscar el idioma, adicionalmente podrías crear una cookie para evitar pegarle a la DB si el usuario tiene la cookie.
Tu validación entonces sería si tiene la cookie de idioma le das el idioma que dice ahí, si no tiene la cookie pero inició sesión buscas en la DB si tiene un idioma elegido y la das ese idioma, si no le das el del navegador.
En nuestro código estamos revisando primero si el navegador permite el idioma es, si no usamos en, si querémos tener muchos idiomas lo que hay que hacer es revisar el primero de todos y ver cual es, si no es de los soportados seguir iterando hasta tener uno que sí soporte la aplicación, si ninguno es soportado hacemos fallback al por defecto.

Ronnie Dave Cañas Pineda

student•

Me sale el siguiente error en la consola del navegador:

Warning: Failed prop type: Invalid prop locale of type array supplied to IntlProvider, expected string.
in IntlProvider
printWarning @ app.js:357
warning @ app.js:381
checkReactTypeSpec @ app.js:14086
validatePropTypes @ app.js:7980
createElement @ app.js:8034
(anonymous) @ app.js:13257
webpack_require @ app.js:20
module.exports @ app.js:63
(anonymous) @ app.js:66
app.js:11556 Uncaught TypeError: (locale || “”).split is not a function

Alguien puede ayudarme, porfa?

Diego Forero

Team Platzi•

Esta llegando un array y debería llegarle un string, revisa lo que llega en locale.

Diego José Molina Gonzalez

student•

Tengo 2 dudas:

Intenté implementar React Intl con Next en base al ejemplo que tienen: React Intl con Next
Pero creo que esta manera que tú exponses es más sencilla, habrá alguna diferencia de performance o algo entre implementarlo en base a tu manera o la de Next?
Si implemento en base a esta misma forma en Next, es necesario hacerlo también en el archivo server.js?

Según entiendo, no debería ser necesario ya que el server render lo hace automáticamente…

Gracias!

Sergio Daniel Xalambrí

student•

Lo que se hace en el curso es posible ya que tenemos control total del servidor, en Next.js la única forma es hacerlo como en el ejemplo. Si intentas implementarlo de otra forma te vas a chocar con problemas que el ejemplo ya resuelve (como enviar solo los locales del idioma del usuario).

Y si vas a necesitar un archivo server.js ya que necesitas lógica personalizada en el servidor que solo usando getInitialProps no se puede.

Manuel Galindez

student•

Porque se debe tener los messages o IntlProvider en el servidor ?

Sergio Daniel Xalambrí

student•

Porque si no definis los mensajes con IntlProvider entonces al hacer server-render la aplicación no va a tener mensajes en ningún idioma.

Francisco

student•

En messages.json, en los archivos, esta mal un valor en la clave title.profile del español, va corregido…

"es": {
    "error.404": "Volver al inicio",
    "title": "Mi primera aplicación con React",
    "title.home": "Inicio",
    "title.profile": "Perfil de {name}",
    "profile.field.basic": "Información básica",
    "profile.field.address": "Dirección",
    "header.nav.home": "Inicio",
    "header.nav.platzi": "Platzi",
    "comment.meta.author": "Por: <a href=\"mailto:{email}\" target=\"_blank\">{name}</a>",
    "post.meta.comments": "{amount} comentarios",
    "post.meta.readMore": "Leer más...",
    "loading": "Cargando datos..."
  }```

Juan Luis Rojas León

student•

¿Cómo se podría hacer una traducción de un atributo en jsx?
Por ejemplo:
<input placeholder=“Que esto tenga una traducción” />

Stefanny Torres

student•

Tienes que importar intlShape e InjectIntl e inyectarselo a tu componente.
Este es un ejemplo de eso:

import { intlShape, injectIntl } from 'react-intl';

function Searcher(props) {
  const { formatMessage } = props.intl;
  return (
      <input
        type="search"
        placeholder={formatMessage({ id: 'searcher.placeholder', defaultMessage: 'Buscar' })}
      />
    </div>
  );
}

Searcher.propTypes = {
    intl: intlShape.isRequired,
};

export default injectIntl(Searcher);

"es": {
    "error.404": "Volver al inicio",
    "title": "Mi primera aplicación con React",
    "title.home": "Inicio",
    "title.profile": "Perfil de {name}",
    "profile.field.basic": "Información básica",
    "profile.field.address": "Dirección",
    "header.nav.home": "Inicio",
    "header.nav.platzi": "Platzi",
    "comment.meta.author": "Por: <a href=\"mailto:{email}\" target=\"_blank\">{name}</a>",
    "post.meta.comments": "{amount} comentarios",
    "post.meta.readMore": "Leer más...",
    "loading": "Cargando datos..."
  }```

import { intlShape, injectIntl } from 'react-intl';

function Searcher(props) {
  const { formatMessage } = props.intl;
  return (
      <input
        type="search"
        placeholder={formatMessage({ id: 'searcher.placeholder', defaultMessage: 'Buscar' })}
      />
    </div>
  );
}

Searcher.propTypes = {
    intl: intlShape.isRequired,
};

export default injectIntl(Searcher);

Internacionalización con React Intl

Bienvenido al curso

Actualizaremos este curso pronto

Bienvenido al curso de React

Fundamentos

¿Qué es React?

Hola Mundo con React

¿Qué es y cómo funciona el Virtual DOM?

Introducción a JSX

Creación de componentes

Componentes Puros vs de Estado

Ciclo de vida de un componente

Ciclo de vida de componentes

Manejo de eventos del DOM

Event handlers con parámetros personalizados

Contexto de la aplicación

Componentes de Alto Orden (HOC) y Mixins

Creación del proyecto

Presentación del proyecto

Instalación de Node.js y usando npm

Estructura de archivos

Iniciar un servidor de render básico - Render en Server

Module bundlers en JavaScript

Configurar Webpack para el servidor de render

Crear una app con React y React Router

Manejo de rutas en el servidor con React Router

Crear cliente para consumir el API

Iniciar la app en el navegador y configurar Webpack para producción

Iniciar un servidor de estáticos con zeit/list

Herramientas de desarrollo de React

Consumir el API y mostrar datos en la home

Perfil de usuarios

Estado de cargando y detalle de post

Paginación de posts mediante scroll infinito

Mostrar listado de comentarios en cada post

Estilizar componentes con CSS Modules

Linter y buenas prácticas con ESLint