add i18n

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-intl": "^10.1.13"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
@@ -22,7 +23,6 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
-    "sass-embedded": "^1.99.0",
     "vite": "^6.3.5"
   }
 }

src/App.css

@@ -1,15 +0,0 @@
-.container {
-/*    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;*/
-    height: 500px;
-    overflow: auto;
-    border: 1px solid black;
-}
-.item {
-    font-size: 16pt;
-    border: 1px dotted gray;
-    /*margin: 5px 10px;
-    padding: 10px;*/
-    border-radius: 5px;
-}

src/App.jsx

@@ -1,51 +1,30 @@
-import { useEffect, useRef, useState } from 'react';
+import { IntlProvider,
-import styles from './App.module.scss';
+        FormattedMessage,
-
+        FormattedNumber,
-const InfiniteList = () => {
+        FormattedDate,
-  const [items, setItems] = useState([...Array(20).keys()]); // Initial data
+        FormattedTime,
-  const loaderRef = useRef(null);
+        FormattedDateTimeRange } from 'react-intl'
-
+import messageRu from './translations/ru.json'
-  const loadMore = () => {
+import messageEn from './translations/en.json'
-    setItems((prev) => [...prev, ...Array(10).keys()].map((_, i) => prev.length + i));
-  };
-
-  useEffect(() => {
-    const observer = new IntersectionObserver((entries) => {
-      if (entries[0].isIntersecting) {
-        loadMore(); // Load next batch when the loader is seen
-      }
-    });
-
-    if (loaderRef.current) observer.observe(loaderRef.current);
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <ul>
-      {items.map(item => <li key={item} className={ styles.item }>Item {item}</li>)}
-      <div ref={loaderRef}>Loading more...</div>
-    </ul>
-  );
-};
 
 function App() {
-    const generatedBigDataSet = () => {
+    const locale = 'ru';
-        return Array.from({ length: 100 }, (_, index) => ({
+    const messages = messageEn;
-            id: index,
-            name: `Элемент № ${index}`,
-            value: Math.floor(Math.random() * 1000)
-        }))
-    }
-    const [data] = useState(generatedBigDataSet);
     
 	return (
 		<>
-            <div>
+            <IntlProvider locale={locale} messages={messages}>
-                <h2>Визуализация большого списка</h2>
+			    <h1><FormattedMessage id='app.welcome' /></h1>
-                <div className={ styles.container }>
+                <h2><FormattedMessage id='app.userGreeting' values={{ name: <u>Alex</u> }} /></h2>
-                <InfiniteList />
+                <p><FormattedMessage id='app.notifications' values= {{count: 25}} /></p>
-                </div>
+                <p><FormattedMessage id='app.lastLogin' values={{ date: new Date(), time: new Date()}} /></p>
-            </div>
+                <p><FormattedNumber value={ 999.99 } style='currency' currency='RUB' /></p>
+                <p><FormattedNumber value={0.56} style='percent' /></p>
+                <p><FormattedNumber value={1234.567} minimumFractionDigits={2} maximumFractionDigits={2} /></p>
+                <p><FormattedDate value={new Date()} weekday='long' /></p>
+                <p><FormattedTime value={new Date()} hour='2-digit' minute='2-digit' second='2-digit' /></p>
+                <p><FormattedDateTimeRange from={new Date(2026,6,1,10,0)} to={new Date(2026,6,10,9,0)} /></p>
+            </IntlProvider>
 		</>
 	)
 }

src/translations/en.json

@@ -0,0 +1,6 @@
+{
+    "app.welcome": "welcome to React application",
+    "app.userGreeting": "Hello, {name}",
+    "app.notifications": "You have {count, plural, one {# a notification} few {# are notifications} many {# уведомлений} other {# уведомления}}",
+    "app.lastLogin": "Last login was {date,date,long} in {time,time,short}"
+}

src/translations/ru.json

@@ -0,0 +1,6 @@
+{
+    "app.welcome": "добро пожаловать в приложение React",
+    "app.userGreeting": "Здравствуйте, {name}",
+    "app.notifications": "У вас {count, plural, one {# уведомление} few {# уведомления} many {# уведомлений} other {# уведомления}}",
+    "app.lastLogin": "Последний вход был {date,date,long} в {time,time,short}"
+}