---
title: "Edit React translation files"
description: "How to use BabelEdit with React for translating your applications using react-intl, react-i18next, or @lingui/react."
canonical: "https://www.codeandweb.com/babeledit/documentation/frameworks/react"
product: "babeledit"
source: "html"
---

# React

BabelEdit supports the following translation modules for React:

*   [react-intl](#react-intl)
*   [react-i18next](#react-i18next)
*   [@lingui/react](#react-lingui)

## react-intl

A complete tutorial including a small demo project is available here: [How to translate your React app with react-intl](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-react-app-with-react-intl.md)

The preferred layout for the react-intl project is to keep the translation files in your `translations` folder and name the json files with the translations according to the language code:

*   translations
    *   de.json
    *   en.json
    *   fr.json

The preferred file format is [JSON with namespaces in key (Flat JSON)](https://www.codeandweb.com/babeledit/documentation/frameworks/json.md#flat-json).

### Extracting messages with babel-plugin-react-intl

You can extract your translations from your source files using `babel-plugin-react-intl`.

The plugin generates so-called message files that contain all IDs and strings to translate. BabelEdit can read these files including the description and default message.

  ![BabelEdit loading react-intl message files extracted by babel-plugin-react-intl](https://www.codeandweb.com/static/b431b85c348022e94483a6e391197f5d/283d3/react-intl-extract-message-files.png)

If you don't use the extraction plugin simply skip this step. Setting the message file directory is later still possible from the project settings.

## i18next

Please use a [i18next](https://www.codeandweb.com/babeledit/documentation/frameworks/i18next.md) project to work with react-intl.

## LinguiJS

LinguiJS is supported with the JSON catalog file format. Please use a [Generic JSON](https://www.codeandweb.com/babeledit/documentation/frameworks/json.md) project to work with React and LinguiJS.

## In this section

- [Installation](https://www.codeandweb.com/babeledit/documentation.md)
- [Framework selection](https://www.codeandweb.com/babeledit/documentation/framework-selection.md)
- [Main screen](https://www.codeandweb.com/babeledit/documentation/main-screen.md)
- [Project configuration](https://www.codeandweb.com/babeledit/documentation/project-configuration.md)
- [Configure languages](https://www.codeandweb.com/babeledit/documentation/configure-languages.md)
- [Adding translations](https://www.codeandweb.com/babeledit/documentation/adding-translations.md)
- [Search & filters](https://www.codeandweb.com/babeledit/documentation/search-and-filters.md)
- [Editing tools](https://www.codeandweb.com/babeledit/documentation/editing-tools.md)
- [Import & export](https://www.codeandweb.com/babeledit/documentation/import-export.md)
- [.NET (.resx)](https://www.codeandweb.com/babeledit/documentation/frameworks/dotnet.md)
- [Angular](https://www.codeandweb.com/babeledit/documentation/frameworks/angular.md)
- [Ember.js](https://www.codeandweb.com/babeledit/documentation/frameworks/ember-js.md)
- [Flutter (.arb)](https://www.codeandweb.com/babeledit/documentation/frameworks/flutter.md)
- [Gettext (.po, .pot)](https://www.codeandweb.com/babeledit/documentation/frameworks/po-files.md)
- [i18next (json)](https://www.codeandweb.com/babeledit/documentation/frameworks/i18next.md)
- [Java](https://www.codeandweb.com/babeledit/documentation/frameworks/java.md)
- [JSON](https://www.codeandweb.com/babeledit/documentation/frameworks/json.md)
- [Laravel (php/json)](https://www.codeandweb.com/babeledit/documentation/frameworks/laravel.md)
- [Ruby On Rails](https://www.codeandweb.com/babeledit/documentation/frameworks/ruby-on-rails.md)
- [Svelte](https://www.codeandweb.com/babeledit/documentation/frameworks/svelte.md)
- [Vue.js](https://www.codeandweb.com/babeledit/documentation/frameworks/vue-js.md)
- [YAML](https://www.codeandweb.com/babeledit/documentation/frameworks/yaml.md)
- [Overview](https://www.codeandweb.com/babeledit/documentation/features.md)
- [Machine Translation](https://www.codeandweb.com/babeledit/documentation/machine-translation.md)
- [ConsistencyAI](https://www.codeandweb.com/babeledit/documentation/consistency-ai.md)
- [Spell Checker](https://www.codeandweb.com/babeledit/documentation/spellchecker.md)
- [Similar Phrases](https://www.codeandweb.com/babeledit/documentation/translation-memory.md)