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

Содержание

Class Component

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

import React from "react";

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, - это набор скриптов, который долгое время был стандартным способом быстро поднять React-приложение без ручной настройки bundler и tooling.

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

Ссылки: docs | website

Enzyme

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

Сегодня Enzyme считается legacy-инструментом. В новых проектах чаще используют React Testing Library, потому что она лучше поддерживает подход “тестируй поведение, а не детали реализации”.

Ссылки: 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

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

В современном React-ландшафте Flow встречается заметно реже, чем TypeScript, но термин все еще полезно знать при работе со старыми проектами.

Ссылки: 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 - это пакет для runtime-проверки props в React. Исторически это был первый массовый способ валидации интерфейса компонентов до широкого распространения TypeScript.

Сегодня PropTypes используют реже, но они все еще полезны в JavaScript-проектах без TypeScript и в библиотеках, где нужна проверка во время выполнения.

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

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

class MyComponent extends React.Component {
  render() {
    return <p>{this.props.title}</p>;
  }
}

MyComponent.propTypes = {
  title: PropTypes.string.isRequired,
  // 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 выросла из-за ее ориентации на поведение компонента, а не на его внутреннюю реализацию.

По сравнению с Enzyme React Testing Library сильнее подталкивает к тестам через доступные роли, текст и пользовательские действия.

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

Ref

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

Применение:

import { useRef } from "react";

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

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

Это особенно полезно при работе с DOM API, фокусом, измерениями, анимацией и интеграцией со сторонними библиотеками.

Ссылки: docs

Stateless Functional Component

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

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

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

Styled Components

Styled Components - это библиотека CSS-in-JS, которая позволяет описывать стили рядом с компонентом и строить API стилизации через props и темы.

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

TypeScript

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

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

Webpack

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

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

Ссылки: docs | website