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

Для начала установите необходимые зависимости:

npm install – save-dev jest @testing-library/react @testing-library/jest-dom @types/jest @types/react @types/react-dom

Фреймворк Jest предоставялет набор функций Jest Matchers, который позволяет сравнивать значения и проводить различные проверки.

Некоторые из распространенных Jest Matchers:

– toBe (). Сравнивает два значения по строгому равенству (===):

expect(value).toBe (10) // Проверяет, что значение равно 10

– toEqual (). Проверяет глубокое равенство объектов/массивов по их значениям:

expect(object).toEqual ({key: ’value’}) // Проверяет равенство объекта по значениям его ключей

– toBeTruthy () / toBeFalsy (). Проверяет, является ли значение истинным или ложным:

expect(value).toBeTruthy () // Проверяет, что значение истинно

expect(value).toBeFalsy () // Проверяет, что значение ложно

– toContain (). Проверяет наличие элемента в массиве или подстроки в строке:

expect(array).toContain (’element’) // Проверяет, что в массиве есть элемент ’element’

expect(string).toContain (’substring’) // Проверяет, что в строке есть подстрока ’substring’

– toMatch (). Сопоставляет строку с регулярным выражением:

expect(string).toMatch (/pattern/) // Проверяет, что строка соответствует регулярному выражению

React Testing Library – это инструмент для тестирования React-компонентов, который создан для обеспечения простоты и понятности в процессе написания тестов. Основная идея заключается в том, чтобы писать тесты, которые отражают реальное поведение пользователей, а не просто проверяют внутреннюю реализацию компонентов.

Основные принципы:

– Ориентация на пользователя. Тесты фокусируются на том, как пользователи будут взаимодействовать с вашими компонентами.

– Простота использования. Предоставляет простой и понятный API для взаимодействия с компонентами.

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

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

React Testing Library предоставляет методы для поиска элементов на основе пользовательского взаимодействия, таких как getBy, queryBy, findBy, что позволяет проверять их наличие, содержимое и взаимодействие со структурой компонента. Это позволяет создавать тесты, более устойчивые к изменениям внутренней реализации компонентов.

Простой пример теста с использованием Jest и React Testing Library для проверки рендера компонента и его состояния:

 
import React from ’react’
import {render, fireEvent, screen} from '@testing-library/react’
import MyComponent from». /MyComponent’
test («Проверка рендера компонента и состояния», () => {
  render (<MyComponent />)
 
 
  // Проверяем начальное состояние компонента
  const countElement = screen.getByText (/Count:/i)
expect(countElement).toBeInTheDocument ()
expect(countElement.textContent).toBe («Count: 0»)
 
 
  // Имитируем клик и проверяем обновленное состояние
  const buttonElement = screen.getByRole (’button’, {name: /Увеличить/i})
fireEvent.click (buttonElement)
 
 
expect(countElement.textContent).toBe («Count: 1»)
 

})

Этот пример тестирует компонент MyComponent, проверяя начальное состояние и изменение состояния после клика на кнопку. Он использует Jest для создания тестовых сценариев и утверждений (expect) для проверки ожидаемых результатов, а React Testing Library для поиска элементов на странице и взаимодействия с ними в тестах.

Для запуска тестов используйте команду:

npm test

Jest автоматически найдет и выполнит все файлы с тестами в вашем проекте.

Тестирование компонентов с использованием Jest и React Testing Library является важной практикой в разработке React-приложений. Эти инструменты позволяют обнаруживать и предотвращать ошибки в вашем коде, повышая надежность и уверенность в работоспособности вашего приложения. Используйте TypeScript для улучшения типизации в ваших тестах и обеспечения более высокого качества кода.

В следующем разделе рассмотрим сборку и развертывание приложений.

Глава 3. Автоматизация сборки и развертывания с помощью инструментов Webpack и Babel

В этой главе мы рассмотрим важность автоматизации процесса сборки и развертывания приложений React с использованием инструментов, таких как Webpack и Babel. Эти инструменты помогают оптимизировать и упростить разработку, а также улучшить производительность приложений.

Автоматизация сборки приложений имеет ряд преимуществ:

– Упрощение разработки. Автоматизация позволяет разработчикам сосредотачиваться на написании кода, не заботясь о сложных процессах сборки и транспиляции.

– Оптимизация ресурсов. Инструменты автоматизации позволяют оптимизировать размер и загрузку ресурсов, таких как JavaScript и CSS, что улучшает производительность.

– Поддержка современных стандартов. Автоматизация позволяет использовать новые возможности языка JavaScript (например, ES6 и TypeScript) и другие инновации.

Webpack – это инструмент сборки, который позволяет объединить различные файлы проекта в единый бандл для оптимизации работы приложения. В контексте React и TypeScript, Webpack эффективно работает с разными типами файлов, преобразуя их в статические ресурсы для веб-приложения. Он позволяет управлять модулями, загружать различные типы файлов, применять лоадеры и плагины для преобразования кода и оптимизации ресурсов. Использование Webpack в проектах React и TypeScript помогает в удобной организации кода, улучшении производительности и поддержке различных функциональностей, таких как HMR (Hot Module Replacement) для мгновенного обновления изменений без перезагрузки страницы.

Установка Webpack:

npm install – save-dev webpack webpack-cli webpack-dev-server

Настройка Webpack.

Создайте файл конфигурации webpack.config. js и определите настройки сборки, такие как точка входа, точка выхода, загрузчики и плагины.

webpack.config. js:

 
const path = require (’path’);
module. exports = {
  entry:». /src/index. js’,
  output: {
    path: path.resolve (__dirname, ’dist’),
    filename: ’bundle. js’,
},
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: ’babel-loader’,
},
],
},
  plugins: [],
 

};

Добавьте скрипты в файл package. json, чтобы управлять процессом сборки и развертывания вашего приложения:

 
{
   «scripts»: {
     «start»: «webpack serve – mode development»,
     «build»: «webpack – mode production»
 

}

}

Babel – это инструмент для транспиляции кода JavaScript и TypeScript в старые версии JavaScript, чтобы обеспечить совместимость с разными браузерами. Babel позволяет использовать современные возможности языка, даже если целевая платформа не поддерживает их.

Babel стал частью инфраструктуры многих инструментов сборки JavaScript, включая Webpack. В некоторых случаях, когда вы настраиваете проект с помощью инструментов, таких как Create React App (CRA) или других предустановленных конфигураций, Babel уже включен по умолчанию. Однако, если вы создаете свою собственную конфигурацию проекта, вам может потребоваться установить и настроить Babel самостоятельно.

Установка Babel:

npm install – save-dev @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript babel-loader

Настройка Babel. Создайте файл конфигурации. babelrc и определите пресеты для транспиляции кода:

 
{
   «presets»: [
     "@babel/preset-env»,
     "@babel/preset-react»,
     "@babel/preset-typescript»
 

]

}

в package. json:

 
{
  «presets»: [
    "@babel/preset-env»,
    "@babel/preset-typescript»
 

]

}

Автоматизация сборки и развертывания приложений React с помощью инструментов, таких как Webpack и Babel, является важной частью разработки. Она упрощает работу разработчиков, обеспечивает оптимизацию ресурсов и поддержку современных стандартов языка. Эти инструменты позволяют создавать эффективные и производительные React-приложения.

Полезные библиотекидля стилизации React-приложений

– Styled-components и Styled System.

Styled-components – это библиотека для создания стилей в React-приложениях. Она предоставляет инструменты для стилизации компонентов, позволяя вам определять стили в виде строк, которые затем связываются с вашими компонентами.

Надстройкой над Styled-components является Styled System, которая предоставляет систему дизайн-системы для создания и применения стилей в ваших компонентах. Она добавляет концепцию тем и масштабируемых стилей к Styled-components.

Таким образом, Styled-components является библиотекой для стилизации, а Styled System – это библиотека, которая обогащает Styled-components (или другие CSS-in-JS библиотеки) системой дизайн-системы, делая структуру и применение стилей более систематическими и масштабируемыми. Хорошей практикой является использование этих библиотек вместе, чтобы создать мощную систему стилей для вашего React-приложения.

Установка:

npm i styled-components

npm install @types/styled-components

или:

yarn add styled-components

yarn add @types/styled-components

Установка типов позволит вам лучше работать с styled-components в среде TypeScript, так как это обеспечит автодополнение и статическую проверку типов при работе с компонентами и стилями.

Основные особенности styled-components:

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

– Использование JavaScript и CSS: Вы можете использовать синтаксис JavaScript для определения стилей, а также внедрять в них переменные и выражения.

– Компоненты как CSS-классы: Когда вы определяете стили для компонента с помощью styled-components, библиотека генерирует уникальные CSS-классы, которые автоматически применяются к вашим компонентам.

– Динамические стили: styled-components позволяет вам легко изменять стили компонентов на основе их состояния или пропсов.

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

– Поддержка тем: Вы можете легко создавать темы и динамически изменять стили компонентов на основе текущей темы.

– Emotion. Emotion – это библиотека для стилизации компонентов в React, которая позволяет разработчикам создавать стили с использованием подхода CSS-in-JS. Это означает, что стили определяются непосредственно внутри JavaScript-кода в виде строк, и они автоматически генерируются и применяются к компонентам во время выполнения.

Для установки библиотеки:

npm install @emotion/core

npm install @emotion/styled

или:

yarn add @emotion/core

yarn add @emotion/styled

Вот некоторые ключевые особенности Emotion:

1). Использование шаблонных литералов: Emotion использует шаблонные литералы (template literals) JavaScript для определения стилей.

Это позволяет вам использовать синтаксис CSS внутри JavaScript кода:

 
import {css} from '@emotion/core’;
 
 
const buttonStyle = css`
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
 

`;

2). Генерация уникальных классов: Emotion автоматически генерирует уникальные CSS-классы для ваших стилей, чтобы избежать конфликтов имен классов между компонентами.

3). Поддержка динамических стилей: Вы можете легко создавать стили, которые зависят от состояния компонента или его пропсов.

4). Оптимизированная производительность: Emotion заботится о производительности и генерирует компактные и оптимизированные стили.

5). Поддержка серверного рендеринга: Emotion поддерживает серверный рендеринг, что важно для оптимизации производительности и SEO вашего приложения.

6).Темы и переменные: Вы можете легко создавать темы и использовать переменные для легкой кастомизации стилей.

Пример использования Emotion в React-компоненте:

 
import {css} from '@emotion/core’;
 
 
const buttonStyle = css`
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
`;
 
 
function MyButton () {
  return (
    <button css= {buttonStyle}> Click me </button>
 

);

}

– Tailwind CSS – это популярный и модульный CSS-фреймворк, который предоставляет набор классов CSS для быстрой разработки пользовательского интерфейса. Он облегчает стилизацию веб-приложений и веб-сайтов, предоставляя готовые CSS-классы для широкого спектра стилей, включая отступы, размеры шрифтов, цвета, границы, гриды и многое другое.

Чтобы установить Tailwind CSS, выполните следующие шаги:

1). Установите Tailwind CSS и его зависимости:

npm install tailwindcss

или:

yarn add tailwindcss

2). Создайте файл конфигурации Tailwind CSS:

npx tailwindcss init

Эта команда создаст файл tailwind.config. js, в котором вы можете настроить параметры фреймворка, такие как цвета, шрифты, отступы и другие стили.

3). Создайте файл CSS, в котором импортируйте стили Tailwind CSS. Например, создайте файл styles. css и добавьте в него следующее:

 
@import ’tailwindcss/base’;
@import ’tailwindcss/components’;
@import ’tailwindcss/utilities’;
 

4). Добавьте ссылку на ваш файл CSS в вашем HTML-файле.

После установки и настройки, вы можете начать использовать классы Tailwind CSS для создания стилей в вашем проекте. Tailwind CSS предоставляет обширный список классов для различных стилей, и вы можете комбинировать и настраивать их, чтобы создать нужный дизайн для вашего веб-приложения.

Вот некоторые ключевые особенности и концепции Tailwind CSS:

– Модульность: Tailwind CSS основан на модульной архитектуре, что означает, что вы можете использовать только те части фреймворка, которые вам действительно нужны. Выбирайте и настраивайте классы для своих проектов.

– Атомарный дизайн: Фреймворк применяет атомарный подход к стилям, предоставляя отдельные классы для каждого стиля (например,.bg-blue-500 для фона синего цвета). Это позволяет создавать стили на основе комбинации классов.

– Кастомизация: Вы можете настроить Tailwind CSS, определив свои собственные цвета, шрифты, размеры и даже создавая собственные классы.

– Расширяемость: Фреймворк предоставляет механизм расширения, который позволяет вам добавлять собственные классы и плагины.

– Использование JIT (Just-In-Time) компиляции: Tailwind CSS включает JIT-компилятор, который генерирует только те стили, которые реально используются в вашем проекте, что помогает уменьшить размер конечного CSS-файла.

Пример использования Tailwind CSS:

<button class=«bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg hover: bg-blue-600»> Click me </button>

Здесь мы используем классы из Tailwind CSS для стилизации кнопки. Фреймворк предоставляет множество классов, которые вы можете комбинировать и настраивать, чтобы создать желаемый дизайн.

Tailwind CSS пользуется популярностью среди разработчиков за его простоту и гибкость. Этот фреймворк может ускорить разработку и облегчить поддержание стилей в ваших проектах.

– Sass (Syntactically Awesome Stylesheets) и SCSS (Sassy CSS) – это препроцессоры CSS, которые добавляют дополнительные возможности и улучшают читаемость и организацию кода в стилях веб-приложений. Они позволяют разработчикам создавать более мощные и модульные CSS-стили.

Установка:

npm install node-sass

или:

yarn add node-sass

Основные возможности Sass/SCSS:

– Переменные: Sass/SCSS позволяют определять переменные, которые можно использовать для хранения значений, таких как цвета, шрифты, размеры и многое другое. Это делает код более читаемым и упрощает изменение стилей на всех страницах вашего веб-приложения.

– Вложенность: Вы можете вкладывать правила CSS внутри других правил, что делает код более структурированным и понятным.

– Миксины: Миксины позволяют определять набор стилей, который можно использовать в разных местах. Это уменьшает дублирование кода и упрощает его обслуживание.

– Наследование: Вы можете использовать наследование для определения общих стилей, которые применяются к нескольким классам.

– Функции и операторы: Sass/SCSS поддерживают функции и операторы, позволяя вам выполнять математические операции, обработку строк и многое другое в стилях.

– Импорт файлов: Вы можете разделить свои стили на несколько файлов и импортировать их в основной файл стилей.

SCSS использует синтаксис, близкий к обычному CSS, и имеет расширение. scss.

Чтобы использовать Sass/SCSS в ваших проектах, вам нужно скомпилировать его в обычный CSS. Существует множество инструментов и сборщиков, таких как Sass CLI, webpack, и Gulp, которые могут выполнять компиляцию Sass/SCSS в CSS.

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

– Сложность проекта. Если ваш проект масштабный и содержит много компонентов, вам может подойти более мощный инструмент, который облегчит организацию и обслуживание стилей. Например, Styled-components и Emotion предоставляют возможность создавать стилизованные компоненты с применением JavaScript.

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

– Гибкость и настраиваемость. Некоторые библиотеки, такие как Tailwind CSS, предоставляют готовые классы для стилизации, что может быть полезно при быстрой разработке. Другие библиотеки, такие как Emotion, предлагают более высокую степень настраиваемости.

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

– Опыт и знания команды: Учтите опыт вашей команды и их знания в области стилизации. Это может повлиять на выбор инструмента, с которым разработчики уже знакомы.

Часть 9: Проекты и практика

Простой проект

Создадим простой проект, используя react и typescript. Для этого, создадим проект:

npx create-react-app – template typescript my-app

В папке src проекта в файле MyComponent. tsx пропишите:

 
import React from ’react’
 
 
interface MyComponentProps {
  name: string
  age: number
}
 
 
const MyComponent: React. FC <MyComponentProps> = ({name, age}) => {
  return (
    <div>
      <h1> Hello, {name}! </h1>
      <p> You are {age} years old. </p>
    </div>
)
}
 
 
export default MyComponent
 

Вместо:

const MyComponent: React. FC <MyComponentProps> = ({name, age}) => {

//…

}

Можно прописать:

const MyComponent = ({name, age}: MyComponentProps) => {

//…

}

В первом способе вы типизируете MyComponent с использованием React. FC, что означает, что это функциональный компонент, который ожидает определенные пропсы (в данном случае MyComponentProps).

Во втором способе вы типизируете аргументы функции, в данном случае {name, age}, чтобы они соответствовали MyComponentProps. Этот способ более явно указывает типы аргументов функции, но компонент не имеет явного типа React. FC. Внутри компонента пропсы деструктурируются в аргументы функции.

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

В App:

 
import React from ’react’
import». /App. css’
import MyComponent from». /MyComponent’;
 
 
function App () {
  return (
    <div className=«App»>
      <MyComponent name=«John» age= {30} />
      <MyComponent name=«Alice» age= {25} />
    </div>
);
}
 
 
export default App
 

функцию можно прописать через стрелочную:

 
const App = () => {
  return (
    <div className=«App»>
      <MyComponent name=«John» age= {30} />
      <MyComponent name=«Alice» age= {25} />
    </div>
 

)

}

Запустите проект через npm start. Если у вас возникнут какие-либо проблемы, проверьте консоль разработчика на наличие ошибок.

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

Задача 1: Калькулятор суммы

Создайте функциональный компонент Calculator, который принимает два числа через пропсы (number1 и number2) и выводит их сумму.

Ответ:

 
import React from «react»
 
 
interface CalculatorProps {
    number1: number
    number2: number
}
 
 
const Calculator: React. FC <CalculatorProps> = ({number1, number2}) => {
    const sum = number1 + number2;
    return (
        <div>
            Сумма: {sum}
        </div>
);
}
 
 
export default Calculator
 

Задача 2: Отображение списка элементов

Создайте функциональный компонент ItemList, который принимает массив строк через пропс items и отображает каждый элемент списка в виде списка <ul>.

Ответ:

 
import React from «react»
 
 
interface ItemListProps {
    items: string [];
}
 
 
const ItemList: React. FC <ItemListProps> = ({items}) => {
    return (
        <div>
            <ul>
{items.map ((item, index) => (
                    <li key= {index}> {item} </li>
))}
            </ul>
        </div>
)
}
 
 
export default ItemList
 

Примечание:

Метод map – это один из наиболее часто используемых методов в JavaScript для работы с массивами. Он позволяет вам пройти по каждому элементу массива и выполнить определенную операцию над каждым элементом. Принцип работы map следующий:

– Вызов метода map выполняется на массиве.

– Внутри метода map, вы передаете функцию обратного вызова (колбэк-функцию), которая будет применена к каждому элементу массива.

– Колбэк-функция получает три аргумента: текущий элемент, индекс элемента и сам массив.

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

После завершения работы с методом map (), у вас есть два массива: исходный массив items и новый массив, созданный с помощью map (). Эти массивы независимы друг от друга и могут содержать разные данные.

Ключи (key) в React используются для оптимизации и идентификации элементов списка при обновлении компонентов. Они помогают React понимать, какие элементы были добавлены, изменены или удалены, и таким образом, улучшают производительность при обновлении интерфейса.

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

В коде <li key= {index}>, вы используете индекс элемента массива в качестве ключа. Однако это не всегда оптимальный выбор. Если порядок элементов в массиве меняется, React может потерять сопоставление между старыми и новыми элементами. Поэтому лучше использовать уникальные идентификаторы (например, item.id) в качестве ключей, если это возможно.

Если у вас нет уникальных идентификаторов, и порядок элементов не меняется, использование индекса в качестве ключа может быть приемлемым, но следует быть осторожным при изменении порядка элементов или добавлении/удалении элементов из массива, так как это может повлиять на производительность и корректность отображения.

Задача 3: Вычисления и отображения суммы всех чисел из массива.

Напишите функциональный компонент TotalSum, который принимает массив чисел в виде пропса и использует метод reduce () для вычисления и отображения суммы всех чисел из массива.

 
import React from «react»
 
 
type TotalSumProps = {
    numbers: number []
}
 
 
const TotalSum: React. FC <TotalSumProps> = ({numbers}) => {
    return (
        <div>
            <p>
{numbers.reduce ((accum, value) => {
                    return accum + value;
}, 0)}
            </p>
        </div>
)
}
export default TotalSum
 

Метод reduce () – это функция высшего порядка в JavaScript, которая применяет функцию обратного вызова к аккумулятору и каждому элементу массива (или другого итерируемого объекта), сокращая массив до одного значения. Он принимает два аргумента: колбэк-функцию и начальное значение аккумулятора.

Принцип работы метода reduce ():

– Первый аргумент метода reduce () – это колбэк-функция. Эта функция принимает четыре аргумента: аккумулятор (accumulator), текущий элемент массива (currentValue), текущий индекс (currentIndex) и сам массив (array).

– Начальное значение аккумулятора передается вторым аргументом методу reduce (). Если начальное значение не указано, оно равно первому элементу массива. После первой итерации аккумулятор будет равен результату выполнения колбэк-функции.

– Метод reduce () выполняет колбэк-функцию для каждого элемента массива, начиная с начального значения аккумулятора и последовательно обновляя аккумулятор на каждой итерации.

Использование начального значения аккумулятора (в данном случае 0) в методе reduce () полезно в следующих случаях:

– Если массив может быть пустым, и вам нужно удостовериться, что reduce () всегда вернет какое-то значение. Начальное значение аккумулятора становится результатом в случае пустого массива.

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

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

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

Если вам необходимо сохранить сумму элементов массива для дальнейшего использования в коде, вы можете это сделать, сохраняя результат reduce () в переменной

Ответ:

 
import React from «react»
 
 
type TotalSumProps = {
    numbers: number []
}
 
 
const TotalSum: React. FC <TotalSumProps> = ({numbers}) => {
    const sum = numbers.reduce ((accum, value) => {
        return accum + value
}, 0);
 
 
    return (
        <div>
            <p>
                Сумма: {sum}
            </p>
            {/* Далее можно использовать значение ’sum’ в других частях
компонента */}
        </div>
 

)

}

Задача 4: Отображание «Привет» или «Пока»

Создайте компонент, который будет отображать «Привет» или «Пока» в зависимости от значения пропса isGreeting. Используйте тернарный оператор.

Ответ:

 
import React from «react»
 
 
type GreetingProps = {
    isGreeting: boolean
}
 
 
const Greeting: React. FC <GreetingProps> = ({isGreeting}) => {
    return (
        <div>
            <p>
                {isGreeting? «Привет»: «Пока»}
            </p>
        </div>
)
}
 
 
export default Greeting
 

Задача 5: Отображение текстового поля ввода и кнопки.

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

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

Ответ:

 
import React, {useState} from «react»
 
 
const TextInputWithButton: React. FC = () => {
    const [text, setText] = useState (»»); // Создаем состояние для текста
 
 
    const handleInputChange = (event: React.ChangeEvent <HTMLTextAreaElement>) => {
      // Обработчик ввода текста
setText(event.target.value) // Обновляем состояние с введенным
текстом
};
 
 
    const handleButtonClick = () => {
      // Обработчик клика на кнопку
}
 
 
    return (
      <div>
        <textarea
          value= {text} // Значение текстового поля берется из состояния
          onChange= {handleInputChange} // Устанавливаем обработчик ввода
          placeholder=«Введите текст»
        />
        <button onClick= {handleButtonClick}> Отправить </button>
        <div> {text} </div> {/* Отображаем введенный текст */}
      </div>
)
}
 
 
  export default TextInputWithButton
 

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

Разъяснения:

– React.ChangeEvent – это стандартный тип события в React. Он предоставляет типизированную информацию о событии изменения для элементов формы и других элементов, которые поддерживают события изменения, такие как <input>, <select>, и <textarea>. Этот тип события используется в React для обработки событий изменения значений этих элементов.

– event. target – это ссылка на элемент DOM, который вызвал событие

– event.target.value используется для получения значения, введенного пользователем в этом элементе

– <HTMLTextAreaElement> – это типизация элемента <textarea> в HTML. В данном контексте она используется для определения типа элемента, на который ссылается event. target при обработке события изменения

Задача 6: Напишите React-компонент, который будет содержать кнопку «Toggle Red Square». При нажатии на эту кнопку, на экране должен появляться красный квадрат, и при повторном нажатии на кнопку, квадрат должен исчезать. Для решения этой задачи используйте хук useState.

Ответ:

import React, {useState} from ’react’

 
const RedSquare = () => {
    const [isVisible, setisVisible] = useState (false)
    const toggleSquare = () => {
        setisVisible (!isVisible)
}
 return (
    <div>
        <button onClick= {toggleSquare}> Toggle Red Square </button>
        {isVisible && <div style= {{marginTop: ’20px’, width: «100px’, height: «100px’, background: ’red’}}>
        </div>
}
    </div>
)
}
 
 
export default RedSquare
 

Задача 7: Создайте функциональный компонент ShoppingList, который позволит пользователю добавлять и удалять элементы из списка покупок.

Требования:

Создайте компонент ShoppingList, который содержит список покупок и поля для добавления новых покупок. Используйте useReducer для управления состоянием списка покупок. Добавьте кнопку «Add» для добавления новой покупки в список. Добавьте кнопку «Remove» для удаления покупки из списка. При клике на кнопку «Add», новая покупка должна появляться в списке снизу. При клике на кнопку «Remove» у соответствующей покупки, она должна быть удалена из списка. По завершении задачи, ваш код должен позволять пользователю взаимодействовать с списком покупок, добавлять и удалять покупки.