Material for SAP CodeJam events on UI5 Web Components for React. Step-by-step guide explaining how to build a frontend web application using UI5 Web Components for React.
Hi Team, i have followed your code and try to replicate the i18N part in my own app and the code is not working as well as i checked i18n in your app is also not working
my app
npx create-react-app my-app --template @ui5/cra-template-webcomponents-react
Index.js
------------------
//i18n setup code
import '@ui5/webcomponents/dist/Assets';
import '@ui5/webcomponents-fiori/dist/Assets';
import '@ui5/webcomponents-react/dist/Assets';
import { registerI18nLoader} from "@ui5/webcomponents-base/dist/i18nBundle.js";
import parseProperties from "@ui5/webcomponents-base/dist/PropertiesFileFormat.js";
const supportedLocales = ["en", "fr", "de", "es"];
supportedLocales.forEach(localeToRegister => {
registerI18nLoader("myApp", localeToRegister, async (localeId) => {
const props = await (await fetch(`./i18n/i18n_${localeId}.properties`)).text();
return parseProperties(props);
});
});
//i18n setup code end
Home.js
-------------------
import { useI18nBundle, spacing } from "@ui5/webcomponents-react-base";
const Home = (props) => {
const i18nBundle = useI18nBundle("myApp");
const EMP_BTN_TXT = i18nBundle.getText("tst"); // output is `tst`
return (
<Fragment>
<FlexBox
justifyContent={FlexBoxJustifyContent.Center}
wrap={FlexBoxWrap.Wrap}
style={spacing.sapUiContentPadding}
>
<Button icon="employee" onClick={handleOnClick}>
{EMP_BTN_TXT}
</Button>
</FlexBox>
</Fragment>
);
};
i18n
------
tst=Employee
please help
Regards, Dibyajyoti Nanda