{"id":325560,"date":"2021-06-27T15:00:21","date_gmt":"2021-06-27T15:00:21","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=325560"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=325560","title":{"rendered":"React Intl: \u0438\u043d\u0442\u0435\u0440\u043d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/_m\/ye\/tj\/_myetj0pmttcnrbqgpiwd0gzmdo.png\">  <\/p>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 <code>React Intl<\/code> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430 \u0442\u0435\u043a\u0441\u0442\u0430 \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u044f\u0437\u044b\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c &quot;\u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0435&quot; \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u043d\u0442\u0435\u0440\u043d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u043c \u043d\u0430 <code>React<\/code>. \u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u044f\u0437\u044b\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0432\u0438\u0437\u0438\u0442\u0430\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/hi\/uw\/4b\/hiuw4bocniwkw4sjsuh4rtpkque.png\">  <\/p>\n<p>\u0414\u0435\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/ibaslogic.github.io\/i18n_react_intl_project\/\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c. \u043f\u0435\u0440.: \u043c\u044b \u0441 \u0432\u0430\u043c\u0438 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0440\u0443\u0441\u0441\u043a\u0443\u044e \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e.<\/p>\n<p>  <\/p>\n<h2 id=\"internacionalizaciya-i-lokalizaciya\">\u0418\u043d\u0442\u0435\u0440\u043d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h2>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u043d\u0435\u0435, <code>React Intl<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u043d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u041d\u043e \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u043d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f?<\/p>\n<p>  <\/p>\n<p>\u0418\u043d\u0442\u0435\u0440\u043d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430 \u2014 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043b\u043e\u043a\u0430\u0446\u0438\u044f\u0445 (\u044f\u0437\u044b\u043a\u043e\u0432\u044b\u0445 \u0441\u0440\u0435\u0434\u0430\u0445). \u0414\u043b\u044f \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u043d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u0430 <code>Intl<\/code> \u0438\u043b\u0438 <code>i18n<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f (<code>l10n<\/code>) \u2014 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u0438\u043d\u0442\u0435\u0440\u043d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e (\u0438\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u043d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e?) \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439.<\/p>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e, \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u2014 \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438\u043b\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a. \u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0443\u043b\u044c\u0442\u0443\u0440\u043d\u044b\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0447\u0438\u0441\u0435\u043b \u0438 \u0434\u0430\u0442 \u0438\u043b\u0438 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0435\u0434\u0438\u043d\u0438\u0446 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f, \u0434\u0435\u043d\u0435\u0436\u043d\u044b\u0445 \u0435\u0434\u0438\u043d\u0438\u0446 \u0438 \u0442.\u0434.<\/p>\n<p>  <\/p>\n<p>\u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, <code>React Intl<\/code> \u0438\u043c\u0435\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0439 \u0434\u043b\u044f \u0440\u044f\u0434\u0430 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439.<\/p>\n<p>  <\/p>\n<h2 id=\"nastroyka-proekta\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f) \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u2014 \u0441 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u2014 \u0438\u0437 <a href=\"https:\/\/github.com\/Ibaslogic\/i18n_react_intl_project\">\u044d\u0442\u043e\u0433\u043e GitHub-\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f<\/a>. \u041c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0434\u043b\u044f 4 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u044f\u0437\u044b\u043a\u043e\u0432: \u0440\u0443\u0441\u0441\u043a\u043e\u0433\u043e, \u043d\u0435\u043c\u0435\u0446\u043a\u043e\u0433\u043e, \u0444\u0440\u0430\u043d\u0446\u0443\u0437\u0441\u043a\u043e\u0433\u043e \u0438 \u044f\u043f\u043e\u043d\u0441\u043a\u043e\u0433\u043e.<\/p>\n<p>  <\/p>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b, \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">git clone https:\/\/github.com\/Ibaslogic\/i18n_react_intl_starter<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">cd i18n_react_intl_starter yarn # \u0438\u043b\u0438 npm i<\/code><\/pre>\n<p>  <\/p>\n<p>\u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u043d\u0430 \u0432\u0430\u0448\u0435\u0439 \u043c\u0430\u0448\u0438\u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d <a href=\"https:\/\/nodejs.org\/en\/\"><code>Node.js<\/code><\/a>.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>yarn start<\/code> \u0438\u043b\u0438 <code>npm start<\/code>. \u041c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <code>http:\/\/localhost:3000<\/code>.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/4o\/ya\/vy\/4oyavyimfqwve2lrnyhyya68h8q.png\">  <\/p>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">i18n_react_intl_starter     \u251c\u2500\u2500 node_modules     \u251c\u2500\u2500 public     \u251c\u2500\u2500 src     \u2502    \u251c\u2500\u2500 components     \u2502    \u2502      \u251c\u2500\u2500 App.js     \u2502    \u2502      \u251c\u2500\u2500 Content.js     \u2502    \u2502      \u251c\u2500\u2500 Footer.js     \u2502    \u2502      \u2514\u2500\u2500 Header.js     \u2502    \u251c\u2500\u2500 index.css     \u2502    \u2514\u2500\u2500 index.js     \u251c\u2500\u2500 .gitignore     \u251c\u2500\u2500 package.json     \u251c\u2500\u2500 README.md     \u2514\u2500\u2500 yarn.lock<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u043d\u0435\u0434\u0440\u0438\u043c <code>React Intl<\/code> \u0432 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<h2 id=\"nastroyka-react-intl\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>React Intl<\/code><\/h2>\n<p>  <\/p>\n<p>\u041e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">yarn add react-intl # \u0438\u043b\u0438 npm i react-intl<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0441\u0435 <code>API<\/code> \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u043d\u0442\u0435\u0440\u043d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u0435\u0440\u043d\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 (\u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439) \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (<code>App<\/code>) \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>IntlProvider<\/code>.<\/p>\n<p>  <\/p>\n<h2 id=\"chto-takoe-intlprovider\">\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 <code>IntlProvider<\/code>?<\/h2>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f, <code>IntlProvider<\/code> \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u0432\u0430\u0436\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0432 \u0441\u0443\u0431\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0443\u0440\u043e\u0432\u043d\u044f \u0438\u0445 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438).<\/p>\n<p>  <\/p>\n<p>\u0421\u0443\u0431\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0435 <code>React Intl<\/code>, \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f <code>formatted<\/code>. \u041e\u043d\u0438 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f (\u043a\u043e\u0434\u0430). \u0421\u0440\u0435\u0434\u0438 \u043d\u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>FormattedMessage<\/code><\/li>\n<li><code>FormattedNumber<\/code><\/li>\n<li><code>FormattedDate<\/code><\/li>\n<li><code>FormattedPlural<\/code><\/li>\n<li>\u0438 <a href=\"https:\/\/formatjs.io\/docs\/react-intl\/components\/\">\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0427\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e, \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u043d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>FormattedMessage<\/code>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442\u044c \u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0443. \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0444\u0430\u0439\u043b <code>src\/components\/App.js<\/code> \u0438 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>App<\/code> \u0432 <code>IntlProvider<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>IntlProvider<\/code> \u0438\u0437 <code>react-intl<\/code> \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0444\u0430\u0439\u043b\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\/\/ ... import { IntlProvider } from 'react-intl'  const App = () =&gt; {   return (     &lt;IntlProvider&gt;       &lt;div&gt;         &lt;Header \/&gt;         &lt;Content \/&gt;         &lt;Footer \/&gt;       &lt;\/div&gt;     &lt;\/IntlProvider&gt;   ) } \/\/ ...<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>IntlProvider<\/code>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u0435\u0433\u043e \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\/\/ ...  const App = () =&gt; {   console.log(IntlProvider)   \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u043e\u0442, \u0447\u0442\u043e \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/w0\/ou\/j9\/w0ouj983dxg_kzgignrcjlwcsha.png\">  <\/p>\n<p>\u0421\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u043c\u0441\u044f \u043d\u0430 <code>defaultProps<\/code> \u2014 \u044d\u0442\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 <code>IntlProvider<\/code>. \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0441\u044f \u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043b\u043e\u043a\u0430\u0446\u0438\u0438. \u041f\u0440\u0438\u043c. \u043f\u0435\u0440.: \u0435\u0441\u043b\u0438 \u0432 \u0432\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u0430\u043a \u0438 \u0432 \u043c\u043e\u0435\u043c, <code>console.log()<\/code> \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 <code>console.dir()<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c <code>IntlProvider<\/code> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u0440\u043e\u043f\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">return (   &lt;IntlProvider messages={{}} locale='en' defaultLocale='en'&gt;     &lt;div&gt;       &lt;Header \/&gt;       &lt;Content \/&gt;       &lt;Footer \/&gt;     &lt;\/div&gt;   &lt;\/IntlProvider&gt; )<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439, \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 \u0438\u0441\u0447\u0435\u0437\u0430\u0435\u0442.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u043f <code>locale<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043d\u0430 \u043a\u0430\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041c\u044b \u0431\u0443\u0434\u0435\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u043f\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0442\u043e\u0433\u043e \u0438\u043b\u0438 \u0438\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u043f <code>message<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u043e\u043a, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u044b\u0445 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u043f\u0430 \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043b\u043e\u043a\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043f\u0440\u043e\u043f <code>defaultLocale<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 &quot;\u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u043c&quot; \u044f\u0437\u044b\u043a\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438, \u043f\u043e\u0438\u0433\u0440\u0430\u0435\u043c \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u0432\u043e\u0430\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0444\u0430\u0439\u043b <code>src\/components\/Footer.js<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e <code>return<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\/\/ ... import { FormattedDate, FormattedNumber, FormattedPlural } from 'react-intl'  const Footer = () =&gt; {   \/\/ ...    return (     &lt;div className='container mt'&gt;       {\/* ... *\/}        &lt;FormattedDate value={Date.now()} \/&gt;       &lt;br \/&gt;       &lt;FormattedNumber value={2000} \/&gt;       &lt;br \/&gt;       &lt;FormattedPlural value={5} one='1 click' other='5 clicks' \/&gt;     &lt;\/div&gt;   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440. \u0412 \u0441\u0430\u043c\u043e\u043c \u043d\u0438\u0437\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">6\/26\/2021 \/\/ \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u0434\u0430\u0442\u0430 2,000 5 clicks<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u043f\u0430 <code>locale<\/code> \u043d\u0430 <code>de<\/code>, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u043c &quot;\u043d\u0435\u043c\u0435\u0446\u043a\u043e\u0435&quot; \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u0442\u044b \u0438 \u0447\u0438\u0441\u043b\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">26.6.2021  2.000<\/code><\/pre>\n<p>  <\/p>\n<p><code>React Intl<\/code> \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u0443\u0435\u0442 \u0434\u0430\u0442\u044b \u0438 \u0447\u0438\u0441\u043b\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u043b\u043e\u043a\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (<code>FormattedDate<\/code> \u0438 <code>FormattedNumber<\/code>, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e).<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u043f <code>value<\/code>, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0449\u0438\u0439 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0423 \u043d\u0430\u0437\u0432\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0440\u043e\u043f\u044b, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0442\u043e\u043d\u043a\u0443\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">return (   &lt;div className='container mt'&gt;     {\/* ... *\/}      &lt;FormattedDate       value={Date.now()}       year='numeric'       month='long'       day='2-digit'     \/&gt;     &lt;br \/&gt;     &lt;FormattedNumber value={2000} style={`currency`} currency='USD' \/&gt;     &lt;br \/&gt;     {\/* ... *\/}   &lt;\/div&gt; )<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u043b\u044f \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u0439 \u043b\u043e\u043a\u0430\u0446\u0438\u0438 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Jun 26, 2021  $2,000.00<\/code><\/pre>\n<p>  <\/p>\n<p>\u0410 \u0434\u043b\u044f \u043d\u0435\u043c\u0435\u0446\u043a\u043e\u0439 \u2014 \u0442\u0430\u043a\u043e\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">26. Juni 2021 2.000,00 $<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0438\u043c\u0432\u043e\u043b \u0434\u0435\u043d\u0435\u0436\u043d\u043e\u0439 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>currency='EUR'<\/code> \u0434\u043b\u044f \u043d\u0435\u043c\u0435\u0446\u043a\u043e\u0439 \u043b\u043e\u043a\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 <code>currency='RUB'<\/code> \u2014 \u0434\u043b\u044f \u0440\u0443\u0441\u0441\u043a\u043e\u0439.<\/p>\n<p>  <\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u0438\u0445 \u0434\u0432\u0443\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0432 \u043d\u0430\u0448\u0435\u043c \u0440\u0430\u0441\u043f\u043e\u0440\u044f\u0436\u0435\u043d\u0438\u0438 \u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>FormattedPlural<\/code>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u0432\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c &quot;\u043a\u043b\u0438\u043a\u043e\u0432&quot; \u0441\u043b\u043e\u0432\u043e <code>click<\/code> \u0431\u044b\u043b\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u0435\u043d\u043e \u0432\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e.<\/p>\n<p>  <\/p>\n<h2 id=\"ispolzovanie-react-intl-api\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>React Intl API<\/code><\/h2>\n<p>  <\/p>\n<p>\u0414\u0440\u0443\u0433\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <a href=\"https:\/\/formatjs.io\/docs\/react-intl\/api\/\"><code>React Intl API<\/code><\/a>. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0431\u044b\u0432\u0430\u044e\u0442 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u044b, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u043d\u044b\u043c <code>API<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 <code>placeholder<\/code>, <code>title<\/code> \u0438\u043b\u0438 <code>aria-label<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u044d\u0442\u043e\u0442 <code>API<\/code> \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0445\u0443\u043a <code>useIntl()<\/code> \u0432 <code>Footer.js<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">import {   \/\/ ...   useIntl } from 'react-intl'<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u0432\u044b\u0432\u0435\u0434\u0435\u043c <code>useIntl()<\/code> \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u043c \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\/\/ ...  const Footer = () =&gt; {   \/\/ ...   const intl = useIntl()   console.log(intl)    \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>formatDate()<\/code>. \u041f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u0435\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\/\/ ... const Footer = () =&gt; {   \/\/ ...   const intl = useIntl()   return (     &lt;div className='container mt'&gt;       {\/* &lt;... *\/}       &lt;br \/&gt;       &lt;input placeholder={intl.formatDate(Date.now())} \/&gt;     &lt;\/div&gt;   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>locale<\/code>, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>formatDate()<\/code> \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u043c\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e &quot;\u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044e&quot;:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">&lt;input   placeholder={intl.formatDate(Date.now(), {     year: 'numeric',     month: 'long',     day: '2-digit'   })} \/&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443.<\/p>\n<p>  <\/p>\n<h2 id=\"perevod-tekstovyh-strok\">\u041f\u0435\u0440\u0435\u0432\u043e\u0434 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0441\u0442\u0440\u043e\u043a<\/h2>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>i18n<\/code> \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>src<\/code>. \u0412 \u044d\u0442\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c 2 \u0444\u0430\u0439\u043b\u0430 <code>locales.js<\/code> \u0438 <code>messages.js<\/code>. <code>locales.js<\/code> \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u043b\u043e\u043a\u0430\u0446\u0438\u0438, \u0430 <code>messages.js<\/code> \u2014 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u044b.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0444\u0430\u0439\u043b <code>i18n\/locales.js<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">export const LOCALES = {   ENGLISH: 'en-US',   RUSSIAN: 'ru-RU',   FRENCH: 'fr-FR',   GERMAN: 'de-DE',   JAPANESE: 'ja-JA' }<\/code><\/pre>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043b\u043e\u043a\u0430\u043b\u0435\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a <code>en-US<\/code> \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>[LOCALES.ENGLISH]<\/code>.<\/p>\n<p>  <\/p>\n<h2 id=\"kak-opredelyaetsya-yazyk\">\u041a\u0430\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u044f\u0437\u044b\u043a?<\/h2>\n<p>  <\/p>\n<p>\u041a\u043e\u0434 <code>en-US<\/code> \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a <code>\u044f\u0437\u044b\u043a-\u0421\u0422\u0420\u0410\u041d\u0410<\/code>, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e <a href=\"https:\/\/www.gnu.org\/savannah-checkouts\/gnu\/gettext\/manual\/gettext.html#Language-Codes\">\u044f\u0437\u044b\u043a<\/a> \u0431\u0435\u0437 <a href=\"https:\/\/www.gnu.org\/savannah-checkouts\/gnu\/gettext\/manual\/gettext.html#Country-Codes\">\u0441\u0442\u0440\u0430\u043d\u044b<\/a>.<\/p>\n<p>  <\/p>\n<h2 id=\"perevod\">\u041f\u0435\u0440\u0435\u0432\u043e\u0434<\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0444\u0430\u0439\u043b <code>i18n\/messages.js<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">import { LOCALES } from '.\/locales'  export const messages = {   [LOCALES.ENGLISH]: {     learn_to: `Hello, let's learn how to use React-Intl`,     price_display:       'How {n, number, ::currency\/USD} is displayed in your selected language',     number_display:       'This is how {n, number} is formatted in the selected locale',     start_today: 'Start Today: {d, date}',     \/\/ \u043c\u0435\u043d\u044e     about_project: 'About the project',     contact_us: 'Contact us'   },   [LOCALES.RUSSIAN]: {     learn_to: '\u041f\u0440\u0438\u0432\u0435\u0442, \u043d\u0430\u0443\u0447\u0438\u043c\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c React-Intl',     price_display:       '\u041a\u0430\u043a {n, number, ::currency\/RUB} \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435',     number_display:       '\u0412\u043e\u0442 \u043a\u0430\u043a {n, number} \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u043b\u043e\u043a\u0430\u0446\u0438\u0438',     start_today: '\u041d\u0430\u0447\u043d\u0438 \u0441\u0435\u0433\u043e\u0434\u043d\u044f: {d, date}',     \/\/ \u043c\u0435\u043d\u044e     about_project: '\u041e \u043f\u0440\u043e\u0435\u043a\u0442\u0435',     contact_us: '\u0421\u0432\u044f\u0436\u0438\u0442\u0435\u0441\u044c \u0441 \u043d\u0430\u043c\u0438'   },   [LOCALES.FRENCH]: {     learn_to: 'Bonjour, apprenons \u00e0 utiliser React-Intl',     price_display: `Comment {n, number, ::currency\/USD} $ s'affiche dans la langue s\u00e9lectionn\u00e9e`,     number_display:       'Voici comment {n, number} sont format\u00e9s dans les param\u00e8tres r\u00e9gionaux s\u00e9lectionn\u00e9s ',     start_today: `Commencez aujourd'hui: {d, date}`,     \/\/ \u043c\u0435\u043d\u044e     about_project: '\u00c0 propos du projet',     contact_us: 'Contactez-nous'   },   [LOCALES.GERMAN]: {     learn_to: 'Hallo, lass uns lernen, wie man React-Intl benutzt',     price_display:       'Wie {n, number, ::currency\/USD} in Ihrer ausgew\u00e4hlten Sprache angezeigt wird',     number_display:       'Auf diese Weise werden {n, number} im ausgew\u00e4hlten Gebietsschema formatiert',     start_today: 'Beginnen Sie heute: {d, date}',     \/\/ \u043c\u0435\u043d\u044e     about_project: '\u00dcber das Projekt',     contact_us: 'Kontaktiere uns'   },   [LOCALES.JAPANESE]: {     learn_to: '\u3053\u3093\u306b\u3061\u306f\u3001React-Intl\u306e\u4f7f\u3044\u65b9\u3092\u5b66\u3073\u307e\u3057\u3087\u3046',     price_display:       '\u9078\u629e\u3057\u305f\u8a00\u8a9e\u3067{n, number, ::currency\/USD}\u304c\u3069\u306e\u3088\u3046\u306b\u8868\u793a\u3055\u308c\u308b\u304b',     number_display:       '\u3053\u308c\u306f\u3001\u9078\u629e\u3057\u305f\u30ed\u30b1\u30fc\u30eb\u3067{n, number}\u304c\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u3055\u308c\u308b\u65b9\u6cd5\u3067\u3059\u3002',     start_today: '\u4eca\u65e5\u304b\u3089\u59cb\u3081\u308b\uff1a{d, date}',     \/\/ \u043c\u0435\u043d\u044e     about_project: '\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u3064\u3044\u3066',     contact_us: '\u304a\u554f\u3044\u5408\u308f\u305b'   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043b\u043e\u043a\u0430\u0446\u0438\u0439. \u041a\u043b\u044e\u0447\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u2014 \u044d\u0442\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u0443\u0433\u043e\u0434\u043d\u043e. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0434\u043b\u044f \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0441\u0442\u0440\u043e\u043a \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043a\u0430 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u043c\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 \u0431\u0435\u0437 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0444\u0438\u0433\u0443\u0440\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043a\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435\u043b\u044f\u043c\u0438 (placeholders).<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043f\u0440\u043e\u043f <code>message<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>IntlProvider<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0441\u0442\u0443\u043f \u043a \u043e\u0431\u044a\u0435\u043a\u0442\u0443 \u0441 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u043c \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">messages[LOCALES.ENGLISH]<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u044d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0443. \u041f\u043e\u0437\u0436\u0435 \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043b\u043e\u0433\u0438\u043a\u0443 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u043b\u043e\u043a\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <code>components\/App.js<\/code> \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c <code>LOCALES<\/code> \u0438 <code>messages<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">import { LOCALES } from '..\/i18n\/locales' import { messages } from '..\/i18n\/messages'<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c <code>IntlProvider<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\/\/ ... const App = () =&gt; {   const locale = LOCALES.ENGLISH    return (     &lt;IntlProvider       messages={messages[locale]}       locale={locale}       defaultLocale={LOCALES.ENGLISH}     &gt;       ...     &lt;\/IntlProvider&gt;   ) } \/\/ ...<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u0432 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043e\u043d\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u0441\u0443\u0431\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u043d\u0435\u0435, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>FormattedMessage<\/code> \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u0442\u0440\u043e\u043a. \u042d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0445 \u0442\u0435\u043a\u0441\u0442, \u0434\u0430\u0442\u044b, \u0447\u0438\u0441\u043b\u0430 \u0438 \u0442.\u0434.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u043e\u043a\u0438 <code>Hello, let\u2019s learn how to use React-Intl.<\/code><\/p>\n<p>  <\/p>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0444\u0430\u0439\u043b <code>components\/Content.js<\/code> \u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c <code>FormattedMessage<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">import { FormattedMessage } from 'react-intl'<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\/\/ ...  const Content = () =&gt; {   return (     &lt;div className='container hero'&gt;       &lt;h1&gt;         &lt;FormattedMessage id='learn_to' \/&gt;       &lt;\/h1&gt;       {\/* ... *\/}     &lt;\/div&gt;   ) } \/\/ ...<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>locale<\/code> \u0432 <code>App.js<\/code> \u043d\u0430 <code>ja-JA<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">const locale = LOCALES.JAPANESE<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/8t\/4j\/1g\/8t4j1gbo6macwiyztih-mkedae4.png\">  <\/p>\n<p><code>FormattedMessage<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0440\u043e\u043f <code>id<\/code>, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 \u043a\u043b\u044e\u0447\u043e\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 \u0441 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430\u043c\u0438. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>id<\/code> \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<h2 id=\"ispolzovanie-argumentov\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432<\/h2>\n<p>  <\/p>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u043c \u0434\u0430\u0442\u0443, \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u043b\u0438 \u0447\u0438\u0441\u043b\u043e, \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u043d\u0435\u0435 \u043c\u044b \u0438\u0437\u0443\u0447\u0438\u043b\u0438, \u043a\u0430\u043a \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0442\u0438\u043f\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>FormattedDate<\/code> \u0438 <code>FormattedNumber<\/code>. \u041d\u043e \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>FormattedMessage<\/code>, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0449\u0438\u0435 \u043d\u0430\u0441 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u0441\u0442\u0440\u043e\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0432 \u0444\u0430\u0439\u043b\u0435 \u0441 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430\u043c\u0438, \u043c\u044b \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u044d\u0442\u0438 \u0442\u0438\u043f\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0448\u0430\u0431\u043b\u043e\u043d\u0430 (\u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430) <code>{ key, type, format }<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">price_display:   'How {n, number, ::currency\/USD} is displayed in your selected language',<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (<code>n<\/code>) \u2014 \u044d\u0442\u043e \u043a\u043b\u044e\u0447 (<code>key<\/code>), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u0412\u0442\u043e\u0440\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (<code>type<\/code>) \u2014 \u044d\u0442\u043e \u0442\u0438\u043f \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u043b\u043e\u043a\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u0422\u0440\u0435\u0442\u0438\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 (<code>format<\/code>) \u2014 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0442\u0438\u043f\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438, \u0447\u0442\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435\u043b\u044c \u0434\u043b\u044f <code>number<\/code> \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043a\u0430\u043a \u0434\u0435\u043d\u0435\u0436\u043d\u0430\u044f \u0435\u0434\u0438\u043d\u0438\u0446\u0430 \u2014 \u0434\u043e\u043b\u043b\u0430\u0440\u044b \u0421\u0428\u0410 (<code>USD<\/code>). \u0421\u043f\u0438\u0441\u043e\u043a \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0434\u0435\u043d\u0435\u0436\u043d\u044b\u0445 \u0435\u0434\u0438\u043d\u0438\u0446 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 <a href=\"https:\/\/www.six-group.com\/dam\/download\/financial-information\/data-center\/iso-currrency\/lists\/list_one.xml\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u0441\u0442\u0440\u043e\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>FormattedMessage<\/code> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">&lt;FormattedMessage id='price_display' values={{ n: 59.99 }} \/&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0438 \u043e\u0436\u0438\u0434\u0430\u043b\u043e\u0441\u044c, <code>id<\/code> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u043b\u043e\u043a\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430, \u0430 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435\u043b\u044c \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f (\u0438\u0437\u0432\u0438\u043d\u044f\u044e\u0441\u044c \u0437\u0430 \u0442\u0430\u0432\u0442\u043e\u043b\u043e\u0433\u0438\u044e) \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c <code>key<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u044d\u0442\u0443 \u043b\u043e\u0433\u0438\u043a\u0443 \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443, \u043d\u0430\u0448 \u0444\u0430\u0439\u043b <code>components\/Content.js<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">import { FormattedMessage } from 'react-intl'  const Content = () =&gt; {   return (     &lt;div className='container hero'&gt;       &lt;h1&gt;         &lt;FormattedMessage id='learn_to' \/&gt;       &lt;\/h1&gt;       &lt;p&gt;         &lt;FormattedMessage id='price_display' values={{ n: 59.99 }} \/&gt;       &lt;\/p&gt;       &lt;p&gt;         &lt;FormattedMessage id='number_display' values={{ n: 2000 }} \/&gt;       &lt;\/p&gt;       &lt;p&gt;         &lt;FormattedMessage id='start_today' values={{ d: new Date() }} \/&gt;       &lt;\/p&gt;     &lt;\/div&gt;   ) }  export default Content<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u043c\u0435\u043d\u044f\u0435\u043c \u043b\u043e\u043a\u0430\u0446\u0438\u044e \u0432 \u0444\u0430\u0439\u043b\u0435 <code>component\/App.js<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">const locale = LOCALES.JAPANESE<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/tf\/wr\/4g\/tfwr4gjohqpv8kcg9ohgyoggc4a.png\">  <\/p>\n<h2 id=\"plyuralizaciya\">\u041f\u043b\u044e\u0440\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h2>\n<p>  <\/p>\n<p>\u0420\u0430\u043d\u0435\u0435 \u044f \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>FormattedPlural<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u043b\u044e\u0440\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u0430. \u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>FormattedMessage<\/code> \u0434\u043b\u044f \u043f\u043b\u044e\u0440\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043b\u043e\u0433\u0438\u043a\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430 \u0434\u043b\u044f \u0435\u0434\u0438\u043d\u0438\u0447\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (<code>1<\/code>) \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 (<code>count<\/code>).<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0430\u043a\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u0442\u0442\u0435\u0440\u043d, \u0441\u0445\u043e\u0436\u0438\u0439 \u0441 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u043c <code>{key, type, format}<\/code>, \u043d\u043e \u0432\u043c\u0435\u0441\u0442\u043e <code>type<\/code> \u0438 <code>format<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f <code>plural<\/code> \u0438 <code>matches<\/code>, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u044d\u0442\u043e\u0442 \u043f\u0430\u0442\u0442\u0435\u0440\u043d \u0432 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u043c \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u043e\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">click_count: 'You clicked {count, plural, one {# time} other {# times}}'<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 <code>one<\/code> \u0438 <code>other<\/code> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0435\u0434\u0438\u043d\u0438\u0447\u043d\u043e\u0439 \u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u0430\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0421\u0430\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0444\u0438\u0433\u0443\u0440\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043a\u0430\u0445 \u043f\u043e\u0441\u043b\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 <code>#<\/code>, \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0449\u0435\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c <code>id<\/code> \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u043b\u043e\u043a\u0430\u0446\u0438\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\/\/ \u0434\u043b\u044f \u0440\u0443\u0441\u0441\u043a\u043e\u0439 click_count:       '\u0412\u044b \u043a\u043b\u0438\u043a\u043d\u0443\u043b\u0438 {count, plural, one {# \u0440\u0430\u0437} other {# \u0440\u0430\u0437(\u0430)}}', \/\/ \u0434\u043b\u044f \u043d\u0435\u043c\u0435\u0446\u043a\u043e\u0439 click_count:       'Sie haben {count, plural, one {# Mal} other {# Mal}} geklickt', \/\/ \u0434\u043b\u044f \u0444\u0440\u0430\u043d\u0446\u0443\u0437\u0441\u043a\u043e\u0439 click_count:   'Vous avez cliqu\u00e9 {count, plural, one {# fois} other {# fois}}', \/\/ \u0434\u043b\u044f \u044f\u043f\u043e\u043d\u0441\u043a\u043e\u0439 click_count: '{count, plural, one {# \u56de} other {# \u56de}}\u30af\u30ea\u30c3\u30af\u3057\u307e\u3057\u305f',<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0430\u0439\u043b <code>components\/Footer.js<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\/\/ \u0434\u043e &lt;p&gt;You clicked {count} times&lt;\/p&gt;  \/\/ \u043f\u043e\u0441\u043b\u0435 &lt;p&gt;   &lt;FormattedMessage id=&quot;click_count&quot; values={{ count }} \/&gt; &lt;\/p&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>FormattedMessage<\/code> \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0444\u0430\u0439\u043b\u0430.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0435\u043d\u044e. \u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c <code>FormattedMessage<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>components\/Header.js<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">import { FormattedMessage } from &quot;react-intl'<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c <code>key<\/code> \u0444\u0430\u0439\u043b\u0430 \u0441 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430\u043c\u0438. \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 <code>menu<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">const menu = [   {     key: 'about_project'     \/\/ ...   },   {     key: 'contact_us'     \/\/ ...   } ]<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u044e\u0447\u0438 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430\u043c \u0432 <code>FormattedMessage<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0435\u0433\u043e:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\/\/ \u0434\u043e {   menu.map(({ title, path }) =&gt; (     &lt;li key={title}&gt;       &lt;a href={path}&gt;{title}&lt;\/a&gt;     &lt;\/li&gt;   )) }  \/\/ \u043f\u043e\u0441\u043b\u0435 {   menu.map(({ title, path, key }) =&gt; (     &lt;li key={title}&gt;       &lt;a href={path}&gt;         &lt;FormattedMessage id={key} \/&gt;       &lt;\/a&gt;     &lt;\/li&gt;   )) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0442\u0435\u043a\u0441\u0442\u0430, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0449\u0435\u0433\u043e \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u043d\u0435\u0435, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043a\u043b\u044e\u0447\u0438 \u0432 \u0444\u0430\u0439\u043b <code>i18n\/message.js<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\/\/ \u0434\u043b\u044f \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 click_button: 'Please click the button below', click_here: 'click here',  \/\/ \u0434\u043b\u044f \u0440\u0443\u0441\u0441\u043a\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 click_button: '\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u043d\u0438\u0436\u0435', click_here: '\u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u0437\u0434\u0435\u0441\u044c',  \/\/ \u0434\u043b\u044f \u0444\u0440\u0430\u043d\u0446\u0443\u0437\u0441\u043a\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 click_button: 'Veuillez cliquer sur le bouton ci-dessous', click_here: 'Cliquez ici',  \/\/ \u0438 \u0442.\u0434.<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c <code>components\/Footer.js<\/code> \u0438 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c <code>FormattedMessage<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">return (   &lt;div className='container mt'&gt;     {\/* \u0417\u0434\u0435\u0441\u044c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u043e\u0434\u0432\u0430\u043b\u0430 *\/}     &lt;p&gt;       &lt;FormattedMessage id='click_button' \/&gt;     &lt;\/p&gt;     &lt;button onClick={onChange}&gt;       &lt;FormattedMessage id='click_here' \/&gt;     &lt;\/button&gt;     {\/* ... *\/}   &lt;\/div&gt; )<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u0435\u043d\u044f\u0435\u043c \u043b\u043e\u043a\u0430\u0446\u0438\u044e \u0432 <code>App.js<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 \u0444\u0440\u0430\u043d\u0446\u0443\u0437\u0441\u043a\u0443\u044e, \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/po\/vk\/g0\/povkg0hweqkuaoks4dykmi-mrv0.png\">  <\/p>\n<h2 id=\"dobavlenie-vozmozhnosti-vybora-yazyka\">\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u044b\u0431\u043e\u0440\u0430 \u044f\u0437\u044b\u043a\u0430<\/h2>\n<p>  <\/p>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0444\u0430\u0439\u043b <code>components\/Header.js<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e <code>return<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">const languages = [   { name: 'English', code: LOCALES.ENGLISH },   { name: '\u0420\u0443\u0441\u0441\u043a\u0438\u0439', code: LOCALES.RUSSIAN },   { name: '\u65e5\u672c\u8a9e', code: LOCALES.JAPANESE },   { name: 'Fran\u00e7ais', code: LOCALES.FRENCH },   { name: 'Deutsche', code: LOCALES.GERMAN } ]<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>LOCALES<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">import { LOCALES } from '..\/i18n\/locales'<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 <code>languages<\/code> \u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">&lt;div className='switcher'&gt;   {\/* \u0412\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u044f\u0437\u044b\u043a\u0430 *\/}   Languages &lt;select&gt;     {languages.map(({ name, code }) =&gt; (       &lt;option key={code} value={code}&gt;         {name}       &lt;\/option&gt;     ))}   &lt;\/select&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0430\u0440\u043e\u0447\u043a\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 <code>src\/index.css<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.switcher select {   width: 99px;   height: 30px; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a, \u043d\u043e \u0432\u044b\u0431\u043e\u0440 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u043d\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043c.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>select<\/code> \u0443\u043f\u0430\u0440\u0432\u043b\u044f\u0435\u043c\u044b\u043c, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a \u043d\u0435\u043c\u0443 \u043f\u0440\u043e\u043f\u044b <code>value<\/code> \u0438 <code>onChange<\/code>. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u043f\u0430 <code>value<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u043b\u043e\u043a\u0430\u0446\u0438\u044f, \u0430 <code>onChange<\/code> \u2014 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043b\u043e\u043a\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 <code>IntlProvider<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, <code>App.js<\/code> \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u043d\u0430\u0442\u044c \u043e \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043b\u043e\u043a\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Header<\/code> \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u043f\u044b. \u0414\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f &quot;\u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435\u0439 \u043f\u0440\u043e\u043f\u043e\u0432&quot; (prop drilling).<\/p>\n<p>  <\/p>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c <code>components\/App.js<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043d\u0435\u0433\u043e \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">const locale = LOCALES.ENGLISH  const [currentLocale, setCurrentLocale] = useState(locale)<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0445\u0443\u043a <code>useState()<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u043b\u043e\u043a\u0430\u0446\u0438\u044e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Header<\/code> \u0434\u043b\u044f \u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 <code>select<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">&lt;Header currentLocale={currentLocale} \/&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0434\u0435\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u043e\u043f\u044b \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 <code>Header<\/code> \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f <code>select<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">const Header = ({ currentLocale }) =&gt; {   \/\/ ...    return (     {\/* ... *\/}     &lt;select onChange=&quot;&quot; value={currentLocale}&gt;       {\/* ... *\/}     &lt;\/select&gt;   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432\u044b\u0431\u043e\u0440\u0430 \u044f\u0437\u044b\u043a\u0430 \u0432 <code>App.js<\/code> \u0438 \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0435\u0433\u043e \u0432 <code>Header<\/code> \u0432 \u0432\u0438\u0434\u0435 \u043f\u0440\u043e\u043f\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\/\/ ... const App = () =&gt; {   \/\/ ...    const hangeChange = ({ target: { value } }) =&gt; {     setCurrentLocale(value)   }    return (     {\/* ... *\/}     &lt;div&gt;         &lt;Header currentLocale={currentLocale} handleChange={handleChange} \/&gt;         {\/* ... *\/}     &lt;\/div&gt;   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0441\u043d\u043e\u0432\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u0432 <code>Header<\/code>, \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438\u0437 \u043f\u0440\u043e\u043f\u043e\u0432 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0435\u0433\u043e \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u044b\u0431\u043e\u0440\u0430 \u044f\u0437\u044b\u043a\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">const Header = ({ currentLocale, handleChange }) =&gt; {   \/\/ ...    return (     {\/* ... *\/}     &lt;select onChange={handleChange} value={currentLocale}&gt;       {\/* ... *\/}     &lt;\/select&gt;   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041a\u0440\u0443\u0442\u043e!<\/p>\n<p>  <\/p>\n<p>\u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u043a\u043b\u044e\u0447 \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0430 <code>Languages<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 \u0441 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<h2 id=\"sohranenie-vybrannogo-yazyka-v-lokalnom-hranilische-brauzera\">\u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/h2>\n<p>  <\/p>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u0435\u0441\u043b\u0438 \u043c\u044b \u0432\u044b\u0431\u0435\u0440\u0435\u043c \u0434\u0440\u0443\u0433\u0443\u044e \u043b\u043e\u043a\u0430\u0446\u0438\u044e \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043b\u043e\u043a\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u0431\u0440\u043e\u0448\u0435\u043d\u0430 \u043a \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0439. \u0418\u0437\u043c\u0435\u043d\u0438\u043c \u044d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u042d\u0442\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0430\u0448\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c.<\/p>\n<p>  <\/p>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0444\u0430\u0439\u043b <code>App.js<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e <code>return<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">function getInitialLocale() {   \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435   const savedLocale = localStorage.getItem('locale')   return savedLocale || LOCALES.ENGLISH }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043b\u043e\u0433\u0438\u043a\u0443 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043b\u043e\u043a\u0430\u0446\u0438\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">const [currentLocale, setCurrentLocale] = useState(getInitialLocale())<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u0434 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0432\u044b\u0431\u043e\u0440\u0430 \u044f\u0437\u044b\u043a\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">const handleChange = ({ target: { value } }) =&gt; {   setCurrentLocale(value)   \/\/ \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043b\u043e\u043a\u0430\u0446\u0438\u044e \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435   localStorage.setItem('locale', value) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c. \u043f\u0435\u0440.: \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b <code>JSON.stringify()<\/code> \u043f\u0440\u0438 \u0437\u0430\u043f\u0438\u0441\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 <code>JSON.parse()<\/code> \u043f\u0440\u0438 \u0438\u0445 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0438, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 <code>localStorage<\/code> \u0443\u043c\u0435\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u044d\u0442\u043e \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043b\u043e\u043a\u0430\u0446\u0438\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u043a\u0430, \u043d\u043e \u043f\u0440\u0438 \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d \u0432 <code>[object Object]<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 <code>toString()<\/code> \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d \u0432 \u0442\u0430\u043a\u043e\u043c \u0432\u0438\u0434\u0435, \u0442\u0430\u043a \u0447\u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u0432\u0437\u044f\u0442\u044c \u0437\u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u044f\u0437\u043a\u0443 <code>localStorage.setItem(key, JSON.stringify(value))<\/code> \u0438 <code>JSON.parse(localStorage.getItem(key))<\/code> \u0434\u043b\u044f \u0437\u0430\u043f\u0438\u0441\u0438\/\u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u043c\u043e\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">const locale = LOCALES.ENGLISH<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043d\u0443\u044e \u043b\u043e\u043a\u0430\u0446\u0438\u044e \u0438\u0437 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0435\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043b\u043e\u043a\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u043b\u043e\u043a\u0430\u0446\u0438\u044f \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c), \u0442\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043b\u043e\u043a\u0430\u0446\u0438\u0435\u0439 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f <code>LOCALES.ENGLISH<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u043b\u043e\u043a\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435.<\/p>\n<p>  <\/p>\n<h2 id=\"zaklyuchenie\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0435, \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 <code>React Intl<\/code>. \u041c\u044b \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u043b\u043e\u043a\u0430\u0446\u0438\u0438 \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0441\u0442\u0430\u0442\u044c\u044f \u0432\u0430\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0430\u0441\u044c. \u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f <a href=\"https:\/\/github.com\/Ibaslogic\/i18n_react_intl_project\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  <\/p>\n<hr>\n<p>  <\/p>\n<p><a href=\"https:\/\/macloud.ru\/vps-vds\">\u041a\u0443\u043f\u0438\u0442\u044c VDS-\u0441\u0435\u0440\u0432\u0435\u0440<\/a> \u0441 \u0431\u044b\u0441\u0442\u0440\u044b\u043c\u0438 NVM\u0435-\u0434\u0438\u0441\u043a\u0430\u043c\u0438 \u0438 \u043f\u043e\u0441\u0443\u0442\u043e\u0447\u043d\u043e\u0439 \u043e\u043f\u043b\u0430\u0442\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u0443 \u041c\u0430\u043a\u043b\u0430\u0443\u0434.<\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/macloud.ru\/vps-vds&amp;utm_source=habr&amp;utm_medium=perevod&amp;utm_campaign=igor\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/gj\/zs\/hm\/gjzshmojh-bmnbzvfsre9se1eta.png\"><\/a><\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/macloud\/blog\/564824\/\"> https:\/\/habr.com\/ru\/company\/macloud\/blog\/564824\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/_m\/ye\/tj\/_myetj0pmttcnrbqgpiwd0gzmdo.png\">  <\/p>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 <code>React Intl<\/code> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430 \u0442\u0435\u043a\u0441\u0442\u0430 \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u044f\u0437\u044b\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c &quot;\u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0435&quot; \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u043d\u0442\u0435\u0440\u043d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u043c \u043d\u0430 <code>React<\/code>. \u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u044f\u0437\u044b\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0432\u0438\u0437\u0438\u0442\u0430\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-325560","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/325560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=325560"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/325560\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=325560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=325560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=325560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}