Den beste løysinga for internasjonalisering (i18n) i React-applikasjonar

Ønskjer du å utvide React-applikasjonen din til nye marknader? TacoTranslate gjer det utruleg enkelt å lokalisere React-applikasjonane dine, slik at du kan nå eit globalt publikum utan bry.

Kvifor velje TacoTranslate for React?

Sømlaus integrasjon: Tilpassa spesielt for React-applikasjonar, integrerer TacoTranslate seg utan problem i den eksisterande arbeidsflyten din.
Automatisk innsamling av tekststrengar: Ikkje lenger nødvendig å handsame JSON-filer manuelt. TacoTranslate samlar automatisk tekststrengar frå kodebasen din.
AI-drevne omsetjingar: Utnytt krafta i AI for å gi kontekstuelt nøyaktige omsetjingar som passar tonen i applikasjonen din.
Augnablikkeleg språkstøtte: Legg til støtte for nye språk med berre eitt klikk, og gjer applikasjonen din tilgjengeleg globalt.

Slik fungerer det

Installer TacoTranslate-pakken via npm:

npm install tacotranslate

Når du har installert modulen, må du opprette ein TacoTranslate-konto, eit omsetjingsprosjekt og tilhøyrande API-nøklar. Opprett ein konto her. Det er gratis, og det krev ikkje at du legg inn eit kredittkort.

I brukargrensesnittet til TacoTranslate opprett eit prosjekt og gå til fanen for API-nøklar. Opprett ein read nøkkel og ein read/write nøkkel. Vi vil lagre dei som miljøvariablar. Den read nøkkelen kallast public, og den read/write nøkkelen kallast secret. Til dømes kan du leggje dei til i ei .env fil i roten av prosjektet ditt.

Du må òg leggje til to fleire miljøvariablar: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

TACOTRANSLATE_DEFAULT_LOCALE: Den standard fallback-lokalkoden. I dette dømet set vi den til en for engelsk.
TACOTRANSLATE_ORIGIN: Mappa der tekstane dine blir lagra, som til dømes URL-en til nettsida di. Les meir om originar her.

.env

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Sørg for at du aldri avslører den hemmelege read/write API-nøkkelen i produksjonsmiljø på klientsida.

Sette opp TacoTranslate

Initialiser TacoTranslate i React-applikasjonen din ved å pakke den inn i TacoTranslate-kontekstleverandøren:

import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';

const tacoTranslate = createTacoTranslateClient({
	apiKey: 'YOUR_API_KEY',
});

export default function App() {
	const [locale, setLocale] = useState('en');

	return (
		<TacoTranslate client={tacoTranslate} locale={locale}>
			<Translate string="Hello, world!"/>
		</TacoTranslate>
	);
}

Du kan no bruke Translate komponenten kvar som helst i applikasjonen din for å vise omsett tekst! Hugs å sjekke ut dokumentasjonen vår for meir informasjon og for implementeringsrettleiingar tilpassa oppsettet ditt.

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

Fordelar ved å bruke TacoTranslate

Tidsbesparande: Automatiserer den tidkrevjande prosessen med lokalisering og innsamling av strengar, og sparar deg verdifull tid.
Kostnadseffektivt: Minskar behovet for manuell omsetjing og senkar kostnadene ved lokalisering.
Forbetra nøyaktigheit: AI-drevne omsetjingar sikrar kontekstnøyaktige og høgkvalitetsresultat.
Skalerbar løysing: Legg enkelt til støtte for nye språk etter kvart som applikasjonen og kundebasen veks.

Kom i gang i dag!

React-applikasjonen din blir omsett automatisk når du legg til tekststrengar i ein Translate komponent. Merk at berre miljø med read/write tillatelsar på API-nøkkelen vil kunne opprette nye tekststrengar som skal omsetjast.

Vi anbefaler at du har eit lukka og sikra staging-miljø der du kan teste produksjonsapplikasjonen din, og leggje til nye tekststrengar før du går i produksjon. Dette vil hindre at nokon nokon stjeler den hemmelege API-nøkkelen din, og potensielt gjere omsetjingsprosjektet ditt uforholdsmessig stort ved å leggje til uønska tekststrengar.

Be sure to check out the complete examples over at our GitHub profile. If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Translate for free!