# Video: Step-By-Step Guide to Localizing React Applications Using Transifex Native

**URL:** <https://community.transifex.com/t/video-step-by-step-guide-to-localizing-react-applications-using-transifex-native/2435>\
**Category:** Transifex Native\
**Created:** [September 10, 2021, 12:01pm UTC](https://community.transifex.com/t/video-step-by-step-guide-to-localizing-react-applications-using-transifex-native/2435 "2021-09-10T12:01:07Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![nina](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.transifex.com/nina/32/13_2.png) [@nina](https://community.transifex.com/u/nina)\
**Post date:** [September 10, 2021, 12:01pm UTC](https://community.transifex.com/t/video-step-by-step-guide-to-localizing-react-applications-using-transifex-native/2435/1 "2021-09-10T12:01:07Z")

</div>

In this short video, Nikos, Head of Engineering at Transifex showcases how you can easily localize React components using the @transifex/react library extension.

[![](https://img.youtube.com/vi/Kapk2a_Qh1Y/maxresdefault.jpg "React Localization with Transifex Native [Tutorial]") ](https://www.youtube.com/watch?v=Kapk2a_Qh1Y)

The video highlights are:

- Install needed libraries/dependencies (core Native SDK for Javascript, React extensions and the CLI tool running `npm install @transifex/native @transifex/react @transifex/cli`
- Import core libraries in your code file:  
`import { tx } from '@transifex/native';`  
`import { T, LanguagePicker } from '@transifex/react';`
- Initialize the SDK with your Native token
- Wrap all strings in code using the `<T>` component
- Add language picker component for easily switching languages in the app
- Use Javascript CLI tool to push source content to Transifex
- Translate strings inside Transifex
- Relaunch the app and see the newly applied translations
- Modify the source language via Editor
- CDS updates the cache every hour - To see your changes in the app earlier, invalidate the CDS cache manually running `npx txjs-cli invalidate --token=1/<...> --secret=<...>`. After the successful execution of the command, you can refresh your app and see the newly updated source content.