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

#курсы Новый курс: Основы React, React Router и Redux Toolkit Вышел мой 13-й курс! В этом курсе мы изучим React, Redux Toolkit и React Router, написав 2 полноценных приложения. Этот курс подойдёт тем, кто только начинает свой путь во frontend разработку и готов начать работать со свои первым Frontend фреймворком. От вас требуется знание HTML и CSS, так как мы будем с нуля верстать наши проекты и конечно же JavaScript. Начальное знание TypeScript будет плюсом, так как второе приложение мы уже будет переводить на TypeScript. Курс будет максимально практическим, ведь всю теорию мы разбираем прямо во время создания наших проектов применяя полученные знания на практике. Мы не используем банальные ToDo приложения, а работаем с реальными API и приближенными к реальности проектами. Так же для курса было сделано большое число упражнений, которые позволят вас закрепить полученные знания, дорабатывая созданные в курсе проекты. После прохождения курса вы сможете: - Знать как работет React под капотом - Использовать React Hooks - Писать свои хуки - Работать с контекстом - Использовать React с TypeScript - Делать запросы к API - Обрабатывать загрузки и ошибки - Работать с Redux Toolkit - Использовать React Router - Работать с asyncThunk (15 часов лекций, 15 упражнений, 13 тестов) Курс по всему миру можно приобрести по ссылке: hpurpleschool.ru/...dux