TacoTranslate
/
DokumentasjonPrisnivå
 
Artikkel
04. mai

Enkel lokaliseiring for React-applikasjonar

Ønskjer du å utvide React-applikasjonen din til nye marknadar? TacoTranslate gjer det utruleg enkelt å lokaliserer React-appar dine, slik at du kan nå eit globalt publikum utan trøbbel.

Kvifor velje TacoTranslate for React?

  • Sømlaus integrasjon: Spesielt designa for React-applikasjonar, TacoTranslate integrerer sømlause inn i arbeidsflyten din.
  • Automatisk strengsamling: Ikkje meir manuell handtering av JSON-filer. TacoTranslate samlar automatisk strengjer frå kodebasen din.
  • AI-drevne omsettingar: Utnytt krafta til AI for å gje kontekstuelt nøyaktige omsettingar som passar til tonen i applikasjonen din.
  • Straks språkstøtte: Legg til støtte for nye språk med berre eit klikk, og gjer applikasjonen din globalt tilgjengeleg.

Korleis det fungerer

Installer TacoTranslate-pakken via npm:

npm install tacotranslate

Når du har installert modulen, må du opprette ein TacoTranslate-konto, eit oversettingsprosjekt og tilhøyrande API-nøklar. Opprett ein konto her. Det er gratis, og du treng ikkje å legge til kredittkort.

Inne i TacoTranslate-applikasjonen sin brukargrensesnitt, lag eit prosjekt, og naviger til API-nøkkel-fanen. Lag ein read nøkkel, og ein read/write nøkkel. Vi vil lagre dei som miljøvariablar. read nøkkelen kallast public, og read/write nøkkelen kallast secret. Til dømes kan du legge dei til i ei .env fil i roten av prosjektet ditt.

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

  • TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalkode. I dette dømet set vi han til en for engelsk.
  • TACOTRANSLATE_ORIGIN: «Mappa» der strengane dine blir lagra, slik som 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

Ver aldri med på å lekke den hemmelige read/write API-nøkkelen til produksjonsmiljø på klientsida.

Sette opp TacoTranslate

Initialiser TacoTranslate i React-applikasjonen din ved å pakke applikasjonen inn i TacoTranslate context provider:

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 omsette tekst! Sørg for å sjå dokumentasjonen vår for meir informasjon, og for implementeringsveiledningar 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 med å bruke TacoTranslate

  • Tidsbesparande: Automatiserer den tidkrevjande prosessen med lokaliseringsarbeid og samling av tekst, og sparer deg verdifull tid.
  • Kostnadseffektiv: Reduserer behovet for manuelle omsettingar, og senkar lokaliseringskostnadene dine.
  • Forbetra nøyaktigheit: AI-drifta omsettingar sikrar kontekstuelt nøyaktige og høgkvalitets resultat.
  • Skalerbar løysing: Legg enkelt til støtte for nye språk etter kvart som applikasjonen og brukarbasen veks.

Kom i gang i dag!

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

Vi tilrår å ha eit lukka og sikkert staging-miljø der du kan teste produksjonsapplikasjonen din, og legge til nye strenger før du går live. Dette vil hindra at nokon stjel den hemmelige API-nøkkelen din, og potensielt forureina omsetjingsprosjektet ditt ved å leggje til uautoriserte strenger.

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!

Eit produkt frå NattskiftetLaga i Noreg