How to do localization in React?

Question

JavaScript

Friends,
How to beautifully translate an application in React?
I see such tasks before localization:

1. The template (JSX) uses the text localization component plus the default translation text inside
   
2. The localization component accepts the ID of the given translation
   
3. There is a tool to extract these IDs throughout the application, and then they are placed in a separate file (for example, JSON)
   
4. We take JSON, translate it, add it to the application, and the application displays the translation by taking the text by ID, and substituting variables that we can pass through the component
   

In general, I like the idea of ​​Angular, it's very simple. You write a text, give it an ID, enter a command, and the output is a file for translation. Everything.
Is there something similar to React?
How do you personally work with localization?
I tried react-intl, but it turns out to be quite inconvenient, there are too many actions to translate one key.
Feeling that I'm preparing localization in React incorrectly.

Answer 1

I close the question, I figured it out.
defineMessages is not needed at all, it's an empty key extraction wrapper that works without it.
If anyone is interested: https://github.com/yakimchuk/react-intl-extractor
Just call the command and all the keys will be exported to JSON.

Answer 2

react-intluses ID to work with localization, why are there many actions to translate one key? It does all the tasks you describe.