import i18n from 'i18next'; import initReactI18next from 'react-i18next'; const resources = en: translation: greeting: "Hello, name! Welcome to the app.", select_lang: "Select Language"
1. Push code to GitHub. 2. For Netlify: drag & drop `build` folder. 3. For GitHub Pages: ```bash npm run build npm install -g gh-pages gh-pages -d build </code></pre> <hr> <h2>Common Pitfalls & Solutions</h2> <p>| Issue | Fix | |-------|-----| | Translations not updating | Ensure <code>i18n.changeLanguage</code> is called and component re-renders (it does with <code>useTranslation</code>). | | Placeholder not replaced | Check syntax: <code>t('greeting', name )</code> not <code>t('greeting', name)</code>. | | JSON nesting errors | Keep translation keys flat unless you use nested objects (then access with <code>t('nested.key')</code>). |</p> <hr> <h2>Conclusion</h2> <p>You’ve just built a fully functional multilingual greeting app in React with i18next. The same pattern scales to large apps – you can split translations into separate JSON files, lazy-load languages, or integrate with a CMS.</p> <p><strong>Next steps:</strong></p> <ul> <li>Add more languages (Arabic RTL support requires <code>dir="rtl"</code>).</li> <li>Save user’s language preference in <code>localStorage</code>.</li> <li>Build a translation dashboard for non-technical users.</li> </ul> <p><strong>GitHub Ready?</strong><br> Fork my starter repo: <a href="https://github.com">github.com/yourusername/multilingual-greeting</a> (Replace with your actual link after creating it).</p> <hr> <p><strong>Found this helpful?</strong><br> Leave a ⭐ on GitHub and share this post with your network. Happy coding! 🚀</p> <hr> multilingual greetings react js github
## Deploying to GitHub Pages / Netlify
npm create vite@latest multilingual-greeting -- --template react cd multilingual-greeting npm install i18next react-i18next Create a folder src/i18n.js : For GitHub Pages: ```bash npm run build npm
npm install react-country-flag import CountryFlag from "react-country-flag"; <button onClick=() => changeLanguage('es')> <CountryFlag countryCode="ES" svg /> Spanish </button> Here’s how to organize your repo for maximum clarity: button onClick=() =>