🌟 Создание Typing Test приложения на React + TypeScript + Redux Toolkit 🟡Задачи: 1. У пользователей должна быть возможность выбирать количество предложений 2. Текст необходимо получать из внешнего API; 3. Применение соответствующих стилей для правильного и неправильного символа; 4. Подсветка текущего символа; 5. Приложение должно вычислять и отображать скорость и точность печати текста пользователем; 6. Пользователи должны иметь возможность перезапустить текущий тест. Настройка проекта • Создадим React проект с TypeScript шаблоном, выполнив в терминале следующую команду: npx create-react-app typing-test-app --template typescript. • После завершения установки, перейдем в директорию проекта, установим axios (npm install axios) и Redux Toolkit (npm install @reduxjs/toolkit react-redux). • Удалим все файлы, которые нам не пригодятся (оставим index.tsx, App.tsx, index.css, react-app-env.d.ts). • Создадим папки api, assets, components, helpers, redux, types и style. Файл index.css переместим в папку style. • Отредактируем оставшиеся файлы. 🟢 Файл index.tsx: import React from 'react'; import ReactDOM from 'react-dom/client'; import './style/index.css'; import App from './App'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( <React.StrictMode> <App /> </React.StrictMode> ); 🟢 Файл App.tsx: import { FunctionComponent } from 'react'; const App:FunctionComponent = () => { return ( <> </> ); }; export default App; Приложение мы пишем на TypeScript, поэтому для функциональных компонентов желательно указывать тип FunctionComponent, который мы импортируем из React. ✔️ Продолжение @javascript_react