Лаб3
.docxМинистерство цифрового развития, связи и массовых коммуникаций РФ
ордена Трудового Красного Знамени федеральное государственное
бюджетное образовательное учреждение высшего образования
«МОСКОВСКИЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ СВЯЗИ И
ИНФОРМАТИКИ»
Кафедра «МКиИТ»
Лабораторная № 3
по дисциплине «Разработка кроссплатформенного программного обеспечения»
Создание To-Do листа
Выполнил:
студент группы БФИ2203
Мячина Л. А.
Проверил:
Потапченко Т. Д.
Москва, 2024 г.
Цель работы:
Изучить основные принципы разработки React-приложений с использованием инструментов Vite и Yarn через создание простого To-Do листа. В ходе работы студенты познакомятся с архитектурой Reactкомпонентов, обработкой состояний (state), взаимодействием с пользователем через события.
Требования к работе:
1. Добавьте возможность удаления задач. Для этого вам нужно реализовать функционал удаления задачи. Каждая задача должна иметь кнопку удаления, при нажатии на которую она удаляется из списка.
2. Реализуйте фильтрацию задач по состоянию (выполненные/ невыполненные). Добавьте функционал фильтрации, который позволит отображать все задачи, только выполненные или только невыполненные. Для этого можно добавить кнопки или выпадающий список, которые будут переключать отображение списка задач.
3. Стилизация приложения. Добавьте базовые стили для улучшения внешнего вида To-Do листа. Вы можете использовать обычный CSS, а также любую библиотеку стилей (например, TailwindCSS).
Выполнение работы:
Листинг кода
import React from 'react';
import { BrowserRouter as Router, HashRouter, Route, Routes } from 'react-router-dom';
import TodoPage from './pages/TodoPage';
import DndPage from './pages/DndPage';
function App() {
return (
<HashRouter>
<Routes>
<Route path='/' element={<TodoPage/>}/>
<Route path='/dnd' element={<DndPage/>}/>
</Routes>
</HashRouter>
)
}
export default App;
import React, {useState, useEffect} from "react";
import TodoList from '../components/TodoList';
import '../index.css'
function TodoPage() {
const [todos, setTodos] = useState([
{ id: 1, title: 'Buy groceries', completed: false },
{ id: 2, title: 'Read a book', completed: false },
]);
const [filter, setFilter] = useState('all');
const [filteredTodos, setFilteredTodos] = useState(todos);
const [newTodo, setNewTodo] = useState('');
const toogleTodo = (id) => {
setTodos(
todos.map((todo) => todo.id === id ? {...todo, completed: !todo.completed} : todo)
);
};
const deleteTodo = (id) => {
const new_todos = todos.filter((todo) => todo.id !== id);
setTodos(new_todos);
}
useEffect(() => {
const filteredTodos = todos.filter((todo) => {
if (filter === 'all') {
return true;
} else if (filter === 'completed') {
return todo.completed;
} else {
return !todo.completed;
}
});
// Обновляем список задач
setFilteredTodos(filteredTodos);
}, [filter, todos]);
const addTodo = (e) => {
e.preventDefault();
if (!newTodo) return;
const newTodoItem = {
id: Date.now(),
title: newTodo,
completed: false
};
setTodos([...todos, newTodoItem]);
setNewTodo('');
};
return (
<div className="app-container">
<h1>Мои задачи</h1>
<form onSubmit={addTodo}>
<input
type="text"
value={newTodo}
onChange={(e) => setNewTodo(e.target.value)}
placeholder="Add new task..."/>
<button type="submit">Add</button>
</form>
<div>
<button onClick={() => setFilter('all')}>Все</button>
<button onClick={() => setFilter('completed')}>Завершенные</button>
<button onClick={() => setFilter('uncompleted')}>Незавершенные</button>
</div>
<TodoList todos={filteredTodos} toggleTodo={toogleTodo} deleteTodo={deleteTodo}/>
</div>
);
}
export default TodoPage;
<button
style={{
position: 'absolute',
top: '5px',
right: '5px',
}}
onClick={() => nav('/dnd')}
>
Dnd
</button>
Результат работы
Рисунок 1 – Результат работы
Вывод
С помощью полученных знаний, мы смогли изучить основные принципы разработки React-приложений с использованием инструментов Vite и Yarn через создание простого To-Do листа. Познакомились с архитектурой React-компонентов, обработкой состояний (state), взаимодействием с пользователем через события.