🌟 Создание 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.

✔️ Продолжение

@react_tg