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

Leter du etter å utvide React-applikasjonen din til nye marknader? TacoTranslate gjer det utruleg enkelt å lokalisere React-appane dine, slik at du kan nå eit globalt publikum utan trøbbel.

Kvifor velje TacoTranslate for React?

Sømlaus integrasjon: Designa spesielt for React-applikasjonar, integrerer TacoTranslate seg sømlaust i den eksisterande arbeidsflyten din.
Automatisk innsamling av tekststrengar: Ikkje lenger treng du å handtere JSON-filer manuelt. TacoTranslate samlar automatisk tekststrengar frå kodebasen din.
AI-drevne omsetjingar: Dra nytte av krafta frå AI for å levere kontekstuelt nøyaktige omsetjingar som passar tonen i applikasjonen din.
Augnablikkeleg språkstøtte: Legg til støtte for nye språk med berre eit klikk, slik at applikasjonen din blir tilgjengeleg globalt.

Korleis det fungerer

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 krev ikkje at du oppgir eit kredittkort.

I brukargrensesnittet til TacoTranslate opprett eit prosjekt, og gå til fana for API-nøklar. Opprett ein read nøkkel, og ein read/write nøkkel. Vi lagrar dei som miljøvariablar. Den read nøkkelen er det vi kallar public, og den read/write nøkkelen er 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: Standard fallback-lokalkode. I dette dømet set vi den til en for engelsk.
TACOTRANSLATE_ORIGIN: The “folder” where your strings will be stored, such as the URL of your website. 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

Pass på å ikkje lekke den hemmelege read/write API-nøkkelen til produksjonsmiljø på klientsida.

Setje opp TacoTranslate

Initialiser TacoTranslate i React-applikasjonen din ved å pakke applikasjonen inn i TacoTranslate sin kontekstilbydar:

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 å sjå på dokumentasjonen vår for meir informasjon, og for implementasjonsrettleiingar som er spesifikke for oppsettet ditt.

import {Translate} from 'tacotranslate/react';

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

Fordelar ved å bruke TacoTranslate

Sparar tid: Automatiserer den tidkrevjande prosessen med lokalisering og innsamling av tekststrengar, og sparar deg verdifull tid.
Kostnadseffektiv: Reduserer behovet for manuelle omsetjingar, og senkar kostnadene ved lokalisering.
Forbetra nøyaktigheit: AI-drevne omsetjingar sikrar kontekstuelt nøyaktige og høgkvalitetsresultat.
Skalerbar løysing: Legg lett til støtte for nye språk i takt med at applikasjonen og kundebasen veks.

Kom i gang i dag!

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

Vi anbefaler at du har eit lukka og sikra staging-miljø der du kan teste produksjonsapplikasjonen din og leggje til nye strengar før du går live. Dette vil hindre at nokon steler den hemmelege API-nøkkelen din, og potensielt gjere oversettingsprosjektet ditt unødvendig stort ved å leggje til uautoriserte strengar.

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!