Создайте простое приложение для списка дел с помощью React

Создайте простое приложение для списка дел с помощью React
Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

Изучение новой технологии, такой как React, может сбивать с толку без практического опыта. Для разработчика создание реальных проектов — один из самых эффективных способов понять концепции и функции.





МУО видео дня ПРОКРУТИТЕ, ЧТОБЫ ПРОДОЛЖИТЬ СОДЕРЖАНИЕ

Следуйте процессу создания простого списка дел с помощью React и улучшите свое понимание основ React.



Предпосылки для создания списка дел

Прежде чем приступить к этому проекту, необходимо выполнить несколько требований. Вам необходимо иметь базовое понимание следующих элементов: HTML, CSS, JavaScript, ES6 и Реакт. Вам нужно иметь Node.js и npm, менеджер пакетов JavaScript . Вам также понадобится редактор кода, например Visual Studio Code.





что делать со старыми мониторами

Вот CSS, который будет использовать этот проект:

 /* styles.css */ 
.App { 
  font-family: sans-serif; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh; 
} 
 
.Todo { 
  background-color: wheat; 
  text-align: center; 
  width: 50%; 
  padding: 20px; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
  margin: auto; 
} 
 
ul { 
  list-style-type: none; 
  padding: 10px; 
  margin: 0; 
} 
 
button { 
  width: 70px; 
  height: 35px; 
  background-color: sandybrown; 
  border: none; 
  font-size: 15px; 
  font-weight: 800; 
  border-radius: 4px; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
} 
 
.input { 
  border: none; 
  width: 340px; 
  height: 35px; 
  border-radius: 9px; 
  text-align: center; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
} 
 
.Top { 
  display: flex; 
  justify-content: center; 
  gap: 12px; 
} 
 
li { 
  display: flex; 
  justify-content: space-evenly; 
  align-items: center; 
  padding: 10px; 
} 
 
li:before { 
  content: "*"; 
  margin-right: 5px; 
}

1. Настройка среды проекта

Этот этап включает в себя все команды и файлы, необходимые для настройки проекта. Для начала создайте новый проект React. Откройте терминал и выполните эту команду:



 npx create-react-app todo-list

Установка всех необходимых файлов и пакетов занимает несколько минут. Он создает новое приложение React с именем todo-list. Как только вы увидите что-то подобное, вы на правильном пути:

Список команд для запуска внутри каталога.

Перейдите в каталог только что созданного проекта с помощью этой команды:



 cd todo-list

Запустите свой проект локально с помощью этой команды:

 npm start

А затем просмотрите проект в своем браузере по адресу http://localhost:3000/.



В папке src вашего проекта есть пара файлов, которые вам не нужны. Удалите эти файлы: App.css , Приложение.test.js , logo.svg , отчетWebVitals.js , setupTests.js .

Файлы в папке src приложения React.

Обязательно ищите операторы импорта в доступных файлах и удаляйте все ссылки на удаленные файлы.

2. Создайте компонент TodoList

Это компонент, в котором мы будем реализовывать все коды, необходимые для списка дел. Создайте файл с именем «TodoList.js» в папке src. Затем, чтобы проверить, что все работает как надо, добавьте следующий код:

 import React from 'react'; 
 
const TodoList = () => { 
    return ( 
        <div> 
            <h2>Hello World </h2> 
        </div> 
    ); 
}; 
 
export default TodoList;  
 

Откройте файл App.js, импортируйте компонент TodoList и визуализируйте его внутри компонента App. Это будет выглядеть примерно так:

 import React from 'react'; 
import './styles.css' 
import TodoList from './TodoList'; 
 
const App = () => { 
    return ( 
        <div> 
            <TodoList /> 
        </div> 
    ); 
}; 
 
export default App;

Перейдите в свой локальный браузер с запущенным localhost: 3000 и убедитесь, что написано жирным шрифтом «Hello World». Все хорошо? К следующему шагу.

3. Обработка ввода и изменения ввода

Этот шаг позволяет инициировать событие при вводе задачи в поле ввода. Импортируйте хук useState из вашего пакета React. useState — это хук React, который позволяет вам эффективно управлять состоянием .

фильмы, чтобы заснуть на netflix 
 import React, { useState } from 'react';

Используйте хук useState для создания переменной состояния с именем «inputTask» с начальным значением пустой строки. Кроме того, назначьте функцию «setInputTask» для обновления значения «inputTask» на основе пользовательского ввода.

 const [inputTask, setInputTask] = useState("");

Создайте функцию с именем «handleInputChange», принимая параметр события. Он должен обновить состояние inputTask с помощью функции setInputTask. Получите доступ к значению цели события с помощью event.target.value. Это будет выполняться всякий раз, когда значение поля ввода изменяется.

 const handleInputChange = (event) => { 
    setInputTask(event.target.value); 
};

Верните пару элементов JSX. Первый — это заголовок, который гласит «Мой список дел», вы можете выбрать любой заголовок, который вам нравится. Включите пару атрибутов в ваши элементы ввода. тип = «текст» : это указывает ваш тип ввода как текст, значение = {inputTask} : это связывает значение поля ввода с переменной состояния inputTask, гарантируя, что оно отражает текущее значение. onChange={handleInputChange} : вызывает функцию handleInputChange при изменении значения поля ввода, обновляя состояние inputTask.

 <div className="Todo"> 
    <h1>My To-Do List</h1> 
    <div className="Top"> 
        <input className="input" type="text" value={inputTask} 
           onChange={handleInputChange} placeholder="Enter a task" />

Двигаясь дальше, создайте кнопку, которая добавит введенную задачу в список.

         <button className="btn">ADD</button> 
   </div> 
</div>

На этом этапе так будет выглядеть вывод вашего браузера.

Пустой список дел.

4. Добавьте функциональность кнопке «ДОБАВИТЬ»

Использовать использование состояния ловушка для создания переменной состояния с именем «список» с начальным значением пустого массива. Переменная setList хранит массив задач на основе пользовательского ввода.

 const [list, setList] = useState([]);

Создайте функцию handleAddTodo, которая будет запускаться, когда пользователь нажимает кнопку «ДОБАВИТЬ», чтобы добавить новую задачу. Он принимает параметр todo, который представляет новую задачу, введенную пользователем. Затем создайте объект newTask с уникальным идентификатором, сгенерированным с помощью Math.random(), и свойством todo, которое содержит входной текст.

Двигаясь дальше, обновите состояние списка, используя оператор распространения […list], чтобы создать новый массив с существующими задачами в списке. Добавьте newTask в конец массива. Это гарантирует, что мы не изменим исходный массив состояний. Наконец, сбросьте состояние inputTask до пустой строки, очищая поле ввода, когда пользователь нажимает кнопку.

Д17DE9219667D8CA04C8212010F69CFA8C205EB3

Включить onClick атрибут элемента кнопки с текстом «ДОБАВИТЬ». При нажатии на нее вызывается функция handleAddTodo, которая добавляет новую задачу в состояние списка.

 <button onClick={() => handleAddTodo(inputTask)}>ADD</button>

На этом этапе вывод вашего браузера будет выглядеть так же, но если вы нажмете кнопку «ДОБАВИТЬ» после ввода задачи, поле ввода будет пустым. Если все работает нормально, переходим к следующему шагу.

5. Добавьте кнопку «Удалить»

Это последний шаг, позволяющий пользователям удалить свою задачу, если они допустили ошибку или выполнили задачу. Создайте функцию handleDeleteTodo, которая действует как обработчик событий, когда пользователь нажимает кнопку «Удалить» для определенной задачи. В качестве параметра принимает идентификатор задачи.

Внутри функции используйте метод filter для массива списка, чтобы создать новый массив newList, исключающий задачу с совпадающим идентификатором. Метод filter выполняет итерацию по каждому элементу в массиве списка и возвращает новый массив, содержащий только элементы, удовлетворяющие заданному условию. В этом случае проверьте, равен ли идентификатор каждой задачи идентификатору, переданному в качестве параметра. Обновите состояние списка, вызвав setList(newList), который устанавливает состояние в новый отфильтрованный массив, эффективно удаляя задачу с совпадающим идентификатором из списка.

 const handleDeleteTodo = (id) => { 
    const newList = list.filter((todo) =>  
        todo.id !== id 
   ); 
 
    setList(newList);  
};

Используйте метод карты для перебора каждого элемента в массиве списка и возврата нового массива. Затем создайте элемент

  • для представления задачи для каждого объекта todo в массиве списка. Обязательно добавьте ключевой атрибут при рендеринге списка элементов в React. Это помогает React однозначно идентифицировать каждый элемент списка и эффективно обновлять пользовательский интерфейс при его изменении. В этом случае установите ключ на идентификатор каждого объекта todo, чтобы обеспечить уникальность.

    Получите доступ к свойству todo каждого объекта todo. наконец, создайте кнопку, которая при нажатии запускает функцию handleDeleteTodo с идентификатором соответствующей задачи в качестве параметра, что позволяет нам удалить задачу из списка.

     <ul> 
    { list.map((todo) => ( 
       <li className="task" key={todo.id}> 
            {todo.todo} 
            <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button> 
        </li> 
    ))} 
    </ul>

    Вот как должен выглядеть ваш окончательный код:

     import React, { useState } from 'react'; 
     
    const TodoList = () => { 
        const [inputTask, setInputTask] = useState(''); 
        const [list, setList] = useState([]); 
     
        const handleAddTodo = () => { 
            const newTask = { 
                id: Math.random(), 
                todo: inputTask 
            }; 
     
           setList([...list, newTask]); 
            setInputTask(''); 
        }; 
     
       const handleDeleteTodo = (id) => { 
            const newList = list.filter((todo) => todo.id !== id); 
            setList(newList); 
        }; 
     
       const handleInputChange = (event) => { 
            setInputTask(event.target.value); 
        }; 
     
       return ( 
            <div className="Todo"> 
                <h1>My To-Do List</h1> 
     
                <div className="Top"> 
                    <input className="input" type="text" value={inputTask} 
                       onChange={handleInputChange} placeholder="Enter a task" /> 
     
                    <button className="btn" onClick={handleAddTodo}>ADD</button> 
                </div> 
     
               <ul> 
                    { list.map((todo) => ( 
                        <li className="task" key={todo.id}> 
                            {todo.todo} 
                            <button onClick={() => handleDeleteTodo(todo.id)}> 
                               Delete 
                           </button> 
                        </li> 
                    ))} 
                </ul> 
            </div> 
        ); 
    }; 
     
    export default TodoList;

    Вот как будет выглядеть ваш окончательный результат, когда кнопки добавления и удаления будут работать, как и ожидалось.

    не могу скачивать приложения из игрового магазина
    Список дел, показывающий несколько задач.

    Поздравляем, вы создали список дел, который добавляет и удаляет задачи. Вы можете пойти дальше, добавив стиль и дополнительные функции.

    Используйте проекты реального мира, чтобы изучить React

    Практика может быть эффективным способом обучения. Это позволяет вам применять концепции и лучшие практики React на практике, укрепляя ваше понимание фреймворка. Существует множество проектов, вам нужно найти подходящие.