Это вторая часть статьи. Если вы пропустили часть 1, возможно, вам стоит посмотреть часть 1.
11. Что такое ReactDOMServer?
Объект ReactDOMServer позволяет отображать компоненты в статической разметке (обычно используется на сервере узла). Этот объект в основном используется для рендеринга на стороне сервера (SSR).
12. Что такое приложение create-react-app и его преимущества?
Create React App - это инструмент, созданный разработчиками Facebook, чтобы помочь вам создавать приложения React. Это избавляет вас от трудоемкой установки и настройки. Вы просто запускаете одну команду и создаете приложение для реагирования, которое настраивает инструменты, необходимые для запуска вашего проекта React.
13. Что такое React Router?
React Router - это набор компонентов навигации, которые декларативно объединяются с вашим приложением. Это помогает вам невероятно быстро добавлять новые экраны и потоки в ваше приложение, сохраняя при этом синхронизацию URL-адреса с тем, что отображается на странице.
14. Что такое Shallow Renderer при тестировании ReactJS?
При написании модульных тестов для React может оказаться полезным неглубокий рендеринг. Неглубокий рендеринг позволяет вам рендерить компонент «на один уровень в глубину» и утверждать факты о том, что возвращает его метод рендеринга, не беспокоясь о поведении дочерних компонентов, которые не создаются и не рендерируются. Для этого не требуется DOM.
Например, если у вас есть следующий компонент:
function MyComponent() {
return (
<div>
<span className="heading">Title</span>
<Subcomponent foo="bar" />
</div>
);
}Тогда вы можете утверждать:
import ShallowRenderer from 'react-test-renderer/shallow';
// in your test:
const renderer = new ShallowRenderer();
renderer.render(<MyComponent />);
const result = renderer.getRenderOutput();
expect(result.type).toBe('div');
expect(result.props.children).toEqual([
<span className="heading">Title</span>,
<Subcomponent foo="bar" />
]);15. Что такое JEST?
Jest - это фреймворк для модульного тестирования JavaScript, созданный Facebook на основе Jasmine, который обеспечивает автоматическое создание макетов и среду jsdom. Его часто используют для тестирования компонентов React.
16. Что такое Redux?
Redux - это контейнер с предсказуемым состоянием для приложений JavaScript. (Не путать с фреймворком WordPress - Redux Framework.)
Он помогает вам писать приложения, которые ведут себя согласованно, работают в разных средах (клиентских, серверных и собственных) и легко тестируются. Вдобавок ко всему, он обеспечивает отличные возможности разработчика, такие как редактирование кода в реальном времени в сочетании с отладчиком, путешествующим во времени.
Вы можете использовать Redux вместе с React или с любой другой библиотекой представлений. Он крошечный (2кБ, включая зависимости).
Есть три принципа Redux:
Единый источник истины: состояние всего вашего приложения хранится в дереве объектов в едином хранилище.
Это упрощает создание универсальных приложений, поскольку состояние вашего сервера может быть сериализовано и передано в клиент без дополнительных усилий по кодированию. Единое дерево состояний также упрощает отладку или проверку приложения; это также позволяет вам сохранять состояние вашего приложения в разработке, что ускоряет цикл разработки. Некоторые функции, которые традиционно было трудно реализовать - например, Undo / Redo - могут внезапно стать тривиальными для реализации, если все ваше состояние хранится в одном дереве.
Состояние доступно только для чтения: единственный способ изменить состояние - вызвать действие, объект, описывающий, что произошло.
Это гарантирует, что ни представления, ни сетевые обратные вызовы никогда не будут записывать напрямую в состояние. Вместо этого они выражают намерение преобразовать государство. Поскольку все изменения централизованы и происходят одно за другим в строгом порядке, нет никаких сложных условий гонки, на которые нужно обращать внимание. Поскольку действия представляют собой простые объекты, их можно регистрировать, сериализовать, сохранять, а затем воспроизводить для целей отладки или тестирования.
Изменения вносятся с помощью чистых функций: чтобы указать, как дерево состояний преобразуется с помощью действий, вы пишете чистые редукторы.
Редукторы - это просто чистые функции, которые принимают предыдущее состояние и действие и возвращают следующее состояние. Не забывайте возвращать новые объекты состояния вместо изменения предыдущего состояния. Вы можете начать с одного редуктора и по мере роста вашего приложения разбивать его на меньшие редукторы, которые управляют определенными частями дерева состояний. Поскольку редукторы - это просто функции, вы можете контролировать порядок, в котором они вызываются, передавать дополнительные данные или даже создавать повторно используемые редукторы для общих задач, таких как разбиение на страницы.
17. Что такое Webpack?
Webpack - это сборщик модулей: инструмент, который может анализировать структуру вашего проекта, находить модули JavaScript и другие ресурсы для объединения и упаковки их для браузера.
18. Что такое машинописный текст?
TypeScript - это надмножество JavaScript, которое в первую очередь обеспечивает дополнительную статическую типизацию, классы и интерфейсы. Одним из больших преимуществ является то, что IDE предоставляют более богатую среду для выявления распространенных ошибок при вводе кода.
19. Каковы популярные линтинги, специфичные для React?
ESLint - популярный линтер для различных проектов JavaScript. Доступны плагины, которые анализируют определенные стили кода. Одним из наиболее распространенных для React является пакет npm под названием eslint-plugin-react. Кроме того, TSLint - это расширяемый инструмент статического анализа, который проверяет код TypeScript на читабельность, ремонтопригодность и функциональные ошибки.
20. Пряжа против НПМ?
Yarn и npm - два хорошо известных менеджера пакетов JavaScript. Если вы не знакомы с тем, что делает диспетчер пакетов, по сути, это способ автоматизировать процесс установки, обновления, настройки и удаления частей программного обеспечения (пакетов AKA), полученных из глобального реестра.
Скорость:
Пряжа оказывается стабильно быстрее, чем npm.
Другие замечательные особенности Yarn
- Yarn использует контрольные суммы для проверки целостности каждого установленного пакета перед выполнением кода.
- Краткий формат файла блокировки и детерминированный алгоритм установки. Это означает, что Yarn может гарантировать, что установка, которая работала в одной системе, будет работать точно так же в любой другой системе. Разве ты не этого всегда хотел?
- npm и bower - установите любой пакет из npm или из Bower и сохраните рабочий процесс пакетов таким же.
- Плоский режим. Устранение несоответствия версий зависимостей одной версии, чтобы избежать дублирования.
- Устойчивость сети: сбой одного запроса не приведет к сбою установки. В случае неудачи запросы повторяются.
Спасибо за прочтение! 🚀
Если этот пост может вам помочь, дайте мне несколько хлопков для вдохновения. Не стесняйтесь подписываться на меня на Medium или в моей учетной записи Github. Если вы хотите внести свой вклад, напишите несколько ответов ниже, спасибо.
