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

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

Основные характеристики JSON:

– Читаемость: представляет данные в виде пар «ключ-значение» и использует понятный человеку синтаксис. Это делает JSON легким для чтения и отладки.

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

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

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

Конвертация объекта в формат JSON в JavaScript выполняется с помощью метода JSON.stringify ().

Например:

 
const myObject = {key1: ’value1», key2: ’value2»}
const jsonString = JSON.stringify (myObject)
console. log (jsonString)
 

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

Часть 4. Роутинг и навигация

Глава 1. Введение в роутинг в React (React Router)

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

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

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

В React для осуществления роутинга часто используется библиотека React Router. Это популярная библиотека, которая предоставляет компоненты для создания динамической навигации в React-приложениях. Она позволяет определять маршруты (routes) и связывать их с различными компонентами, что позволяет приложению отображать разный контент в зависимости от текущего URL.

Для начала работы с React Router, необходимо установить соответствующие пакеты с помощью npm или yarn:

npm install react-router-dom

или:

yarn add react-router-dom

React Router предоставляет несколько ключевых компонентов для эффективного управления роутингом в приложении:

– BrowserRouter. Этот компонент обертывает всё приложение и осуществляет управление маршрутами в зависимости от текущего URL. Он обеспечивает взаимодействие между URL-адресом в адресной строке и контентом, отображаемым в приложении.

– Route. Данный компонент определяет, какой компонент приложения должен быть отображен при совпадении определенного URL-адреса. Это позволяет рендерить разные компоненты для различных путей приложения.

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

Пример определения маршрутов и навигации с использованием React Router:

 
import React from ’react’
import {BrowserRouter as Router, Route, Link} from ’react-router-dom’
 
 
const Home = () => <div> Главная страница </div>
const About = () => <div> О нас </div>
const Contact = () => <div> Контакты </div>
 
 
function App () {
 
 
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/"> Главная </Link>
          </li>
          <li>
            <Link to="/about»> О нас </Link>
          </li>
          <li>
            <Link to="/contact»> Контакты </Link>
          </li>
        </ul>
      </nav>
      <Route path="/" exact component= {Home} />
      <Route path="/about» component= {About} />
      <Route path="/contact» component= {Contact} />
    </Router>
)
}
export default App
 

В этом примере компонент Router определяет основу роутинга, а компоненты Link создают ссылки для навигации между страницами. Компоненты Route определяют, какой компонент отображать на определенных маршрутах.

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

Кроме того, React Router предоставляет гибкий и расширяемый способ управления роутингом, что позволяет разработчикам легко настраивать поведение маршрутов и взаимодействовать с текущими URL-адресами. Также библиотека поддерживает защиту маршрутов, что позволяет ограничивать доступ к определенным страницам в зависимости от авторизации пользователя.

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

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

Глава 2. Создание многoстраничных приложений

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

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

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

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

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

Примерная структура каталогов может включать следующее.

src/

| – components/

| | – Common/

| | | – Header. jsx

| | | – Footer. jsx

| | – Page1/

| | | – Page1.jsx

| | – Page2/

| | | – Page2.jsx

| – pages/

| | – Home. jsx

| | – About. jsx

| | – Contact. jsx

| – Appjtsx

| – index. jsx

– components/: Этот каталог содержит компоненты, которые могут быть использованы на разных страницах приложения. Например, общие компоненты, такие как Header и Footer, могут находиться здесь.

– pages/: В этом каталоге находятся файлы, представляющие отдельные страницы приложения. Каждый файл соответствует одной странице, например, Home. tsx, About. tsx и Contact. tsx.

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

– index. tsx: Файл index. tsx является точкой входа в приложение для React. Он обычно содержит код для рендеринга приложения в DOM.

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

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

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

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

Чтобы упростить код и уменьшить дублирование компонентов, вы можете использовать общие компоненты, которые используются на нескольких страницах. Эти общие компоненты, такие как Header и Footer, могут находиться в каталоге components/Common/, как указано в структуре каталогов и добавляться в каждую страницу, где требуется их отображение при помощи, например, <Header/>. Это позволяет повторно использовать компоненты и обеспечивает единообразный дизайн и поведение на разных страницах приложения.

Рассмотрим простой пример маршрутизации для блога:

 
Blog. jsx:
 
 
import React from ’react’
import {Link} from ’react-router-dom’
 
 
const Blog = () => {
  const articles = [
    {id: 1, title: «Статья 1», content: «Содержание статьи 1…'},
    {id: 2, title: «Статья 2», content: «Содержание статьи 2…'},
    {id: 3, title: «Статья 3», content: «Содержание статьи 3…'},
];
 
 
  return (
    <div>
      <h2> Список статей </h2>
      <ul>
{articles.map (article => (
          <li key={article.id}>
            <Link to={`/article/${article.id} `}> {article. title} </Link>
          </li>
))}
      </ul>
    </div>
)
}
 
 
export default Blog
 
 
Article. jsx:
 
 
import React from ’react’;
import {useParams} from ’react-router-dom’;
 
 
const Article = () => {
  const {id} = useParams ()
  // В реальном приложении здесь будет запрос к API или базе данных для получения статьи по ID
  // Здесь просто имитация получения данных
  const article = {
    1: {title: «Статья 1», content: «Содержание статьи 1…'},
    2: {title: «Статья 2», content: «Содержание статьи 2…'},
    3: {title: «Статья 3», content: «Содержание статьи 3…'},
} [id]
 
 
  return (
    <div>
      <h2> {article. title} </h2>
<p>{article.content} </p>
    </div>
)
}
 
 
export default Article
 
 
App. jsx:
import React from ’react’
import {BrowserRouter as Router, Route} from ’react-router-dom’
import Blog from». /Blog’
import Article from». /Article’
 
 
const App = () => {
  return (
    <Router>
      <div>
        <Route path="/" exact component= {Blog} />
        <Route path="/article/:id» component= {Article} />
      </div>
    </Router>
);
};
 
 
export default App
 

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

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

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

В следующих главах мы углубимся в более сложные сценарии использования React Router и исследуем его возможности более подробно.

Глава 3. Динамическая навигация

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

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

– Условную навигацию. Изменение маршрутов или страниц в зависимости от состояния или данных приложения. Например, отображение разных страниц в зависимости от прав доступа пользователя.

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

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

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

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

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

Для передачи параметров маршрута используется переменная, начинающаяся с двоеточия (:) в определении маршрута.

Например:

<Route path="/products/:id» component= {ProductDetail} />

В этом примере: id – это параметр маршрута, который может быть любым числовым или текстовым значением в URL.

React Router предоставляет нам несколько способов передачи параметров маршрута:

– Вложенные маршруты и динамические сегменты URL. Мы можем создавать вложенные маршруты, включая в них динамические сегменты URL, которые будут интерпретироваться как параметры. Например, '/users/:id’ позволяет нам передавать id в URL и извлекать его в компоненте.

– Компонент useParams. Этот хук React Router позволяет легко извлекать параметры маршрута в функциональных компонентах.

– Query-параметры. Мы также можем передавать параметры в виде query-строки, например, '/search? q=query’. Для их извлечения можно воспользоваться хуком useLocation и библиотекой query-string.

Рассмотрим несколько примеров передачи параметров маршрута в приложениях Пример 1: Просмотр деталей объекта

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

UserList. jsx:

 
import React from ’react’
import {Link} from ’react-router-dom’
 
 
const users = [
  {id: 1, name: «Alice’},
  {id: 2, name: «Bob’},
  {id: 3, name: «Charlie’},
];
 
 
const UserList = () => {
  return (
    <div>
      <h2> User List </h2>
      <ul>
{users.map (user => (
          <li key={user.id}>
            <Link to={`/user/${user.id}`}>{user.name} </Link>
          </li>
))}
      </ul>
    </div>
)
};
 
 
export default UserList
 

UserList. jsx:

 
import React from ’react’
import {useParams} from ’react-router-dom’
 
 
const UserDetails = () => {
  const {id} = useParams ()
  // В реальном приложении здесь будет запрос к API или базе данных для получения данных пользователя по ID
  // Здесь просто имитация получения данных
  const user = {
    1: {name: «Alice’, age: 25, email: '[email protected]’},
    2: {name: «Bob’, age: 30, email: '[email protected]’},
    3: {name: «Charlie’, age: 28, email: '[email protected]’},
} [id];
 
 
  return (
    <div>
      <h2> User Details </h2>
      <p> Name: {user.name} </p>
      <p> Age: {user.age} </p>
      <p> Email: {user. email} </p>
    </div>
)
}
 
 
export default UserDetails
 

App. jsx:

 
import React from ’react’
import {BrowserRouter as Router, Route} from ’react-router-dom’
import UserList from». /UserList’
import UserDetails from». /UserDetails’
 
 
const App = () => {
  return (
    <Router>
      <div>
        <Route path="/" exact component= {UserList} />
        <Route path="/user/:id» component= {UserDetails} />
      </div>
    </Router>
)
}
 
 
export default App
 

Примечание: Если не использовать параметр exact для маршрута главной страницы (/), он будет считаться частичным совпадением. Это означает, что этот маршрут будет срабатывать для всех путей, начинающихся с /, включая /user/:id, поскольку /user/:id также начинается с /.

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

Пример 2: Фильтрация данных

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

Catalog. jsx:

 
import React from ’react’
import {Link} from ’react-router-dom’
 
 
const Catalog = () => {
  const products = [
    {id: 1, name: «Product 1», category: ’electronics’},
    {id: 2, name: «Product 2», category: ’clothing’},
    {id: 3, name: «Product 3», category: ’electronics’},
    // Допустим, есть другие товары с разными категориями…
]
 
 
  return (
    <div>
      <h2> Catalog </h2>
      <ul>
{products.map (product => (
          <li key={product.id}>
            <Link to={`/product/${product.id}`}>{product.name} </Link>
          </li>
))}
      </ul>
    </div>
)
}
 
 
export default Catalog
 

ProductDetails. jsx:

 
import React from ’react’
import {useParams} from ’react-router-dom’
 
 
const ProductDetails = () => {
  const {id} = useParams ()
  // В реальном приложении здесь будет запрос к API или базе данных для получения данных о товаре по ID
  // Здесь просто имитация получения данных
  const product = {
    1: {name: «Product 1», category: ’electronics’, description: «Description for Product 1»},
    2: {name: «Product 2», category: ’clothing’, description: «Description for Product 2»},
    3: {name: «Product 3», category: ’electronics’, description: «Description for Product 3»},
    // Допустим, есть другие товары с разными категориями…
} [id]
 
 
  return (
    <div>
<h2>{product.name} </h2>
<p>{product.description} </p>
    </div>
)
}
 
 
export default ProductDetails
 
 
import React from ’react’
 

App. jsx:

 
import {BrowserRouter as Router, Route} from ’react-router-dom’;
import Catalog from». /Catalog’;
import ProductDetails from». /ProductDetails’;
 
 
const App = () => {
  return (
    <Router>
      <div>
        <Route path="/" exact component= {Catalog} />
        <Route path="/product/:id» component= {ProductDetails} />
      </div>
    </Router>
);
};
 
 
export default App