Как испортить проект React и, возможно, даже отказаться от библиотеки.

Когда я заканчивал этот пост, моя шестилетняя дочь спросила, что я делаю. Я сказал ей, что пишу о том, как иногда люди создают программы неправильно. Она смущенно посмотрела на меня: «Зачем кому-то это нужно !?»

Реальность такова, что никто никогда не запускает проект с намерением потерпеть неудачу, но поскольку я работал с React в течение последних нескольких лет, я видел несколько общих паттернов неудач как у меня, так и у окружающих. Здесь они находятся в произвольном порядке.

1. Изучение ____ во время изучения React

React - фантастическая библиотека. Это не ракетостроение, но нужно приложить немного усилий, чтобы начать думать на React. Чем меньше вещей вы узнаете за один раз, тем легче будет сосредоточиться на том, что такое React, а что - OtherStuff ™.

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

Начать с Javascript

По сути, React - это библиотека javascript, о которой следует помнить, если вы впервые начинаете заниматься фронтенд-программированием. Возможно, вы пытаетесь создать веб-приложение после десяти лет работы на сервере. Возможно, вы только впервые занимаетесь разработкой программного обеспечения. Независимо от вашего уровня знаний, найдите время, чтобы понять ванильный Javascript.

Я рекомендую взять копию Javascript: The Good Parts. Это краткое чтение, и это отличный ресурс для понимания 20% языка, который приведет к 80% вашего успеха в нем.

Попробуйте синтаксис ES6

Можно ли использовать React без ES6? Абсолютно. Однако в большинстве примеров и руководств по библиотеке используется синтаксис ES6. И давайте посмотрим правде в глаза, новый синтаксис - действительно полезное дополнение к языку. Даже если вы не работаете с React, ES6 - это хорошо. Вот некоторые из многих вещей, которые будут иметь гораздо больше смысла, если у вас есть разумные практические знания синтаксиса:

Синтаксис импорт / экспорт - это новый синтаксис требования:

import React, { PureComponent} from 'react';

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

const { title, isActive, onClick } = this.props;

А классы - это один из множества способов создания компонентов:

export class MyComponent extends PureComponent {
  componentDidUpdate(prevProps, prevState){
    ...
  }
  render() {
    ...
  }
}

Рассмотрим Typescript

Typescript - это расширенный синтаксис и транспилятор Javascript от Microsoft. Для крупных проектов и больших команд это определенная добавленная стоимость. Для небольших личных проектов ваш опыт может отличаться. React действительно можно использовать без Typescript, и некоторые люди даже не рекомендуют его использовать. Однако, если вы хотите попробовать, это вопрос уровня синтаксиса, поэтому я рекомендую ознакомиться с ним, прежде чем выбирать React. Таким образом, когда вы просматриваете примеры React + Typescript, вам будет легче различать эти две концепции.

Изучите React

Теперь, когда вы знакомы с конструкциями на уровне языка и синтаксиса, вы готовы сосредоточиться на изучении React. Хотя вы можете не использовать его в производстве, Create React App - отличный способ быстро создать новое приложение.

Использование «шаблонного» приложения позволяет вам сосредоточиться на том, чтобы сразу перейти к созданию компонентов из примеров, вместо того, чтобы рассуждать о структурах папок, настройке babel и многих других проблемах, не связанных с React. Конечно, со временем вы должны научиться этим вещам, но на данный момент они будут больше отвлекать, чем что-либо еще.

Помимо чтения примеров из Интернета, я настоятельно рекомендую прочитать ВСЕ документы React. Неотъемлемой частью мощной библиотеки является документация мирового уровня, и React не исключение, так что воспользуйтесь всеми преимуществами этого.

Исследуйте OtherStuff ™

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

2. Переход к продвинутым шаблонам React

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

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

Компонент высшего порядка: функция, которая принимает компонент и возвращает новый компонент, который представляет собой метод повторного использования логики компонента.

Render Props: метод совместного использования кода между компонентами React с использованием свойства, значение которого является функцией.

Редуктор состояния: золотая середина между неконтролируемым и контролируемым компонентами.

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

3. Перестройка критически важного приложения на React в качестве первого проекта.

Часть обучения, особенно в области программного обеспечения, - это пробовать разные вещи. Иногда эти вещи работают к лучшему, иногда только совершая ошибки, вы узнаете, что такое «правильный путь». Другими словами, если вы не гений в буквальном смысле слова, ваш первый проект на React будет содержать несколько грубых ошибок. Это нормально.

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

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

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

4. Использование Redux до того, как он вам действительно понадобится.

Redux - это библиотека, которую все любят ненавидеть. Некоторые из них - просто обычные повседневные огненные войны. По сути, Redux - это инструмент для управления состоянием приложения. Другие инструменты делают то же самое, включая встроенные в React функции состояния и контекста компонентов.

Redux - это компромисс между рассуждениями об асинхронной изменчивости и косвенности. Для небольших проектов боль асинхронного изменения состояния может быть не так уж и плоха. Есть ли другие способы управления состоянием для больших приложений? Абсолютно!

Использование неправильного инструмента (или, по крайней мере, не лучшего инструмента для работы) оставит неприятный привкус во рту. В таком случае винить даже инструмент несложно. На самом деле это одна из причин, по которой так настоятельно рекомендуется изучать React до Redux. Если вы можете успешно создать приложение без Redux, стоимость и сложность его добавления никоим образом не добавят ценности.

При этом также важно понимать, почему компромисс Redux обеспечивает ценность. Добавление Redux в начале проекта обходится дешевле, чем вставлять его в затыкание, когда «состояние поражает поклонников». Требуется немного опыта, чтобы понять видение проекта и с самого начала понять, нужен ли Redux.

5. Использование альфа-функций в производстве

Команда React постоянно работает над новыми классными вещами. Если вы знакомы с React хотя бы 10 минут, значит, вы уже слышали о React Hooks. Какими бы крутыми ни были хуки, вам, вероятно, не стоит использовать их в продакшене.

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

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

При этом React Team проделывает абсолютно фантастическую работу по обеспечению обратной совместимости при добавлении новых функций. Из-за этого легко загрузить последнюю версию React, а затем медленно поэкспериментировать с тем, как новые функции будут работать в ВАШЕМ приложении. Эта стратегия снижает риск и позволяет постепенно адаптироваться к новым вещам. Как вы думаете, собирается ли Facebook провести рефакторинг одиннадцати миллиардов строк кода, чтобы в одночасье удалить компоненты класса? Я тоже. 😃

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

6. Перенос проекта напрямую с _____ на React

У всех языков и фреймворков есть индивидуальности. У каждого из них есть свой набор причуд и паттернов, которые приводят к идиоматическим способам кодирования. React имеет ___ контекст. В Angular есть директивы. Vue просмотрел свойства. У Эльма нет null.

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

Между любыми двумя фреймворками пользовательского интерфейса нет однозначного сходства, а это означает, что вы не можете просто начать портировать проект Angular компонент за компонентом в React. Код, который может законно жить в компоненте Angular, может жить в Redux Action Creator в вашей новой кодовой базе. Такие вещи, как RxJS, просто не имеют прямого аналога в (ванильном) React.

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

7. Игнорирование рендеринга на стороне сервера

Хорошо это или плохо, но Javascript также работает на сервере. Запустив службу в NodeJS, вы можете запустить React на сервере для рендеринга страниц до того, как они попадут в браузер. Рендеринг на стороне сервера (SSR) не требуется, но я обнаружил, что он используется не так часто, как мог бы.

Два основных преимущества SRR:

Меньшее время до первой осмысленной отрисовки. Браузер может немедленно начать визуализацию страницы без необходимости оценивать какой-либо код Javascript или делать какие-либо дальнейшие сетевые запросы.

Лучшее SEO: поисковые системы, сканирующие ваше приложение, получат реальную страницу, а не пустой документ с огромным пакетом.

Но это еще не все ромашки и солнце. Выяснить, как настроить начальное состояние приложения во время рендеринга на стороне сервера, - нетривиальная задача. Это также требует, чтобы вы запустили реальный сервер (или «бессерверную» альтернативу с поддержкой NodeJS), на котором будет запускаться ваше приложение React.

Одна из самых сложных частей всех усилий - убедиться, что код только для сервера не содержит зависимостей API браузера и наоборот. Например, window и document не определены на сервере. Если каждый путь кода в функции рендеринга компонента зависит от document, то этот компонент сломается при рендеринге на сервере. Если вы входите в проект, думая только о рендеринге на стороне клиента, тогда в будущем будет намного сложнее реализовать SSR.

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

Нравится то, что вы видите?

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