react-i18next

The Razzle SSR example demonstrates several advanced i18next patterns for Server-Side Rendering (SSR):

• Translation Hydration: Translations are passed from the server to the client during the initial render. This prevents translation reloads and UI flickering.
• Request-Scoped i18next Instances: It uses i18next-http-middleware on the server to ensure every request receives its own unique instance of i18next. This prevents race conditions where one user's language settings might override another user's settings in a singleton.
• Client-Side Translation Serving: Uses Express to serve translations to the client side.
• Missing Translation Support: Fully supports the saveMissing feature of i18next. When content is missing, it is pushed to the server and stored in xyz.missing.json.

This project uses react-scripts as a development dependency. To update to a new version:

1. Check your current version in package.json.
2. Consult the Create React App changelog for migration instructions.
3. Bump the react-scripts version in package.json.
4. Run npm install.

To define permanent environment variables, create a .env file in your project root.

Priority Order for Loading: Variables are loaded based on the environment, with .local files taking highest priority within their scope.

• npm start: .env.development.local > .env.development > .env.local > .env
• npm run build: .env.production.local > .env.production > .env.local > .env
• npm test: .env.test.local > .env.test > .env (Note: .env.local is ignored during tests)

File Types:

• .env: Default settings.
• .env.local: Local overrides (loaded for all environments except test).
• .env.development, .env.test, .env.production: Environment-specific settings.
• .env.[environment].local: Local overrides for specific environments.

REACT_APP_SECRET_CODE=abcdef

Install the latest version of react-i18next (which includes hooks support) using npm.

Note for React Native users: To use hooks within React Native, you must use react-native version 0.59.0 or higher.

Note for Legacy users: If you require the legacy version (v9.x.x), install it using the @legacy tag.

To automatically format code on every git commit, follow these steps:

1. Install dependencies:

npm install --save husky lint-staged prettier

2. Add a precommit script to the scripts section of package.json:

"scripts": {
  "precommit": "lint-staged",
  "start": "react-scripts start",
  "build": "react-scripts build"
}

3. Add a lint-staged configuration to package.json to target specific file types:

"lint-staged": {
  "src/**/*.{js,jsx,json,css}": [
    "prettier --single-quote --write",
    "git add"
  ]
}

To format the entire project for the first time, run:

./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx}"

Files placed in the public folder are not processed by Webpack and are copied to the build folder untouched. To reference these assets, use the %PUBLIC_URL% variable in index.html or process.env.PUBLIC_URL in JavaScript code. This is an escape hatch for cases like specific filenames (e.g., manifest.webmanifest), large numbers of dynamic images, or scripts incompatible with Webpack.

Note: Files in public are not minified, do not have content hashes for caching, and missing files will cause 404 errors at runtime rather than compilation errors.

<!-- In index.html -->
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />

// In JavaScript
render() {
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

To see linting warnings directly in your editor (like VS Code, Atom, or Sublime Text), install an ESLint plugin for your editor and add a .eslintrc file to your project root with the following configuration:

{
  "extends": "react-app"
}

Note: This configuration only affects editor integration. Terminal and browser lint output are managed by Create React App's minimal rule set and will not change.

To use React Bootstrap in your project, install both react-bootstrap and bootstrap via npm or yarn. You must then import the Bootstrap CSS files at the entry point of your application (e.g., src/index.js) and import specific components where needed.

npm install --save react-bootstrap bootstrap@3

// In src/index.js
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

// In src/App.js or components
import { Navbar, Jumbotron, Button } from 'react-bootstrap';

To use locize for translation management, InContext Editing, and saving new segments during runtime, you need to configure your i18n instance with your locize credentials.

Required dependencies for a full locize integration include:

• i18next-locize-backend: For loading translations and saving new segments.
• locize-lastused: To track key usage timestamps for cleaning up unused keys.

Retrieve your projectId and apiKey from your locize project settings and add them to your /src/i18n.js file.

You can import images, fonts, and other files directly into JavaScript modules. Webpack will include the file in the bundle and return the final URL/path as a string. For small images (less than 10,000 bytes) with extensions like bmp, gif, jpg, jpeg, or png, Webpack returns a data URI instead of a path to reduce server requests.

import React from 'react';
import logo from './logo.png'; // Import the image

function Header() {
  // The 'logo' variable contains the URL/path to the image
  return <img src={logo} alt="Logo" />;
}

export default Header;

Flow can be added to a Create React App project to enable static type checking. Follow these steps:

1. Install flow-bin.
2. Add a flow script to your package.json.
3. Initialize Flow to create a .flowconfig file.
4. Add the // @flow pragma to the top of files you wish to type check.