React Internationalization Best Practices

React internationalization is a feature based on i18next, which was designed to provide support beyond the basics of formatting and language changes when translating apps.

Its slogan is to "learn once, translate everywhere," so it works with a wide range of platforms. React internationalization centers on the translation of applications created using the React library.  

Tons of popular apps use React, like Netflix, Facebook, and Instagram. It's popular because it's considered a relatively simple but powerful way to create robust user interfaces in JavaScript. If you want to internationalize an app designed with React, then you're going to need to implement React internationalization.

The Basics of React Internationalization

Before getting into the ins and outs of React internationalization, it's important to understand the difference between this and another commonly discussed translation strategy–localization.

Internationalization

Internationalization is the process of preparing a product for any market rather than targeting a single one. It’s thought of as the overarching strategy. For example, when thinking about mobile apps, internationalization would involve establishing the framework to support foreign currencies, characters, and other information that varies by locale.

Localization

Localization is the technical strategy targeting a specific language. It involves all the steps you'll need to take to translate an app, like importing and exporting strings for translation and rebuilding the app when translation is complete.Since React is such a popular option for user interface development, it's necessary to have specific internationalization and localization support. It was developed by the Facebook team but is open for use by just about everyone. Its internationalization component is based on another framework–i18next.  For mobile apps, React internationalization can help with three specific components:

• Location detection: The program can understand the user's location and adjust the displayed app based on that specific area.
• Formatting: This covers the translation of components specifically related to the user interface, like titles, symbols, icons, colors, and more.
• Location-specific content: Content that will change based on regions, like currencies, times, dates, and even keyboard formats, is addressed in this segment.

Having support for these three areas goes a long way towards rolling out a strong program in foreign markets. While React internationalization is a powerful framework, it's not without limitations. Supporting languages with multiple plurals can be difficult, as can managing bi-directional text. It's also prone to issues when images include text, so it may be wiser to remove it from graphics prior to translation. Other than that, best practices will center around the same components in any app translation strategy.

Best Practices for React Internationalization

React internationalization is just a framework, so it will not fix issues with your coding or resolve translation problems. As a result, many of the following best practices stem from those leveraged in any mobile app internationalization project:

• Standardize code: Many developers have their own ways of working, but that won’t equate to success when internationalizing an app because code needs to be consistent. That means standardizing the treatment of variables and overall writing standards. Ensuring a clean starting point will save you from a lot of trouble later on as you move into the localization phase.
• Review language options carefully: While React internationalization can support a wide range of languages, platforms like the App Store or Google Play–where you will likely distribute your app–may not have the same options. It's very important to review the available choices on these popular channels prior to any major planning.
• Build a buffer: Languages can contract and expand when translated, sometimes quite extensively. Consider the German word 'Streichholzschächtelchen." This 24-letter behemoth means "matchboxes" in English. While you typically don't have to prepare for words quite that long, it is smart to add a 30% buffer to address text expansion and dilation.
• Test and retest: You need a strong quality assurance (QA) process, as well as channels for feedback from your users and developers. A beta test of your target market can give you a good idea of what they think of the user interface and ways you can improve it.
• Establish a continuous localization approach: Apps see a lot of updates. Keeping those current across all languages is not an easy task, especially when using manual processes. Mapping a strategy that allows for the automatic triggering of jobs and importing and exporting of content will streamline efforts here.  

React internationalization is just a library that will support you as you translate your product to new markets; it's not going to do all the work. You will still need to follow baseline-level best practices to prepare your app for new markets. This is why it's wise to work with a tech-forward translation agency that's also capable of guiding your code strategy.  

‍