Come usare React Intl per internazionalizzare le tue applicazioni React

React Intl è una libreria popolare che fornisce una serie di componenti e utilità per internazionalizzare le applicazioni React. L'internazionalizzazione, nota anche come i18n, è il processo di adattamento di un'applicazione a lingue e culture diverse.

Puoi facilmente supportare più lingue e locali nella tua applicazione React con ReactIntl.

Installare React Intl

Per utilizzare la libreria React Intl, devi prima installarla. Puoi farlo con più di un gestore di pacchetti: npm, filato o pnpm.

Per installarlo con npm, esegui questo comando nel tuo terminale:

npm installa react-intl

Per installarlo usando il filato, esegui questo comando:

filato aggiungere reagire-intl

Come utilizzare la libreria React Intl

Dopo aver installato la libreria React Intl, puoi utilizzare i suoi componenti e le sue funzionalità nella tua applicazione. React Intl ha funzioni simili a API JavaScript internazionale.

Alcuni preziosi componenti offerti dalla libreria React Intl includono il Messaggio formattato E IntlProvider componenti.

Il componente FormattedMessage visualizza le stringhe tradotte nell'applicazione, mentre il componente IntlProvider fornisce le traduzioni e le informazioni di formattazione all'applicazione.

È necessario creare un file di traduzione prima di poter iniziare a utilizzare i componenti FormattedMessage e IntlProvider per tradurre l'applicazione. Un file di traduzione contiene tutte le traduzioni per la tua applicazione. È possibile creare file separati per ogni lingua e locale o utilizzare un singolo file per contenere tutte le traduzioni.

Per esempio:

esportarecost messaggiInFrancese = {
 saluto: "Buongiorno {nome}"
}

esportarecost messaggiInItaliano = {
 saluto: "Buongiorno {nome}"
}

Questo file di traduzione di esempio contiene due oggetti di traduzione: messaggiInfrancese E messaggiInitaliano. Puoi sostituire il segnaposto {nome} nel saluto stringa in fase di esecuzione con un valore dinamico.

Per utilizzare le traduzioni nella tua applicazione, devi avvolgere il componente root della tua applicazione con il file IntlProvider componente. Il componente IntlProvider ne richiede tre Reagisci agli oggetti di scena: locale, defaultLocale, E messaggi.

La prop locale accetta una stringa che specifica la locale dell'utente, mentre defaultLocale specifica un fallback se la locale preferita dell'utente non è disponibile. Infine, il prop dei messaggi accetta un oggetto di traduzione.

Ecco un esempio che mostra come puoi utilizzare IntlProvider:

importare Reagire da"reagire";
importare Reagire DOM da"react-dom/cliente";
importare App da"./App";
importare {Providerinternazionale} da"reagire-intl";
importare { messaggi in francese } da"./traduzione";
ReactDOM.createRoot(documento.getElementById("radice")).render(

"fr" messaggi={messagesInFrench} defaultLocale="it">

 </IntlProvider>
 </React.StrictMode>
);

Questo esempio passa il fr locale, il messaggiInfrancese traduzione e un valore predefinito it locale al IntlProvider componente.

Puoi passare più di un oggetto locale o di traduzione e il file IntlProvider rileverà automaticamente la lingua del browser dell'utente e utilizzerà le traduzioni appropriate.

Per visualizzare le stringhe tradotte nella tua applicazione, utilizza il formato Messaggio formattato componente. IL Messaggio formattato componente prende un id prop corrispondente a un ID messaggio nell'oggetto messaggi.

Il componente accetta anche a defaultMessage E valori puntello. IL defaultMessage prop specifica un messaggio di fallback se una traduzione non è disponibile per la locale corrente, mentre the valori prop fornisce valori dinamici per i segnaposto nei messaggi tradotti.

Per esempio:

importare Reagire da"reagire";
importare {Messaggio formattato} da"reagire-intl";
funzioneApp() {
ritorno (




 id="saluto"
 defaultMessage="Buongiorno {nome}"
 valori={{ nome: 'John'}}
 />
 </p>
 </div>
 );
}
esportarepredefinito Applicazione;

In questo blocco di codice, il id puntello del Messaggio formattato componente utilizza il saluto chiave dal messaggiInfrancese oggetto, e il valori prop sostituisce il {nome} segnaposto con il valore "John".

Formattazione dei numeri con il componente FormattedNumber

React Intl fornisce anche il Numero formattato componente che è possibile utilizzare per formattare i numeri in base alla locale corrente. Il componente accetta vari oggetti di scena per personalizzare la formattazione, come stile, valuta e cifre decimali minime e massime.

Ecco alcuni esempi:

importare Reagire da"reagire";
importare {Numero formattato} da"reagire-intl";
funzioneApp() {
ritorno (




 Decimale: <Numero formattatovalore={123.456}stile="decimale" />
 </p>


 Per cento: <Numero formattatovalore={123.456}stile="per cento" />
 </p>
 </div>
 );
}
esportarepredefinito Applicazione;

Questo esempio usa il Numero formattato componente che accetta a valore prop specificando il numero che vuoi formattare.

Usando il stile prop, puoi personalizzare l'aspetto del numero formattato. Puoi impostare il stile prop a decimale, per cento, O valuta.

Quando imposti il stile prop alla valuta, il Numero formattato componente formatta il numero come valore di valuta utilizzando il codice specificato nel file valuta puntello:

importare Reagire da"reagire";
importare {Numero formattato} da"reagire-intl";
funzioneApp() {
ritorno (




 Prezzo: <Numero formattatovalore={123.456}stile="valuta"valuta="DOLLARO STATUNITENSE" />
 </p>
 </div>
 );
}
esportarepredefinito Applicazione;

IL Numero formattato component formatta il numero nel blocco di codice sopra usando l' valuta lo stile e il Dollaro statunitense codice valuta.

È inoltre possibile formattare i numeri con un numero specifico di cifre decimali utilizzando il minimoFractionDigits E massimoFractionDigits oggetti di scena.

IL minimoFractionDigits prop specifica il numero minimo di cifre decimali da visualizzare. Al contrario, il massimoFractionDigits prop specifica il numero massimo di cifre decimali.

Se un numero ha un numero di cifre decimali inferiore a quello specificato minimoFractionDigits, React Intl lo riempirà di zeri. Se il numero ha più cifre decimali rispetto a quanto specificato massimoFractionDigits, la biblioteca arrotonderà il numero per eccesso.

Ecco un esempio che mostra come puoi usare questi oggetti di scena:

importare Reagire da"reagire";
importare {Numero formattato} da"reagire-intl";
funzioneApp() {
ritorno (




 valore={123.4567}
 minimoFractionDigits={2}
 massimoFractionDigits={3}
 />
 </p>
 </div>
 );
}
esportarepredefinito Applicazione;

Formattazione delle date con il componente FormattedDate

Puoi formattare le date in modo coerente e facile da leggere utilizzando React Intl. IL Data formattata componente fornisce un modo semplice ed efficace per formattare le date. Funziona in modo simile a librerie data-ora che formattano le date, come Moment.js.

Il componente FormattedDate accetta molti oggetti di scena, ad esempio valore, giorno, mese, E anno. Il valore prop accetta la data che vuoi formattare e gli altri oggetti di scena ne configurano la formattazione.

Per esempio:

importare Reagire da"reagire";
importare {Data formattata} da"reagire-intl";
funzioneApp() {
cost oggi = nuovoData();
ritorno (




 Oggila data è
 valore={oggi}
 giorno="numerico"
 mese="lungo"
 anno="numerico"
 />
 </p>
 </div>
 );
}
esportarepredefinito Applicazione;

In questo esempio, il valore prop utilizza la data corrente. Inoltre, utilizzando il giorno, mese, E anno props, si specifica che si desidera visualizzare l'anno, il mese e il giorno in un formato lungo.

Oltre a giorno, mese e anno, anche altri oggetti di scena formattano l'aspetto della data. Ecco gli oggetti di scena e i valori che accettano:

• anno: "numerico", "2 cifre"
• mese: "numerico", "2 cifre", "stretto", "breve", "lungo"
• giorno: "numerico", "2 cifre"
• ora: "numerico", "2 cifre"
• minuto: "numerico", "2 cifre"
• secondo: "numerico", "2 cifre"
• timeZoneName: "corto lungo"

Puoi anche usare il Data formattata componente per formattare e visualizzare l'ora:

importare Reagire da"reagire";
importare {Data formattata} da"reagire-intl";
funzioneApp() {
cost oggi = nuovoData();
ritorno (




 L'ora è
 valore={oggi}
 ora="numerico"
 minuto="numerico"
 secondo="numerico"
 />
 </p>
 </div>
 );
}
esportarepredefinito Applicazione;

Internazionalizza le tue applicazioni React per un pubblico più ampio

Hai imparato come installare e configurare la libreria React-Intl nella tua applicazione React. React-intl semplifica la formattazione dei numeri, delle date e delle valute della tua applicazione React. È possibile formattare i dati in base alle impostazioni internazionali dell'utente utilizzando i componenti FormattedMessage, FormattedNumber e FormattedDate.

Gli sviluppatori di React spesso commettono errori che possono portare a gravi conseguenze. Ad esempio, non riuscendo ad aggiornare correttamente lo stato. È importante essere consapevoli di questi errori comuni e correggerli in anticipo per evitare problemi costosi.