No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Arquitectura de internacionalizaci贸n para componentes en React

9/12
Recursos

Aportes 3

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Links a las documentaciones:

鈿 Arquitectura de internacionalizaci贸n para componentes en React

Recursos

Overview | Format.JS

Introduction

Tutorial - Internationalization of React apps - LinguiJS documentation

https://github.com/lukeed/rosetta

Apuntes

鈥淎nalicemos la forma simple鈥

  • Vamos a tener un JSON donde estar谩n todos los locales
  • Estar谩n separadas por secciones de locales
// allLabels.json
{
	"es":{
		"buy": "Comprar",
		"accept": "Aceptar",
		...
	},
	"en-US":{
		"buy": "Buy",
		"accept": "Accept",
		...	
	},
	...
}

Para implementar esta soluci贸n mediante JavaScript se realizar铆a de la siguiente manera:

import allLabels from "locales/labels.json";

function getServerSideProps(){ ... }

function MyComponent ({locale}){
	const labels = allLabels[locale];
	return (
		<Button>{labels.comprar}</Button>
	)
}

Desventajas

  1. Entre m谩s locales, m谩s pesado el archivo. 驴Dividimos tambi茅n por locales?
  2. Entre m谩s labels, m谩s pesado el archivo. 驴Divididimos por componentes?
  3. La responsabilidad est谩 repetida en cada componente. 驴La extraemos?

Dividiendo por componentes

// locales/es/checkout.json
{
	"buy": "Comprar",
	"addToCart": "Agregar al carro",
	"contactUs": "驴Interesado/a?"
}

// locales/es/about.json
{
	"about": "Nosotros",
	"phone": "Tel茅fono",
	"contactUs": "Con贸cenos"
}

Desventajas

  1. Entre m谩s locales, m谩s pesado el archivo. 驴Dividimos tambi茅n por locales?
  2. Entre m谩s labels, m谩s pesado el archivo. 驴Divididimos por componentes?
  3. La responsabilidad est谩 repetida en cada componente. 驴La extraemos?

React

  1. React.Context: para abstraer l贸gica en un solo lugar y permitir su acceso a componentes que la necesiten sin prop drilling.
  2. React Hooks: para encapsular y reusar l贸gica.
import useTranslations from "useTranslations"

function getServerSideProps(){}

function MyComponent(){
	const labels = useTranslations()

	return (
		<Button>{labels("comprar")}</Button>
	)
}
  • El hook retorna los labels listos para ser usados
  • El componente en ning煤n momento piensa que locale utilizar, ya que todo est谩 abstra铆do en el hook
function useTranslations(){
	const ctx = useContext(LocaleContext);
	const locale = ctx.getCurrentLocale();
	const labels = ctx.labels.get(locale);
	return labels;
}
  • Mediante esta soluci贸n estamos:
    1. Creando una soluci贸n escalable
    2. Utilizando todo el poder de React
    3. Con ayuda de Next.js podemos utilizar mediante Next.js

Librer铆as populares

  • react-intl
  • react-i18next
  • lingui
  • rosetta
  • next-intl

Incre铆ble esta manera de ense帽ar mostr谩ndonos como piensa y como soluciona un problema.