React khởi động & demo

Dùng track này khi bạn muốn thời gian chạy 18ways trong React mà không có lớp bộ điều hợp dành riêng cho Next.

Cài đặt

bash

npm install @18ways/react

Playground dịch cơ bản

Mã nguồn playground có thể chỉnh sửa

src/App.tsx

import { useState } from 'react';
import { LanguageSwitcher, T, Ways } from '@18ways/react';

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

  return (
    <Ways
      apiKey="pk_dummy_demo_token"
      locale={locale}
      baseLocale="en-GB"
      acceptedLocales={['en-GB', 'en-GB-x-caesar']}
      persistLocaleCookie={false}
      context="docs.react.example"
    >
      <main className="react-demo-shell">
        <section className="react-demo-card">
          <p className="react-demo-eyebrow">@18ways/react</p>
          <h1 className="react-demo-title">
            <T>Hello world</T>
          </h1>
          <p className="react-demo-copy">
            <T>Translate React UI without writing translation keys.</T>
          </p>
        </section>
        <div className="react-demo-switcher">
          <LanguageSwitcher currentLocale={locale} onLocaleChange={setLocale} />
        </div>
      </main>
    </Ways>
  );
}

Xem trước

Từ đó, thêm useT(), các ngữ cảnh lồng nhau và các điều khiển bản địa hoá tùy chỉnh trong trang Sử dụng.

Tiếp theo: Cách sử dụng React