Текст книги "React и TypeScript: Практическое руководство. Быстрый старт"

Ответ:

 
import React, {useReducer, useState} from ’react’
 
 
interface State {items: string []}
interface Action {type: string; text?: string; index?: number}
 
 
const initialState = {items: []}
 
 
const listReducer = (state: State, action: Action): State => {
  switch (action. type) {
    case «Add-item’:
      return {items: […state.items, action. text || «»]};
    case «Remove-item’:
      return {items: state.items.filter ((item, index) => index!== action.index || undefined)};
    default:
      return state
}
}
 
 
const List = () => {
  const [state, dispatch] = useReducer (listReducer, initialState)
  const [newItem, setNewItem] = useState (»»)
 
 
  const addItem = () => {
    if (newItem.trim ()!== «») {
      dispatch ({type: «Add-item’, text: newItem});
      setNewItem (»»)
}
}
 
 
  const removeItem = (index: number) => {
    dispatch ({type: «Remove-item’, index})
}
 
 
  return (
    <div>
      <input type=«text» value= {newItem} onChange= {(e) => setNewItem(e.target.value)} />
      <button onClick= {addItem}> Add Item </button>
      <ul>
{state.items.map ((item, index) => (
          <li key= {index}>
            {item}
            <button onClick= {() => removeItem (index)}> Remove </button>
          </li>
))}
      </ul>
    </div>
)
}
 
 
export default List
 

Объяснение кода:

– Импорты и интерфейсы:

Импортируются необходимые модули и библиотеки, такие как React, useReducer и useState. Затем идет определние двух интерфейсов – State и Action, которые определяют форму состояния и действий.

– Инициализация состояния.

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

– Редуктор (listReducer).

Редуктор listReducer принимает текущее состояние state и действие action, и в зависимости от типа действия выполняет соответствующие изменения состояния. В случае действия типа «Add-item’, он добавляет новый элемент к массиву items. Если action. text (текст элемента) отсутствует, добавляется пустая строка.

В случае действия типа «Remove-item’, он удаляет элемент из массива items на основе action.index.

– Компонент «List».

Внутри функционального компонента List использован хук useReducer, чтобы создать состояние (state) и функцию dispatch для управления этим состоянием. Происходит передача редуктора listReducer и начальное состояние initialState. Также используется хук useState для отслеживания нового элемента, который пользователь хочет добавить.

– Методы addItem и removeItem.

addItem вызывается при нажатии кнопки «Add Item» и добавляет новый элемент в массив items, только если новый элемент не пустой.

removeItem вызывается при нажатии кнопки «Remove» у каждого элемента списка и удаляет элемент с заданным индексом.

– Рендер

В методе render отображается ввод текста (input) и кнопку для добавления новых элементов. Затем происходит отображение списока элементов с кнопкой «Remove» рядом с каждым элементом. При нажатии на «Remove» вызывается функция removeItem с индексом элемента.

Примечание1: Функция dispatch позволяет вам сказать вашему приложению, что произошло какое-то событие или действие. Например, когда вы кликаете на кнопку «Добавить элемент», вы вызываете функцию dispatch с сообщением, что вы хотите добавить новый элемент в список. Другая часть вашего приложения, называемая редуктором, прослушивает это сообщение и выполняет соответствующее действие. В результате списка элементов добавляется новый элемент.

Таким образом, функция dispatch – это способ управлять тем, как ваше приложение реагирует на действия пользователя и как оно обновляет своё состояние в соответствии с этими действиями.

Примечание 2: Метод. trim () удаляет начальные и конечные пробелы из строки, оставляя только символы между ними. Если newItem содержит только пробелы или пустую строку,.trim () вернет пустую строку. Если newItem содержит хотя бы один видимый символ,.trim () вернет строку без начальных и конечных пробелов.

newItem.trim ()!== «»: Это сравнение проверяет, что результат. trim () не равен пустой строке, что означает, что newItem не содержит только пробелы и не является пустой строкой.

Напутствие к читателю

Дорогие читатели,

Поздравляю вас с завершением этой книги! Надеюсь, что вы нашли здесь много полезной информации и практических примеров для успешного освоения мира разработки на React с использованием TypeScript. Ваше желание учиться и расти в области веб-разработки – важный стимул, который поможет вам начать карьеру в качестве разработчика.

Для тех, кто уже знаком с веб-разработкой, надеюсь, что вы открыли для себя новые перспективы и подходы к разработке на React с использованием TypeScript. Мы рассмотрели основные концепции, провели множество практических упражнений и рассмотрели лучшие практики в разработке.

Тем не менее, технологии постоянно развиваются, и процесс обучения должен стать для вас ежедневной привычкой. Не останавливайтесь на достигнутом. Применяйте полученные знания на практике, участвуйте в проектах, исследуйте новые технологии и подходы.

Ваше творческое мышление и стремление к самосовершенствованию – ваши лучшие союзники в этом увлекательном путешествии. Спасибо, что выбрали мою книгу. Желаю вам успехов в программировании, чтобы каждая строка вашего кода была ясной, а каждый проект выделялся своей уникальностью и узнаваемостью.

С любовью к коду,

Ирина Кириченко

 
– Документация и уроки по React:
https://legacy.reactjs.org
https://ru.reactjs.org/docs/getting-started.html
– Шпаргалки и справочная информация для разработчиков, работающих с React и TypeScript:
https://react-typescript-cheatsheet.netlify.app
– Руководство по TypeScript:
https://www.typescriptlang.org/docs/handbook/intro.html
– Определения типов React для TypeScript:
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/global.d.ts
– Справочник css:
https://webref.ru/css
https://cssreference.io
– css селекторы:
https://learn.javascript.ru/css-selectors
– Проверка на совместимость с браузерами:
https://caniuse.com
– Развертывание сжатого кода css:
https://www.styleneat.com
– Скорость загрузки сайта:
https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect
– Типы input:
http://htmlbook.ru/html/input/type