Продвинутые стратегии при работе с React и TypeScript
2 года назад·10 мин. на чтение
Создание и обслуживание сложных приложений React и TypeScript требует надежной стратегии. В этой статье мы рассмотрим продвинутые стратегии разработки приложений React и TypeScript, включая архитектуру, тестирование, производительность, процесс разработки, специальные возможности, безопасность и поддержку.
React и TypeScript являются двумя наиболее популярными технологиями, используемыми в современной веб-разработке. Компонентная архитектура React и виртуальный DOM в сочетании с мощной типизацией и удобством сопровождения TypeScript создают мощный дуэт.
Давайте подробнее рассмотрим пример архитектуры приложения React и TypeScript.
Давайте подробнее рассмотрим пример процесса разработки для приложения React и TypeScript.
Давайте подробнее рассмотрим пример техники безопасности для приложения React и TypeScript.
Создание и поддержка продвинутых приложений React и TypeScript требует надежной стратегии. Хорошо продуманная архитектура, комплексное тестирование, оптимизация производительности, эффективный процесс разработки, доступность, безопасность и стратегия обслуживания — все это важные компоненты успешной стратегии развития. Следуя этим стратегиям, вы можете гарантировать, что ваше приложение является масштабируемым, обслуживаемым и эффективным, обеспечивая высококачественный пользовательский интерфейс для ваших пользователей.
В дополнение к стратегиям, рассмотренным выше, существует множество других продвинутых методов и шаблонов React и TypeScript, которые могут помочь вам создавать лучшие приложения. Некоторые примеры этих методов включают компоненты высшего порядка, render props и контекст.
Компоненты высшего порядка (HOC) являются популярным шаблоном в React, который может помочь вам повторно использовать и совместно использовать логику между компонентами. HOC — это функции, которые принимают компонент и возвращают новый компонент с дополнительной функциональностью. Например, можно использовать HOC для добавления проверки подлинности или авторизации компонента.
renderProps — еще один популярный шаблон в React, который может помочь вам повторно использовать логику между компонентами. Render props — это функции, которые передаются компоненту в качестве пропса, позволяя компоненту отображать динамическое содержимое. Например, можно использовать рендер проп для рендеринга загружаемого спиннера во время извлечения данных.
Контекст — это функциональность в React, которая позволяет передавать данные через дерево компонентов без необходимости вручную передавать проп на каждом уровне. Контекст может быть полезен для передачи данных, таких как тема или предпочитаемый язык, компонентам, которые находятся глубоко в дереве компонентов.
Давайте подробнее рассмотрим пример реализации каждого из этих передовых методов.
В дополнение к этим передовым методам существует множество других инструментов и библиотек, которые могут помочь вам создавать лучшие приложения React и TypeScript. Вот некоторые примеры этих инструментов:
Архитектура
Хорошо спроектированная архитектура необходима для создания масштабируемых, поддерживаемых и расширяемых приложений. Продуманная архитектурная стратегия может гарантировать, что ваше приложение остается управляемым по мере его роста и развития с течением времени. Существует несколько архитектурных шаблонов, доступных для приложений React, таких как Flux, Redux и Context API. Каждый шаблон имеет свои сильные и слабые стороны, и выбор будет зависеть от требований вашего приложения и предпочтений вашей команды. При создании приложения TypeScript важно выбрать архитектуру, которая хорошо работает с дополнительным уровнем сложности TypeScript. Многоуровневая архитектура, такая как Domain-Driven Design, может помочь управлять сложностью и обеспечивать разделение задач. Кроме того, модульная архитектура, такая как Micro Frontends, может помочь разбить большие приложения на более мелкие, более управляемые части. Другая архитектурная стратегия заключается в использовании компонентов-контейнеров и презентационных компонентов. Компоненты-контейнеры отвечают за управление состоянием приложения и потоком данных, в то время как презентационные компоненты связаны с отображением пользовательского интерфейса. Такой подход помогает обеспечить разделение задач и упорядочить кодовую базу.В этом примере архитектуры у нас есть компонент контейнера App, который управляет состоянием приложения и потоком данных. Мы используем React Router для управления маршрутизацией приложения и рендеринга различных страниц на основе URL- адреса. Компонент контейнера также заключает все приложение в Provider Redux, который предоставляет доступ к глобальному состоянию приложения. Презентационные компоненты,// App.tsx import React from 'react'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import { Provider } from 'react-redux'; import store from './store'; import Header from './components/Header'; import Footer from './components/Footer'; import Home from './pages/Home'; import About from './pages/About'; import Contact from './pages/Contact'; import NotFound from './pages/NotFound'; function App() { return ( <Provider store={store}> <Router> <Header /> <Switch> <Route exact path="/" component={Home} /> <Route exact path="/about" component={About} /> <Route exact path="/contact" component={Contact} /> <Route component={NotFound} /> </Switch> <Footer /> </Router> </Provider> ); } export default App;
Header
и Footer
, связаны с отображением пользовательского интерфейса и получением пропса от компонента контейнера.
Тестирование
Тестирование имеет решающее значение для обеспечения того, чтобы ваш код работал так, как задумано, выявляя ошибки до того, как они попадут в продакшен. Эффективное тестирование требует комплексной стратегии, охватывающей все аспекты приложения, от модульных тестов до интеграционных тестов и end-to-end тестов. Существует несколько фреймворков тестирования и инструментов, доступных для React и TypeScript, таких как Jest, Enzyme и React Testing Library. При тестировании приложений TypeScript важно убедиться, что тесты правильно типизируют код и обнаруживают ошибки, связанные с типами. Модульные тесты должны быть написаны для охвата отдельных функций или компонентов, в то время как интеграционные тесты должны проверять, как различные части приложения работают вместе. End-to-end (e2e) тесты должны имитировать реальные пользовательские сценарии и охватывать все аспекты приложения. Давайте подробнее рассмотрим пример стратегии тестирования для приложения React и TypeScript.В этом примере стратегии тестирования мы используем платформы Jest и React Testing Library для написания модульного теста для компонента// Example.test.tsx import React from 'react'; import { render, screen } from '@testing-library/react'; import { Provider } from 'react-redux'; import store from './store'; import Example from './Example'; describe('Example component', () => { it('renders correctly', () => { render( <Provider store={store}> <Example /> </Provider> ); const linkElement = screen.getByText(/Example Component/i); expect(linkElement).toBeInTheDocument(); }); });
Example
. Компонент заключен в провайдер Redux Provider, который предоставляет доступ к глобальному состоянию приложения. Функция render
используется для рендеринга компонента и предоставления его для тестирования. screen
- объект из библиотеки React Testing Library используется для поиска элемента с текстом Example Component
. Наконец, функция expect
используется для обеспечения того, чтобы элемент находился в документе.
Производительность
Производительность имеет решающее значение для обеспечения быстрого и отзывчивого взаимодействия с пользователем, особенно для более крупных и сложных приложений. Оптимизация производительности должна быть включена в вашу стратегию развития с самого начала. Для React и TypeScript доступно несколько методов оптимизации производительности, таких как отложенная загрузка (ленивая загрузка, lazy loading), разделение кода и мемоизация. При оптимизации производительности приложения TypeScript важно убедиться, что TypeScript используется эффективным и оптимизированным образом. Кроме того, следует проводить регулярное тестирование производительности и профилирование, чтобы убедиться, что оптимизация повышает производительность. Давайте подробнее рассмотрим пример метода оптимизации производительности для приложений React и TypeScript.В этом примере метода оптимизации производительности мы используем функцию React// LazyLoadedComponent.tsx import React, { lazy, Suspense } from 'react'; const LazyLoadedComponent = lazy(() => import('./LazyLoadedComponentImpl')); function LazyLoadedComponentWrapper() { return ( <Suspense fallback={<div>Loading...</div>}> <LazyLoadedComponent /> </Suspense> ); } export default LazyLoadedComponentWrapper;
lazy
для ленивой загрузки компонента. Функция lazy
принимает функцию, которая возвращает динамический импорт, позволяя загружать компонент только при необходимости. Компонент Suspense
используется для предоставления резервного пользовательского интерфейса во время загрузки компонента. Этот метод может помочь улучшить начальное время загрузки приложения за счет уменьшения объема кода, который необходимо загрузить и проанализировать.
Процесс разработки
Эффективный и оптимизированный процесс разработки может помочь вам писать лучший код быстрее и эффективнее. Такие инструменты, как webpack, Babel и ESLint, могут помочь оптимизировать процесс разработки, а системы управления версиями, такие как Git, могут помочь управлять кодом и эффективно взаимодействовать с вашей командой. Гибкие методологии разработки, такие как Scrum, могут помочь оптимизировать процесс разработки, способствовать сотрудничеству и общению, а также более эффективно предоставлять высококачественное программное обеспечение. Регулярные проверки кода и сеансы обмена знаниями также могут помочь поддерживать качество кода и гарантировать, что все члены команды будут в курсе последних разработок. Другим аспектом оптимизированного процесса разработки является автоматизация. Автоматизация повторяющихся задач, таких как построение и развертывание приложения, может помочь сэкономить время и уменьшить количество ошибок. Конвейеры непрерывной интеграции и непрерывной доставки (CI/CD) помогают автоматизировать процесс разработки, позволяя сосредоточиться на написании кода и предоставлении функций.В этом примере процесса разработки мы используем webpack для объединения нашего кода и Babel для преобразования нашего кода TypeScript в JavaScript. Мы используем Jest для выполнения наших тестов и ESLint для линтинга нашего кода. Скрипт// package.json { "name": "my-app", "version": "1.0.0", "scripts": { "start": "webpack-dev-server --mode development", "build": "webpack -mode production", "test": "jest", "lint": "eslint src", "precommit": "lint-staged", "deploy": "npm run build && aws s3 sync dist s3://my-bucket -delete" }, "devDependencies": { "webpack": "5.64.4", "webpack-cli": "4.9.1", "webpack-dev-server": "4.6.0", "babel-loader": "8.2.3", "@babel/core": "7.16.7", "@babel/preset-env": "7.16.8", "@babel/preset-react": "7.16.7", "@babel/preset-typescript": "7.16.7", "eslint": "8.6.0", "eslint-plugin-react": "7.29.0", "eslint-plugin-react-hooks": "4.3.0", "jest": "27.4.3", "ts-jest": "27.0.5", "lint-staged": "12.2.4", "husky": "7.0.4" }, "dependencies": { "react": "17.0.2", "react-dom": "17.0.2", "react-redux": "7.2.6", "react-router-dom": "6.2.1", "redux": "4.1.2", "axios": "0.24.0" }, "lint-staged": { "*.{js,jsx,ts,tsx}": [ "eslint --fix", "git add" ] } }
precommit
использует lint-staged
для запуска ESLint и форматирования нашего кода перед каждым коммитом. Наконец, скрипт deploy
создает наше приложение и развертывает его в бакете AWS S3.
Специальные возможности и доступность (Accessibility)
Специальные возможности имеют решающее значение для обеспечения того, чтобы все пользователи, независимо от их возможностей, могли получить доступ к приложению и использовать его. Следует следовать рекомендациям и стандартам по специальным возможностям, таким как Руководство по доступности веб (WCAG), чтобы обеспечить доступность приложения для всех. При разработке приложений React и TypeScript специальные возможности должны быть включены в процесс разработки с самого начала. Такие инструменты, как axe-core, можно использовать для проверки проблем со специальными возможностями и обеспечения соответствия приложения рекомендациям по специальным возможностям. Кроме того, использование семантического HTML и предоставление альтернативного текста для изображений может помочь улучшить специальные возможности вашего приложения. Давайте подробнее рассмотрим пример метода специальных возможностей для приложения React и TypeScript.В этом примере метода специальных возможностей мы используем атрибут// AccessibleButton.tsx import React, { ButtonHTMLAttributes } from 'react'; interface AccessibleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { label: string; } function AccessibleButton({ label, ...rest }: AccessibleButtonProps) { return ( <button aria-label={label} {...rest}> {label} </button> ); } export default AccessibleButton;
aria-label
для предоставления метки со специальными возможностями для кнопки. Компонент AccessibleButton
принимает проп label
и отображает кнопку с атрибутом aria-label
. Такой подход гарантирует, что кнопка будет доступна всем пользователям, включая пользователей, использующих программы чтения с экрана.
Безопасность
Безопасность является еще одним важным аспектом продвинутой разработки React и TypeScript. Уязвимости безопасности могут иметь серьезные последствия, начиная от утечек данных и заканчивая простоями приложений. Существует несколько рекомендаций по безопасности, которые следует соблюдать при разработке приложений React и TypeScript, такие как методы безопасного кодирования, валидация ввода и использование HTTPS. При разработке приложений TypeScript важно убедиться, что ваш код написан с учетом безопасности. Распространенные уязвимости системы безопасности, такие как внедрение кода SQL и межсайтовые скрипты (XSS), можно предотвратить с помощью параметризованных запросов и санитизации пользовательского ввода. Кроме того, использование HTTPS может помочь обеспечить шифрование данных при передаче и предотвратить атаки типа man-in-the-middle.В этом примере техники безопасности мы используем методы безопасного кодирования и проверки ввода для предотвращения уязвимостей безопасности. Функция// SecureForm.tsx import React, { useState } from 'react'; import axios from 'axios'; function SecureForm() { const [name, setName] = useState(''); const [email, setEmail] = useState(''); const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); try { await axios.post('/api/submit-form', { name, email }); alert('Form submitted successfully!'); } catch (error) { alert('Error submitting form. Please try again.'); } }; return ( <form onSubmit={handleSubmit}> <label> Name: <input type="text" value={name} onChange={(event) => setName(event.target.value)} /> </label> <label> Email: <input type="email" value={email} onChange={(event) => setEmail(event.target.value)} /> </label> <button type="submit">Submit</button> </form> ); } export default SecureForm;
handleSubmit
очищает и проверяет введенные пользователем данные перед отправкой на сервер. Кроме того, форма отправляется с использованием безопасного протокола HTTPS, чтобы обеспечить шифрование данных при передаче.
Обслуживание и поддержка
Обслуживание большого и сложного приложения React и TypeScript может быть сложной задачей, требующей надежной стратегии обслуживания. Хорошая стратегия обслуживания должна включать регулярные проверки кода, рефакторинг и обновление зависимостей. Проверки кода необходимы для поддержания качества кода и обеспечения соответствия кода стандартам вашей команды. Рефакторинг может помочь улучшить структуру и удобство сопровождения кода, упрощая его изменение и обновление в будущем. Обновление зависимостей может помочь гарантировать, что приложение использует последние и наиболее безопасные версии сторонних библиотек и платформ. Давайте подробнее рассмотрим пример стратегии обслуживания приложений React и TypeScript.В этом примере стратегии обслуживания мы используем// ExampleComponent.tsx import React from 'react'; import PropTypes from 'prop-types'; interface ExampleComponentProps { text: string; } function ExampleComponent({ text }: ExampleComponentProps) { return <div>{text}</div>; } ExampleComponent.propTypes = { text: PropTypes.string.isRequired, }; export default ExampleComponent;
propTypes
для документирования пропса, который ожидает наш компонент. Эта документация может помочь гарантировать, что наш код остается согласованным и поддерживаемым с течением времени. Кроме того, регулярные проверки и рефакторинг кода могут помочь сохранить качество кода и гарантировать, что код соответствует стандартам нашей команды.
В этом примере реализации HOC мы используем функцию// withAuthentication.tsx import React, { ComponentType } from 'react'; function withAuthentication<T>(WrappedComponent: ComponentType<T>) { return function WithAuthentication(props: T) { const isAuthenticated = true; // replace with actual authentication logic return isAuthenticated ? ( <WrappedComponent {...props} /> ) : ( <div>You must be logged in to view this content.</div> ); }; } export default withAuthentication;
withAuthentication
для добавления проверки подлинности к компоненту. Функция withAuthentication
принимает компонент и возвращает новый компонент с дополнительной логикой проверки подлинности. Новый компонент отображает упакованный компонент, если пользователь прошел проверку подлинности, или сообщение о том, что пользователь должен войти в систему в противном случае.
В этом примере реализации рендер пропса мы используем компонент// FetchData.tsx import React, { useState, useEffect } from 'react'; interface FetchDataProps { url: string; render: (data: any) => React.ReactNode; } function FetchData({ url, render }: FetchDataProps) { const [data, setData] = useState(null); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); useEffect(() => { setIsLoading(true); fetch(url) .then((response) => response.json()) .then((data) => { setData(data); setIsLoading(false); }) .catch((error) => { setError(error); setIsLoading(false); }); }, [url]); if (isLoading) { return <div>Loading...</div>; } if (error) { return <div>{error.message}</div>; } return <>{render(data)}</>; } export default FetchData;
FetchData
для извлечения данных из API и их рендеринга с помощью рендер пропса. Компонент FetchData
принимает url
, который указывает конечную точку API для извлечения, и render prop который является функцией, которая принимает извлеченные данные и возвращает JSX для рендеринга.
В этом примере реализации контекста мы используем// ThemeContext.tsx import React from 'react'; export const ThemeContext = React.createContext('light'); export const ThemeProvider = ({ children }: { children: React.ReactNode }) => ( <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider> );
ThemeContext
для предоставления темы нашему приложению. ThemeContext
создается с помощью функции createContext
, которая создает новый объект контекста. Компонент ThemeProvider
используется для предоставления ThemeContext
нашему приложению. ThemeProvider
принимает проп children
, который представляет собой дерево компонентов, которое должно быть обернуто контекстом темы.
- Redux: предсказуемый контейнер состояния для JavaScript приложений.
- React Router: библиотека для маршрутизации в приложениях React.
- Styled Components: библиотека для стилизации компонентов React с помощью CSS-in-JS.
- Formik: библиотека для построения форм в React.
- Storybook: инструмент для изолированного построения компонентов пользовательского интерфейса.
Итоги
Разработка продвинутых приложений на React и TypeScript требует надежной стратегии, которая включает в себя хорошо продуманную архитектуру, всестороннее тестирование, оптимизацию производительности, эффективный процесс разработки, доступность, безопасность и стратегию обслуживания. Следуя этим стратегиям и методам, вы можете создавать лучшие приложения, которые обеспечивают высококачественный пользовательский интерфейс для ваших пользователей. В этой статье мы рассмотрели многие передовые методы и стратегии React и TypeScript, в том числе:- Архитектура и состав компонентов
- Комплексное тестирование
- Оптимизация производительности
- Эффективный процесс разработки
- Доступность
- Безопасность
- Поддержка
5 библиотек для React, которые повысят уровень ваших проектов в 2023 году
год назад·1 мин. на чтение
В этой статье мы рассмотрим 5 библиотек, которые могут положительно повлиять на процесс разработки на React. Они решат некоторые из наиболее распространенных проблем в React разработке, такие как запрос данных, стили, доступность и управление состоянием.
Введение
Важно освоить основы React. И правда в том, что вы можете продвинуться довольно далеко без тонны дополнительных библиотек. Но есть несколько основополагающих инструментов, которые могут вывести ваш опыт разработки React на новый уровень. Эти библиотеки решают наиболее распространенные задачи в разработке React, такие как запросы данных с API, стилизация, доступность и управление состоянием, и они делают это минимальным и ненавязчивым способом. Это обеспечивает постепенное внедрение в кодовую базу. Мы составили список из пяти таких библиотек, о которых, по нашему мнению, вам следует знать.Почему это важно
Важно делиться инструментами разработки и влиять на взаимодействие с разработчиками. Когда у разработчиков есть доступ к нужным инструментам и ресурсам, они могут тратить больше времени на создание и меньше времени на отвлекающие факторы, накладные расходы и разочарования.React Query
Проще говоря, React Query делает получение данных в React намного удобнее. Но это не библиотека для получения данных как таковая. Вместо этого это библиотека управления состоянием, которая имеет дело с асинхронным состоянием сервера. Вы предоставляете ей асинхронную функцию, которая затем извлекает данные.useQuery
предоставляет вам кучу полезных утилит для обработки асинхронной функции:
- Флаг состояния загрузки
- Кэширование результатов
- Инвалидация и повторный запрос данных
useQuery
по всему приложению, и данные будут совместно использоваться.
https://github.com/TanStack/query
Zustand
Каждый React разработчик знает, как сложно шэрить состояние в приложении. При первом столкновении с проблемой вы неизбежно заканчиваете «просверливанием» данных по дереву компонентов (prop drilling). Излишне говорить, что это не делает код чистым и не является устойчивым в долгосрочной перспективе. К счастью, React придумал контекст для решения этой проблемы. Контекст отлично подходит, если все, что вам нужно сделать, это передать несколько значений вниз по дереву компонентов. Но он может стать громоздким для использования в более сложных глобальных сторах. Разработчики должны быть осторожны с последствиями для производительности, и некоторые разработчики не являются большими поклонниками Context API. Zustand предлагает чрезвычайно простой API, который позволяет создавать хранилище со значениями и функциями. Затем вы можете получить доступ к этому хранилищу из любого места в приложении для чтения и записи значений. Реактивность включена. Если вы хотите хранить данные вложенных объектов в своем хранилище, рассмотрите возможность использования Immer вместе с Zustand, чтобы легко изменить вложенное состояние. https://github.com/pmndrs/zustandFramer Motion
Анимация — один из лучших способов придать вашему React приложению современный вид. Но это непросто. Использование CSS анимации сложно и может привести к большому количеству кода. Напротив, Framer Motion предлагает мощный, но простой API для создания пользовательских анимаций. Он изначально интегрирован в экосистему React с набором хуков и компонентов. Например, этот код - все, что требуется для плавной анимации преобразования из круга в квадрат:Каждое значение в массиве представляет ключевой кадр для соответствующего свойства. Затем анимация проходит через этот цикл. Конечно, вы можете сделать гораздо больше, чем просто определить ключевые кадры с помощью Framer Motion. Вы также можете анимировать изменения в макете, обрабатывать жесты или анимировать на основе прокрутки. https://github.com/framer/motionimport { motion } from "framer-motion" export const MyComponent = () => ( <motion.div animate={{ scale: [1, 2, 2, 1, 1], rotate: [0, 0, 270, 270, 0], borderRadius: ["20%", "20%", "50%", "50%", "20%"], }} /> )
Class Variance Authority (CVA)
TailwindCSS быстро превратился в основной способ стилизации приложений React. Но создание многоразовых элементов пользовательского интерфейса с его помощью может быть сложной задачей. Допустим, вы создаете свою собственную кнопку с помощью Tailwind. Так как вы хотите повторно использовать его во всем своем приложении, вы создаете компонент. Но теперь вам нужно несколько вариантов этого компонента. Основной стиль и дополнительный стиль. Итак, теперь вам нужно собрать классы Tailwind вместе в соответствии со значением пропса. Теперь вам также нужны разные цвета и разные размеры для вашей кнопки. Так что добавьте немного пропса и еще больше условной логики, чтобы выяснить правильную комбинацию классов Tailwind. Это может увеличить кодовую базу и усложнить понимание. CVA, сокращение от Class Variance Authority. Это простая библиотека, которая избавляет от необходимости создавать компонуемые компоненты React с именами классов Tailwind. Возьмем этот пример из их документации:Мы декларативно описываем стили кнопок для каждого значения параметра. Затем CVA выполняет работу по выяснению правильной комбинации стилей. Мы даже можем указать варианты по умолчанию, чтобы сделать определенные свойства необязательными. https://github.com/joe-bell/cvaimport React from "react"; import { cva, type VariantProps } from "class-variance-authority"; const button = cva("button", { variants: { intent: { primary: [ "bg-blue-500", "text-white", "border-transparent", "hover:bg-blue-600", ], secondary: [ "bg-white", "text-gray-800", "border-gray-400", "hover:bg-gray-100", ], }, size: { small: ["text-sm", "py-1", "px-2"], medium: ["text-base", "py-2", "px-4"], }, }, compoundVariants: [{ intent: "primary", size: "medium", class: "uppercase" }], defaultVariants: { intent: "primary", size: "medium", }, }); export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof button> {} export const Button: React.FC<ButtonProps> = ({ className, intent, size, ...props }) => <button className={button({ intent, size, className })} {...props} />;