# How to: Localise your React App with LinguiJS and Localazy
Do you have an app that you use and you want to localize it? Localizing is very important to ensure that all people can use your app with ease. With [Localazy](https://localazy.com) and [LinguiJS](https://lingui.js.org/) you can achieve it easily (and for free)!
Localazy is a free **translation management** system to help developers and translators focus on their jobs and make the translation process seamless. It provides a pro-active translation memory called [ShareTM](https://localazy.com/docs/general/what-is-localazy-sharetm) which provides highly accurate automatic translations for even easier localization.
## App setup
Let's start with the React app. Create a new project with the following command:
```js
npx create-react-app localazy-react-example
cd localazy-react-example
```
Open the newly created project and install **LinguiJS** for in-app translation management.
```ssh
npm install --save-dev @lingui/cli @babel/core babel-core@bridge
npm install --save-dev @lingui/macro babel-plugin-macros # required for macros
npm install --save @lingui/react
```
## Localazy setup and integration
[Sign up on Localazy](https://localazy.com/register) and create a new app. I will use English as a source language, but you can choose any other. Then on the integration screen, select JSON. We will upload the source strings in a bit.
Afterwards, you can [install](https://localazy.com/docs/cli/installation) Localazy's CLI for Linux, MacOS or Windows.
Come back to your project. In the root folder, create a file called `localazy.json` and paste the following. Make sure to fill in your *writeKey* and *readKey* which you can retrieve from your app either under the settings tab or in the first step of the JSON CLI guide on the select integration screen.
```json
{
"writeKey": "your-write-key",
"readKey": "your-read-key",
"upload": {
"type": "json",
"files": "src/locales/en.json"
},
"download": {
"files": "src/locales/${lang}.json"
}
}
```
Then, we need to create a file called `.linguirc` in our root directory. Fill it in as so, make sure to include whatever locales you use. In this article we'll use _en_ and _es_.
```json
{
"catalogs": [{
"path": "src/locales/{locale}",
"include": "src"
}],
"sourceLocale": "en",
"locales": ["en", "es"],
"format": "minimal"
}
```
Afterwards, we need to do a little modification to your `package.json` file. Add the following command:
```json
{
"scripts": {
...
"localise": "localazy download && lingui extract && lingui compile"
}
}
```
Now, we can create a `./src/locales` folder. This is the folder in which we will store all of our locale files. Create a file called `en.json` in the `./src/locales` folder and paste the following:
```json
{
"welcome": "Welcome, {name}",
"today": "Today is {date}.",
"thatsAll": "That's all for today!"
}
```
You can change these as you please. That's just an example of the kinds of things you can do. We are almost ready. Let's upload the source English phrases to Localazy. Run `localazy upload` and you should see your strings on the project screen (you need to refresh the page). ✨ Magical! ✨
Go to Settings and scroll down. You should see three options. Make sure `Use community translations (ShareTM)` is switched on.
Learn more about [how ShareTM works](/docs/general/what-is-localazy-sharetm).
At this point, you may add new languages, for which you can use automatic or manual translations. Automatic translations use highly accurate community translations, so they are generally very precise. However, they support translations only from English at the moment, so you need to have the English language added. It does not have to be your source language though.
Before downloading, you need to review automatically translated strings. Otherwise, they have only a candidate status and won't be published. In case you, as an owner, translate anything, the strings are automatically accepted without the review process. Try to add Spanish language and review the suggested phrases or translate them manually (it does not need to be proper Spanish).
Now, run `npm run localise` to download these new files and set them up with LinguiJS. And just like that, your app is almost done! It's time to get into the nitty-gritty.
## Using Localazy translations with LinguiJS
Here, we are going to give a brief example. LinguiJS already has an amazing guide [here](https://lingui.js.org/tutorials/react.html)
In your `index.js` file, add these lines:
Change these imports to match your project. We are just creating a basic welcome page.
```js
import React from 'react'
import { render } from 'react-dom'
import Welcome from './welcome.js'
import { i18n } from '@lingui/core'
import { I18nProvider } from '@lingui/react'
const locale = "es" // or whatever you need it to be
const catalog = require(`./locales/${locale}.js`)
i18n.load(locale, catalog.messages)
i18n.activate(locale)
const App = () => (
)
render(, document.getElementById('root'))
```
And in your `welcome.js` file, paste this:
```js
import React from 'react'
import { Trans } from '@lingui/macro';
const Welcome = ({name}) => {
const date = new Date().toString() // Date will not be translated, you can use more advanced techniques to do so
return (
welcome {name}
today {date}
)
}
export default Welcome;
```
As you can see, to translate with Lingui, we have surrounded the keys with the `` tags.
You may check out the final repo [here](https://github.com/danielnewell/linguijs-sample). Remember, this is just a sample, you will have to tweak this to fit into your application, however, this is a great first step to ensure that your project is ready to be localized and allow everyone to use your app, regardless of what languages they speak.
As always, please post your questions, comments, and concerns below.