クイック翻訳セットアップ

導入
私のInvoiceMakerアプリケーション開発の一環として、私はソフトウェアのフランス語版を持っていた.librairiesの多くがある/フレームワークは、反応アプリケーションでの翻訳を処理するためにご利用いただけます.私は、私が本当にこれの世話をするためにより多くのパッケージを加える必要がないとわかりました、そして、ちょうど私自身で単純な何かをコード化することができました.だから、ここにある!

欲しかったもの
何かとてもシンプルなものが欲しかった.ユーザーのブラウザ言語を見てみましょう.その言語がフランス(fr frまたはfr)であるならば、私は私のアプリケーションの言語をフランス語に設定します.それは英語になります.
私はフランス語の異なった味があるということを知っています、しかし、現在、フランスからフランス語を取り扱うことはちょうど私が必要としたものでした.

どうやって?
まず、反応アプリケーションを作成しましょう.我々はそれの多くを必要としないだろう、私は単にどのように始めるかを示すでしょう.我々は、CREATE反応アプリを使用します.
運転:create-react-app translations-setupすぐに新しく作成されたディレクトリに移動し、npm startを実行しましょう.

現在の言語を取得する
まず、ユーザのブラウザが使用するどの言語を知る必要があります.アプリを変更します.以下のコードを追加します

import React from 'react'
import logo from './logo.svg'
import './App.css'
let frenchCodes = ['fr-FR', 'fr-fr', 'fr']
let language = navigator.language || navigator.userLanguage
if (!frenchCodes.includes(language)) {
    language = 'en-US'
}
// App component below...

ここでは、使用する言語を定義します.ウィンドウに言語プロパティを使用します.ナビゲータオブジェクト.
私はフランス語のコードを配列の中に入れました.いくつかのナビゲータが小文字で返すかもしれません(サファリのバージョンもあります).
そして、その配列の中に言語が含まれていなければ、ユーザのブラウザがフランス語ではないことを知っています.したがって、私は英語を私たちに英語に設定します.

翻訳用JSONファイル
次に、翻訳が保存されるファイルを作成します.フォルダフォルダ内にフォルダを作成します.そのフォルダの中で、2つのJSONファイル、en usを作成します.JSONとFR - FJ . JSONとインデックスと呼ばれるJSファイル.js
JSONファイルはそれぞれの言語の翻訳を保持します.
フィフス

{
    "appTitle": "Modifiez src/App.js et sauvegarder pour recharger.",
    "appLink": "Apprenez React",
    "newPageTitle": "Nouvelle Page",
    "english": "Anglais",
    "french": "Français"
}

エヌUS.JSON

{
    "appTitle": "Edit src/App.js and save to reload.",
    "appLink": "Learn React",
    "newPageTitle": "New Page",
    "english": "English",
    "french": "French"
}

キーの名前は完全に任意です.これは私たちのアプリケーションで使用されるものですので、彼らはあなたに意味を作る限り、好きなものを呼び出します.
最後に、ユニークなインデックスの中に翻訳ファイルをインポートします.jsファイル

import fr_FR from './fr-FR.json'
import en_US from './en-US.json'
const translations = {
    'fr-FR': fr_FR,
    'en-US': en_US
}

export default translations

偉大な、我々の翻訳は現在、単一のファイルからアクセス可能です.

文脈
今、我々はそれをすべて一緒に置く必要があります.我々は、アプリケーションのすべての部分で、現在の言語にアクセスする必要があります.これを行うには、コンテキストを使用します.
まず、コンテキストを作成しましょう.新しい言語のテキストを作成します.以下のコードを内部でコピーします.

import React from 'react'

const LanguageContext = React.createContext()

export default LanguageContext

次に、コンテキストプロバイダーにアプリケーションコンポーネントをラップし、使用している言語を保持する状態を設定します.この状態は、コンテキストプロバイダーに渡され、アプリケーション全体で使用されます.また、簡単に我々のアプリケーションの現在の言語を変更する2つのボタンを追加します.あなたのアプリ.jsファイルは次のようになります.

import React, { useState } from 'react'
import logo from './logo.svg'
import './App.css'
import NewComponent from './NewComponent'
import translations from './i18n/'
import LanguageContext from './LanguageContext'
let frenchCodes = ['fr-FR', 'fr-fr', 'fr']
let language = navigator.language || navigator.userLanguage
if (!frenchCodes.includes(language)) {
    language = 'en-US'
}

function App() {
    const [lng, setLng] = useState(language)
    return (
        <LanguageContext.Provider value={lng}>
            <div className='App'>
                <header className='App-header'>
                    <img src={logo} className='App-logo' alt='logo' />
                    <p>{translations[lng]['appTitle']}</p>
                    <a
                        className='App-link'
                        href='https://reactjs.org'
                        target='_blank'
                        rel='noopener noreferrer'>
                        {translations[lng]['appLink']}
                    </a>
                    <NewComponent />
                    <button onClick={() => setLng('fr-FR')}>
                        {translations[lng]['french']}
                    </button>
                    <button onClick={() => setLng('en-US')}>
                        {translations[lng]['english']}
                    </button>
                </header>
            </div>
        </LanguageContext.Provider>
    )
}

export default App

ここでの翻訳を使用するには、i 18 n/indexからの翻訳をインポートします.js次に、現在の言語を取得するには、LNG変数を使用して、状態に格納され、コンテキスト内の値として使用されます.したがって、translations[lng]私たちに現在の言語の翻訳を与える.次に、適切な値を取得するキーを追加します.
あなたは私たちのアプリに新しいコンポーネントがあることに気づいたことがあります.私はnewcomponentコンポーネントを加えました、そして、これは適切な翻訳を得るためにusecontextフックを使用します:

import React, { useContext } from 'react'
import LanguageContext from './LanguageContext'
import translations from './i18n'

const NewComponent = function() {
    const lng = useContext(LanguageContext)
    return (
        <div>
            <h1>{translations[lng]['newPageTitle']}</h1>
        </div>
    )
}

export default NewComponent

LanguageContextと翻訳ファイルをインポートする必要があります.usecontext言語のテキストを与えることにより、必要に応じてアプリケーションで使用する現在の言語を持つことができます.
そしてそこにあなたのプロジェクトに新しいパッケージやlibrairiesを追加せずに、翻訳の世話をするためのシンプルかつ迅速な方法があります.😉
あなたはGithubにコードを見つけるかもしれません.
楽しい❤️