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

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

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

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

Далее мы рассмотрим ключевые аспекты обработки данных в React-приложениях.

Дополнительная информация

Если ваше приложение состоит из файлов с расширением. jsx, то для преобразования JSX в JavaScript обычно принято использовать Babel2323
  TypeScript не требуется использование Babel так как имеет свой собственный встроенный компилятор, который обрабатывает TypeScript код, преобразуя его в JavaScript.


[Закрыть].

Вы можете настроить Babel в своем проекте, добавив необходимые плагины и пресеты2424
  Пресеты представляют собой наборы предварительно настроенных плагинов и правил для обработки и трансформации кода.


[Закрыть], либо использовать предустановленные инструменты, такие как Create React App, которые уже настроены для разработки с React.

Установить Babel и связанные ним плагины и пресеты можно с помощью npm или yarn. Например, для React-проекта вы можете установить следующие пакеты:

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

После установки вы можете создать файл конфигурации, например,.babelrc и указать там, какие пресеты и плагины вы хотите использовать. Например:

{

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

}

Это настройки, которые указывают Babel на то, что он должен использовать пресеты @babel/preset-env и @babel/preset-react для компиляции кода, включая JSX, в JavaScript, который может быть выполнен в браузере.

После настройки Babel он будет автоматически преобразовывать JSX в JavaScript, когда вы будете компилировать и запускать свой проект.

Часть 3. Работа с данными и запросами

Глава 1. Работа с API и запросы к серверу

Взаимодействие с внешними данными и API2525
  API (Application Programming Interface) – это набор правил и протоколов, который позволяет разным программным приложениям взаимодействовать друг с другом. API определяет способы и форматы обмена данными между различными компонентами программного обеспечения, делая возможным их интеграцию и взаимодействие.


[Закрыть] – важный аспект создания современных веб-приложений. В этой главе мы рассмотрим, как выполнять запросы к серверу и обрабатывать полученные данные в приложении на React.

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

Для выполнения запросов к серверу в React вы можете использовать библиотеки, такие как Axios или встроенный объект Fetch. Эти инструменты позволяют создавать HTTP-запросы для получения и отправки данных, а также предоставляют удобные методы для управления заголовками запроса, обработки ответов и обработки сетевых ошибок. Использование таких библиотек значительно упрощает процесс взаимодействия с сервером и обмена данными, делая его более надежным и гибким.

Рассмотрим пример, в котором компонент App использует метод жизненного цикла componentDidMount для выполнения запроса к серверу по указанному URL-адресу. После получения ответа, данные преобразуются из JSON формата2626
  JSON форматпредставляет собой текстовый формат, который легко читается как человеком, и легко парсится и генерируется компьютером.


[Закрыть], и затем выводятся в консоль. В случае возникновения ошибки при запросе, ошибка также будет обработана и выведена в консоль:

 
import React, {Component} from ’react’
class App extends Component {
  handleSubmit = (event) => {
event.preventDefault ()
    const dataToSend = {name: «John’, email: '[email protected]’}
    fetch (»https://api.example.com/submit', {
      method: «POST»,
      headers: {
        «Content-Type’: ’application/json’,
},
      body: JSON.stringify (dataToSend),
})
.then ((response) => response. json ())
.then ((result) => {
        console. log (result)
})
.catch ((error) => {
console.error («Ошибка:», error)
})
}
  render () {
    return (
      <form onSubmit= {this. handleSubmit}>
        {/* Форма для ввода данных */}
        <button type=«submit»> Отправить </button>
      </form>
)
}
}
export default App
 

Пояснения:

– event.preventDefault ();: Этот вызов предотвращает стандартное поведение браузера для события submit, которое обычно приводит к перезагрузке страницы. Вместо этого мы хотим предотвратить эту перезагрузку и обработать отправку данных сами.

– const dataToSend = {name: «John’, email: '[email protected]’};: Создается объект dataToSend, который представляет данные, которые мы собираемся отправить на сервер. В данном случае это простой объект с именем и адресом электронной почты.

– fetch (»https://api.example.com/submit', {…});: Используется функция fetch для отправки HTTP-запроса на указанный URL (в данном случае, 'https://api.example.com/submit').

– method: «POST»: Указывает, что это POST-запрос, который используется для отправки данных на сервер.

– headers: {«Content-Type’: ’application/json’}: Задает заголовок запроса, указывая, что данные, отправляемые на сервер, представляют собой JSON.

– body: JSON.stringify (dataToSend): Преобразует объект dataToSend в строку JSON и устанавливает ее как тело запроса. Таким образом, данные уходят на сервер в формате JSON.

– .then ((response) => response. json ()): Обрабатывает ответ от сервера в формате JSON. Метод json () преобразует ответ в объект JavaScript.

– .then ((result) => {console. log (result);}): Выводит результат в консоль. В реальном приложении здесь могли бы быть дополнительные действия, связанные с обработкой ответа от сервера.

– .catch ((error) => {console.error («Ошибка:», error);});: Обрабатывает любые ошибки, возникшие в процессе выполнения запроса, и выводит их в консоль.

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

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

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

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

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

– Анализ и обработка данных. Иногда данные требуют дополнительной обработки, например, расчетов или агрегации, чтобы предоставить более полезную информацию пользователю.

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

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

Вы также можете отправлять данные на сервер с помощью запросов POST, PUT, DELETE и других HTTP-методов. Это открывает множество возможностей для создания интерактивных приложений, которые взаимодействуют с сервером для выполнения различных действий, таких как создание, обновление и удаление данных. Этот двусторонний обмен информацией между клиентской и серверной частями приложения дает возможность создавать более сложные и функциональные веб-приложения, способные адаптироваться к разнообразным потребностям пользователей. Такие взаимодействия с сервером содействуют созданию многофункциональных и динамичных веб-приложений, позволяя пользователям выполнять широкий спектр действий внутри приложения.

Пример отправки данных на сервер в функциональном компоненте.

 
import React from ’react’
 
 
const App = () => {
  const handleSubmit = async (event) => {
event.preventDefault ()
    try {
      const dataToSend = {name: «John’, email: '[email protected]’};
      const response = await fetch (»https://api.example.com/submit', {
        method: «POST»,
        headers: {
          «Content-Type’: ’application/json’,
},
        body: JSON.stringify (dataToSend),
})
      const result = await response. json ()
      console. log (result);
} catch (error) {
console.error («Ошибка:», error)
}
}
 
 
  return (
    <form onSubmit= {handleSubmit}>
      {/* Форма для ввода данных */}
      <button type=«submit»> Отправить </button>
    </form>
)
}
 
 
export default App
 

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

При работе с API рекомендуется использовать ключи доступа и токены для аутентификации, чтобы обеспечить безопасность передаваемых данных. Стоит учитывать возможность ограничения доступа к API с помощью CORS (Cross-Origin Resource Sharing) для защиты от запросов с недостоверных источников. Эффективное управление безопасностью взаимодействия с API способствует созданию устойчивых и защищенных приложений.

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

Глава 2. Обработка ответов и обновление
состояния компонентов

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

Когда вы выполняете запрос к серверу с использованием Fetch API или других инструментов, сервер возвращает данные в ответ. Обработка этих данных может включать в себя:

– Преобразование данных в формат JSON или другой удобный формат.

– Извлечение нужных данных из ответа.

– Обработку ошибок, если они возникли во время запроса.

Пример обработки данных от сервера:

 
import React, {useState, useEffect} from ’react’
 
 
const ServerDataExample = () => {
  const [data, setData] = useState (null)
  const [isLoading, setIsLoading] = useState (true)
  const [error, setError] = useState (null)
 
 
  useEffect (() => {
    const fetchData = async () => {
      try {
        const response = await fetch (»https://api.example.com/data')
 
 
        if (!response. ok) {
          throw new Error («Ошибка сети»)
}
 
 
        const result = await response. json ()
        setData (result)
} catch (error) {
setError(error.message)
} finally {
        setIsLoading (false)
}
};
 
 
    fetchData ()
}, [])
 
 
  return (
    <div>
      {isLoading && <p> Загрузка данных… </p>}
      {error && <p> Ошибка: {error} </p>}
      {data && (
        <div>
          <h2> Данные с сервера </h2>
<pre>{JSON.stringify (data, null, 2)} </pre>
        </div>
)}
    </div>
)
}
 
 
export default ServerDataExample
 

После успешной обработки данных от сервера, вы можете обновить состояние компонентов с помощью метода setState (). Это позволяет компонентам перерендериться с учетом новых данных и отобразить их на странице.

Рассмотрим пример, в котором после получения данных от сервера, мы предоставляем пользователю возможность изменять их локально. Предположим, мы получили данные о пользователе, и пользователь может изменить свое имя:

 
import React, {useState, useEffect} from ’react’
 
 
interface UserData {
  name: string
  email: string
}
 
 
const fetchUserData = async (): Promise <UserData> => {
  // В реальном приложении здесь будет запрос к серверу
  // Возвращаем моковые данные для целей примера
  return {name: «John Doe’, email: '[email protected]’}
}
 
 
const saveChangesToServer = async (newName: string) => {
  // Здесь должна быть логика сохранения изменений на сервере
  // В данном случае, мы просто залогируем новое имя
  console. log (`Сохранение изменений: новое имя – $ {newName} `)
}
 
 
const UserProfile = () => {
  const [userData, setUserData] = useState <UserData | null> (null)
  const [newName, setNewName] = useState (»»)
  const [isEditing, setIsEditing] = useState (false)
 
 
  useEffect (() => {
    const fetchData = async () => {
      const result = await fetchUserData ()
      setUserData (result);
}
 
 
    fetchData ()
}, [])
 
 
  const handleEditClick = () => {
    setIsEditing (true);
};
 
 
  const handleSaveClick = () => {
    saveChangesToServer (newName);
    setUserData ((prevData) => ({…prevData!, name: newName}));
    setIsEditing (false)
}
 
 
  return (
    <div>
      {userData && (
        <div>
          <h2> {isEditing? «Редактирование профиля»: «Профиль пользователя»} </h2>
          <p> Имя: {isEditing? <input value= {newName} onChange= {(e) => setNewName(e.target.value)} />: userData.name} </p>
          <p> Email: {userData. email} </p>
          {isEditing? (
            <button onClick= {handleSaveClick}> Сохранить </button>
): (
            <button onClick= {handleEditClick}> Редактировать </button>
)}
        </div>
)}
    </div>
)
}
 
 
export default UserProfile
 

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

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

Глава 3. Асинхронное программирование

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


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

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

Основные концепции асинхронного программирования:

– Callback функции. Это функции, передаваемые как аргументы в другие функции, и вызываются по завершению выполнения определенной операции.

– Промисы (Promises)2828
  Промисы представляют собой объекты, представляющие результат выполнения асинхронной операции. Они облегчают работу с асинхронным кодом, предоставляя более линейный и читаемый синтаксис.


[Закрыть]. Промисы представляют собой объекты, представляющие результат выполнения асинхронной операции. Они облегчают работу с асинхронным кодом, предоставляя более линейный и читаемый синтаксис. Промисы позволяют обрабатывать успешные результаты или ошибки после завершения операции.

– Async/await. Оператор async используется для создания функции, которая всегда возвращает промис. Оператор await используется внутри таких функций для приостановки выполнения и ожидания завершения асинхронных операций. Этот подход делает код более похожим на синхронный2929
  Синхронный подход в программировании подразумевает последовательное выполнение задач или операций в определенной последовательности, где каждая задача ожидает завершения предыдущей, прежде чем начнется выполнение следующей.


[Закрыть], что улучшает его читаемость и поддерживаемость.

Асинхронное программирование особенно полезно в веб-разработке, где множество операций, таких как: обращения к API, обработка запросов к базам данных и загрузка ресурсов, выполняются асинхронно для обеспечения отзывчивости веб-приложений.

Асинхронные операции широко применяются в современных веб-приложениях для выполнения задач, которые могут занять много времени, такие как запросы к серверам, загрузка изображений и многие другие. Использование асинхронных операций позволяет приложению оставаться отзывчивым и не блокирует интерфейс пользователя.

Основные характеристики асинхронных операций:

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

– Используются для работы с вводом/выводом (I/O). Асинхронные операции часто используются при работе с операциями ввода и вывода, такими как чтение/запись файлов, сетевые запросы и обращения к базе данных. Эти операции могут занимать много времени, и асинхронный подход позволяет не блокировать остальной код.

– Обратные вызовы (Callbacks) и Промисы (Promises). В JavaScript и многих других языках программирования асинхронные операции могут быть реализованы с использованием обратных вызовов (функций, которые выполняются после завершения операции) или промисов.

– Многозадачность. Асинхронные операции позволяют программе выполнять несколько задач одновременно (параллельно) или переключаться между задачами (конкурентно) без блокировки выполнения.

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

Одним из способов работы с асинхронными операциями являются callback-функции. Это функции, которые передаются в другие функции и вызываются по завершению операции.

Ключевые аспекты использования callback-функций:

– Передача функции как аргумента. Для использования callback-функций – одна функция передается в другую в качестве аргумента.

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

– Обработка результата. Callback-функции могут использоваться для обработки результата выполнения функции, которая их вызывает. Например, если вы делаете запрос к серверу, callback-функция может быть вызвана после получения ответа от сервера, и она может обработать этот ответ.

Однако, с увеличением сложности кода, использование большого количества callback-функций может привести к проблемам, таким как «callback hell» (громоздкий вложенный код), и в таких случаях часто используются библиотеки и паттерны3030
  Паттерны в программировании – это выбор лучших шаблонов, принципов или решений, которые возникают при проектировании программного обеспечения.


[Закрыть], такие как Promises и async/await, для более удобной обработки асинхронных операций.