🚀 Веб-разработка с нуля: Урок 23 — Переходим на TypeScript

Привет, разработчики! 👨💻👩💻
Сегодня сделаем важный шаг в профессиональной разработке — переведём наш To-Do List на TypeScript!

### 🔥 Зачем TypeScript?
✅ Чёткая типизация — меньше ошибок
✅ Лучшая поддержка кода
✅ Удобный рефакторинг
✅ Популярен в крупных проектах

### 🛠 Настройка TypeScript
1. Устанавливаем зависимости:

npm install typescript @types/node --save-dev

2. Инициализируем конфиг:

npx tsc --init

3. Настраиваем tsconfig.json:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

### 💡 Переписываем код на TypeScript
1. Раньше (JavaScript):

function addTask(text) {
  tasks.push({ text, completed: false });
}

2. Теперь (TypeScript):

interface Task {
  text: string;
  completed: boolean;
  id?: number;
}

const tasks: Task[] = [];

function addTask(text: string): void {
  tasks.push({ text, completed: false });
}

### 🚀 Преимущества TypeScript в нашем проекте
🔹 Автодополнение в IDE (VSCode, WebStorm)
🔹 Ошибки на этапе компиляции, а не в браузере
🔹 Читаемость кода — сразу видно, какие данные ожидаются

### 📌 Практическое задание
1. Переведите на TypeScript хотя бы один модуль (например, task-manager.ts)
2. Убедитесь, что сборка работает:

npx tsc

### 👉 Что дальше?
В следующем уроке подключим React и сделаем наш To-Do List ещё круче!

💬 Пишите в комментариях — как вам TypeScript?

Подписывайтесь: [t.me/rm_programmer](https://t.me/rm_programmer)

#TypeScript #ВебРазработка #Программирование #УрокиTS

🚀 Веб-разработка с нуля: Урок 24 — Подключаем React к проекту

Привет, разработчики! 👨💻👩💻
Сегодня совершим революцию в нашем To-Do List — переведём его на React + TypeScript!

### 🌟 Почему React?
• Компонентный подход
• Виртуальный DOM для производительности
• Огромное сообщество и экосистема

### 🛠 Настройка проекта за 3 шага

1️⃣ Создаем React-приложение с TypeScript:

npx create-react-app todo-react --template typescript
cd todo-react

2️⃣ Переносим логику:
Создаем src/components/TaskList.tsx:

interface Task {
  id: number;
  text: string;
  completed: boolean;
}

export const TaskList = () => {
  const [tasks, setTasks] = useState<Task[]>([]);
  
  const addTask = (text: string) => {
    setTasks([...tasks, { id: Date.now(), text, completed: false }]);
  };

  return (
    <div className="task-manager">
      <TaskInput onAdd={addTask} />
      <ul className="task-list">
        {tasks.map(task => (
          <TaskItem key={task.id} task={task} />
        ))}
      </ul>
    </div>
  );
};

3️⃣ Запускаем проект:

npm start

### 🔥 Что изменилось в архитектуре?
| Было (Vanilla JS) | Стало (React) |
|-----------------------|-------------------------|
| Ручное управление DOM | Декларативный рендеринг |
| Глобальные переменные | Локальный стейт |
| Один большой файл | Компонентная система |

### 💡 5 преимуществ нового подхода
1. Переиспользуемые компоненты (TaskItem, TaskInput)
2. Предиктивный рендеринг — только измененные части
3. Простая интеграция с Firebase (хуки useEffect)
4. Готовые UI-библиотеки (Material UI, Ant Design)
5. Лёгкий переход на React Native для мобилок

### 🚀 Практическое задание
1. Реализуйте компонент TaskInput с формой добавления
2. Добавьте переключение статуса задачи
3. Подключите Firebase (используйте useEffect)

👉 В следующем уроке:
Подключим Redux для управления состоянием!

💬 Пишите в комментариях — какие компоненты уже сделали?

Подписывайтесь: [t.me/rm_programmer](https://t.me/rm_programmer)

#React #TypeScript #Фронтенд #ВебРазработка

🚀 Веб-разработка с нуля: Урок 25 — State-менеджмент с Redux Toolkit

Привет, React-разработчики! 👨💻👩💻
Сегодня выведем управление состоянием на профессиональный уровень — внедрим Redux Toolkit в наше To-Do приложение!

### 🔥 Зачем Redux Toolkit?
- Упрощенная настройка хранилища
- Встроенная иммутабельность
- DevTools для отладки
- Оптимизированные перерисовки

### 🛠 Настройка за 4 шага

1️⃣ Устанавливаем зависимости:

npm install @reduxjs/toolkit react-redux

2️⃣ Создаем слайс задач (features/tasks/tasksSlice.ts):

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface Task {
  id: string;
  text: string;
  completed: boolean;
}

const initialState: Task[] = [];

export const tasksSlice = createSlice({
  name: 'tasks',
  initialState,
  reducers: {
    addTask: (state, action: PayloadAction<string>) => {
      state.push({
        id: Date.now().toString(),
        text: action.payload,
        completed: false
      });
    },
    toggleTask: (state, action: PayloadAction<string>) => {
      const task = state.find(t => t.id === action.payload);
      if (task) task.completed = !task.completed;
    }
  }
});

export const { addTask, toggleTask } = tasksSlice.actions;
export default tasksSlice.reducer;

3️⃣ Настраиваем хранилище (app/store.ts):

import { configureStore } from '@reduxjs/toolkit';
import tasksReducer from '../features/tasks/tasksSlice';

export const store = configureStore({
  reducer: {
    tasks: tasksReducer
  }
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

4️⃣ Подключаем к React (main.tsx):

import { Provider } from 'react-redux';
import { store } from './app/store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

### 💡 Используем в компонентах

import { useAppDispatch, useAppSelector } from '../app/hooks';
import { addTask, toggleTask } from './tasksSlice';

export const TaskList = () => {
  const tasks = useAppSelector(state => state.tasks);
  const dispatch = useAppDispatch();
  
  const handleAdd = (text: string) => dispatch(addTask(text));
  const handleToggle = (id: string) => dispatch(toggleTask(id));
  
  return (
    /* JSX с использованием tasks и handlers */
  );
};

### 🚀 Что это даёт?
- Централизованное управление состоянием
- Предсказуемость изменений
- Лёгкую масштабируемость
- Возможность time-travel дебаггинга

### 📌 Практическое задание
1. Реализуйте удаление задач
2. Добавьте фильтрацию (все/активные/выполненные)
3. Подключите сохранение в localStorage

👉 В следующем уроке:
Асинхронные действия с Redux Thunk!

💬 Какие state-менеджеры пробовали до этого?

Подписывайтесь: [t.me/rm_programmer](https://t.me/rm_programmer)
#Redux #React #TypeScript #ВебРазработка