Skip to main content

Featured

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!)

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!) Congratulations, developer! 👏 You’ve successfully completed the 45-Day React.js Roadmap — from understanding the fundamentals to mastering advanced concepts like Redux, Routing, Testing, and Deployment. 📘 What You’ve Learned ✅ React basics — Components, JSX, Props, and State ✅ Hooks — useState, useEffect, useRef, useMemo, and Custom Hooks ✅ Context API and Redux Toolkit for global state management ✅ Routing with React Router & Protected Routes ✅ Data fetching using Fetch API, Axios, React Query ✅ Advanced Patterns — Compound Components, Render Props, HOCs ✅ Styling — CSS Modules, Styled Components, Theming ✅ Animations, Accessibility, Testing, and Performance Optimization ✅ Deployment on Vercel, Netlify, or GitHub Pages 🧩 Final Project Ideas Now that you’re done, build real-world apps to polish your skills: 📝 Task ...
Post a Comment
Read more
Labels

🌍 Day 40 — Internationalization (i18n) Basics with react-i18next

🌍 Day 40 — Internationalization (i18n) Basics with react-i18next

If your app reaches users from different countries, supporting multiple languages is essential. The react-i18next library makes internationalization simple and scalable in React apps.

🔹 Setting Up react-i18next

npm install i18next react-i18next

⚙️ Initialization

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: { welcome: "Welcome", hello: "Hello World!" } },
    fr: { translation: { welcome: "Bienvenue", hello: "Bonjour le monde!" } },
  },
  lng: "en",
  fallbackLng: "en",
  interpolation: { escapeValue: false },
});

💡 Using Translations

import React from "react";
import { useTranslation } from "react-i18next";

export default function App() {
  const { t, i18n } = useTranslation();

  return (
    <div>
      <h2>{t("welcome")}</h2>
      <p>{t("hello")}</p>
      <button onClick={() => i18n.changeLanguage("fr")}>FR</button>
      <button onClick={() => i18n.changeLanguage("en")}>EN</button>
    </div>
  );
}

With i18next, you can easily add multi-language support and dynamically switch languages — a must-have for globally accessible applications.

Comments

Post a Comment