Answers for "introduce international languages in react application"

0

introduce international languages in react application

//steps to introduce localization into a react application


1.	Start by creating a react application using $npx create-react-app my-test-localization-app --save-dev @testing-library/cypress 
	// we also include testing using @testing-library with support for cypress commands using (--save-dev @testing-library/cypress)

2.	Install react-intl library that will help us introduce international languages into our application
	By doing $npm install react-intl
3.	Add en-US.json file under the src folder of the react-app file
	Add ex-SP.josn file under the src folder of the react-app file
	in the e-US.json file add
	{
		"app.header": "my amazing application heading",
		"app.content": "the message part of my amazing application",
		"app.channel.plug": "An application created by {name}",
	}	
	//	IN FRENCH DUDE
	in the ex-MX.json file add
	{
		"app.header": "my amazing application heading",
		"app.content": "the message part of my amazing application",
		"app.channel.plug": "An application created by {name}",
	}	

4. 	Add this code to the top of the Index.js file
	import {IntlProvider} from "react-intl";
	//this enables us to introduce a provider to wrap around the <App /> component like so
	<IntlProvider >
		<App />
	<IntlProvider />
5.	//Import your transaleted texts into the Index.js file and include this
	Import Spanish from "./languages/es-SP.json";
	Import English from "./languages/en-US.json";
	import {IntlProvider} from "react-intl";
	//Check if the navigator language
	const locale = navigator.language;

	//create a varible to set in the user's locale language
	let language;
	Switch(locale){
	  case "es-SP":
	   language = Spanish;
 	   break;
	  default:
	   language = English;
	   break;
	}

	<IntlProvider locale={locale} message={language} >
		<App />
	<IntlProvider />
6.	In the App.js
	Import {FormattedMessage} from "react-intl";
	Inside the App component
	Add this piece of code
	<FormattedMessage  
	  id="app.header"
	  defaultMessage="this is the fall back message if the required message fails to render"
	/>
Posted by: Guest on October-16-2021

Code answers related to "introduce international languages in react application"

Code answers related to "Javascript"

Browse Popular Code Answers by Language