Часто используемые слова в React

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

Содержание

• Class Component
• Component
• CRA
• Enzyme
• ESLint
• Functional Component
• Flow
• Higher-order component
• Hooks
• Jest
• Linting
• Props
• PropTypes
• React Testing Library
• Ref
• Stateless Functional Component
• Styled Components
• TypeScript
• Webpack

Class Component

Class Component - это компонент, написанный с использованием класса JavaScript ES6.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Component

Component - это (чаще всего) функция, которая принимает props (свойства) и возвращает объекты для отображения в браузере.

См. также: Class Component, Functional Component.

CRA

CRA, или create-react-app, относится к набору скриптов с открытым исходным кодом Facebook, чтобы упростить начало работы с приложением React. Он идет с собственными свойствами для webpack, testing, and linting.

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

Ссылки: docs | website

Enzyme

Enzyme - это утилита, которая отображает компоненты React в тестах и предоставляет методы для запроса их состояния и свойств.

Используется вместе с Jest.

Ссылки: docs | npm

ESLint

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

Эти «способы улучшить код» обычно распространяются в виде набора правил, таких как eslint-config-react-app.

Некоторые наборы правил считаются крайне самодостаточными (например, eslint-config-airbnb) и не рекомендуются к частому использованию.

Ссылки: статья | docs | website

Functional Component

Компонент, написанный с использованием функции JavaScript.

Благодаря появлению хуков, функциональные компоненты теперь считаются «способом» написания компонентов.

Функциональные компоненты могут быть написаны либо с помощью стрелочной функции, либо при помощи ключевого слова function.

Используя стрелочную функцию:

const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>;
};

Использование ключевого слова function:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Flow

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

Отходит на второй план из-за стремительного роста TypeScript, тысяч нерешенных проблем с GitHub и низкой производительности.

Ссылки: docs | website

Higher-order component (HOC)

Компонент высшего порядка. Замечательный способ обозначить компонент, единственная цель которого - обернуть другие компоненты и передать props.

Ссылки: docs

Hooks

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

Ссылки: статья | docs | hooks reference | rules of hooks

Jest

Jest - это среда тестирования, отвечающая за выполнение наших тестов. Поддерживает как Node, так и React (и другие JS-фреймворки, языки).

Ссылки: docs | website

Linting

Линтинг означает запуск программы, которая анализирует наш код на наличие проблем. Проблемы могут означать проблемы с синтаксисом или стилем, а также потенциальные ошибки.

Наиболее часто используемый линтер в React - это ESLint.

Props

Props - это аргументы, которые вы передаете в качестве входных данных компоненту в React.

PropTypes

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

Фактически заменен Flow и TypeScript.

Использование (из документации):

import React from 'react';
import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    // ... do things with the props
  }
}

MyComponent.propTypes = {
  // These are optional by default
  optionalArray: PropTypes.array,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalString: PropTypes.string,
  requiredFunc: PropTypes.func.isRequired,

  // A value of any data type, required
  requiredAny: PropTypes.any.isRequired,
};

Ссылки: npm | репо

React Testing Library (RTL)

Библиотека для тестирования React, буквально названная «Библиотека тестирования React». React Testing Library также часто называют RTL.

Популярность RTL выросла из-за её ориентации на функциональность тестирования, а не на детали реализации, а также из-за включения в приложение create-react-app.

По сравнению с ранее существующей библиотекой Enzyme сейчас она более популярна. Обе библиотеки предоставляют методы для рендеринга компонентов React в тестах, однако RTL предоставляет функции, которые уводят разработчиков от деталей реализации тестирования.

Ссылки: статья | npm | website

Ref

Ref, сокращение от ссылки, используется для доступа и изменения дочернего элемента React-компонента.

Применение:

function MyFunctionalComponent() {
  const myDiv = useRef(null);

  return <div ref={myDiv} />;
}

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

Ссылки: docs

Stateless Functional Component

Как мы называли функциональные компоненты до того, как хуки были добавлены в React.

По сути, функциональный компонент без состояния - это и есть функциональный компонент:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Styled Components

Styled Components - это библиотека, которая позволяет разработчикам стилизовать свои компоненты, записывая CSS в свои файлы JavaScript (решение известное как CSS-in-JS).

Ссылки: статья | docs | website

TypeScript

TypeScript - это типизированный язык, который компилируется в JavaScript, быстро проверяет типы во всей кодовой базе во время компиляции.

Теперь (опционально) входит в состав CRA.

Ссылки: статья | cheatsheet | free book | handbook | website

Webpack

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

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

Ссылки: docs | website