How to do i18n with React

We are experimenting with some React components for our addons, and i18n is something that has been occupying my mind lately. How would one start off doing that in React, can we utilise the same properties files we are using for the rest of our addon with AJS.i18n.getText()?

I have seen you guys (Atlassian) doing it so I guess it’s possible?

1 Like

Hi Martin,


works for me from within JSX templates. I guess its not a clean solution though

Thanks, I suspected it would be quite simple to do in JSX. Is there an import I have to do or how do I set it up?

I use a simple react flux setup with

AJS.toInit(function() {


to render the main view. As far as I see I haven’t done any special setup for I18n, besides the normal resource bundle setup.

Here are my package.json dependencies:

“dependencies”: {
“axios”: “^0.15.3”,
“babel-core”: “^6.21.0”,
“babel-loader”: “^6.2.10”,
“babel-plugin-add-module-exports”: “^0.2.1”,
“babel-plugin-react-html-attrs”: “^2.0.0”,
“babel-plugin-transform-class-properties”: “^6.19.0”,
“babel-plugin-transform-decorators-legacy”: “^1.3.4”,
“babel-preset-es2015”: “^6.18.0”,
“babel-preset-react”: “^6.16.0”,
“babel-preset-stage-0”: “^6.16.0”,
“flux”: “^3.1.2”,
“lodash”: “^4.17.2”,
“react”: “^15.4.1”,
“react-dom”: “^15.4.1”,
“webpack”: “^1.9.11”,
“webpack-dev-server”: “^1.16.2”
“devDependencies”: {
“es6-promise-promise”: “^1.0.0”,
“file-loader”: “^0.9.0”,
“url-loader”: “^0.5.7”

hope this helps


Thanks Stefan, I think this is exactly what I am looking for.

1 Like