Web Analytics Made Easy - StatCounter
Главная Блог Краткое введение в React для разработчиков на Angular

Краткое введение в React для разработчиков на Angular

Краткое введение в React для разработчиков на Angular

Введение

Это не очередная статья о священной войне «что лучше?», Это статья, которая проводит параллели между концепциями Angular 2 и React и должна помочь быстро начать с React, если вы знаете Angular 2.

Основные отличия

Основное различие между Angular 2 и React заключается в том, что Angular 2 - это фреймворк, а React - библиотека пользовательского интерфейса. То есть для создания общего приложения с React вам понадобятся другие библиотеки, которые обеспечат:

  • маршрутизация (реакция-роутер)
  • управление состоянием (Redux, MobX ... но вы можете обойтись без менеджера состояний (не очень рекомендуется). Да, в Angular он тоже не встроенный, вы можете использовать отличный @ngrx или просто сервисы)
  • проверка формы (реакция-проверка, форма-реакция, редукс-форма)
  • анимации
  • HTTP абстракция (или просто использовать fetch)
  • i18n

Angular 2+ предоставляет (но не требует) большинство из них прямо из коробки и имеет способ, официальные примеры и руководства по стилю, как все это использовать. Концепция Angular более монолитна и связана с SPA, сам React небольшой и быстрый, и его можно использовать не только для SPA, но и для «анимации» только частей классического серверного приложения (PHP / Ruby / Python или других) , как старый AngularJS. Таким образом, они даже могут быть использованы вместе.

На все, что у меня есть следующее мнение atm (я фанат (но не фанатик) Angular):

  • если вам нужно построить большой, хорошо структурированный, SPA уровня предприятия - Angular 2+ - это хороший выбор
  • если вам нужно создать что-то маленькое или что-то быстро загружаемое (если размер пакета слишком важен для вас), или ваше приложение не является SPA - тогда вам лучше проверить React / Preact / VueJS (последнее, возможно, лучше всего в наши дни) )

После того, как я попробовал React, я теперь понимаю, почему он так популярен, и не только потому, что «Facebook использует его» - причина в его первоначальной простоте. Это похоже на «современный jQuery» наших дней (в этих словах нет ничего насмешливого, наоборот), вы можете выучить его довольно быстро, если вы хороший JavaScript-разработчик (и если «не очень» тоже, чтобы это могло стать проблемой в будущем ТБХ, барьер для входа слишком низок).

Когда начать?

Я действительно рекомендую начать с официальной документации и раздела «Документы», он не такой большой, вы можете получить все за один день. Документация очень хорошая и прямолинейная, в ней также упоминаются все основные концепции и передовые практики как «чистые компоненты» и «единый источник правды», которые следует учитывать и использовать во время разработки, чтобы они были «свободными от ошибок» (хаха), «легко тестируемыми». »И« простое для понимания »приложение.

Что насчет TypeScript? / Быстрый старт

Как хороший разработчик Angular 2+, вы также захотите использовать TypeScript с React. Вот очень хорошее описание того, который использует официальный шаблон React (так называемое create-реагировать-приложение).

Что насчет CLI / scaffolding?

У React нет официального CLI, и он почти не нужен. Все полезные скрипты уже выставлены на package.json. Как насчет структуры проекта?

React docs не содержит этой информации, потому что это библиотека, не забываете? :) Как я обнаружил, в основном используется следующая структура (внутри папки src):

  • actions - ваши действия Redux (если вы используете его)
  • components - ваши компоненты (в основном чистые)
  • containers - ваши высокоуровневые компоненты, такие как страницы / экраны
  • reducers - ваши редукторы Redux (если вы его используете)
  • store / stores - определение вашего магазина Redux или магазинов MobX (если вы их используете)
  • styles - ваши стили для всего приложения (используя импорт Webpack)

Но это не строгое. Вы можете использовать папку components без containers и вкладывать ваши компоненты и подкомпоненты соответственно в подпапки как разновидность модулей в мире Angular. Хорошие примеры:

Как насчет компонентов?

Если вы читаете официальную документацию, вы должны уже много знать об этом. Компоненты в React - это просто (в идеале «чистые») функции, которые получают данные в виде параметров и в результате возвращают HTML / UI. Здесь у нас есть следующие аналоги с Angular:

  • selector - имя класса компонента React является вашим селектором. Должно начинаться с заглавной буквы. Интересно, что вы не найдете этот «пользовательский тег» в окончательном DOM, как в обычном приложении Angular, потому что компоненты просто функции, которые визуализируют материал с помощью метода render, они не создают дополнительные узлы DOM. Это может быть очень удобно, если у вас есть готовый шаблон, потому что он не нарушит компоновку с тегами компонента.
  • @Input() - для этого у компонента React есть props, то есть объект, который содержит все входные данные для компонента, они не разделены, как в Angular. Props не должны быть видоизменены, для этого компонент имеет состояние (которое должно быть изменено через setState, а не напрямую)
  • @Output() - React не имеет этой концепции отдельно, вы должны передать свой родительский обратный вызов в подпорки вашего дочернего компонента и явно вызвать его внутри дочернего компонента. По-прежнему выглядит немного странно для меня, а не как-то в соответствии с моим пониманием SOLID.
  • EventEmitter - не используется, см. Выше
  • @ViewChild - для этого в React есть специальное ключевое слово ref, но по возможности его следует избегать в пользу props.
  • ngOnInit и другие хуки

Как насчет шаблонов?

React использует JSX - собственное расширение синтаксиса для JavaScript, компоновка живет вместе с вашим кодом и смешивается с ним в одном файле. Изначально это может выглядеть очень грязно, но если вы все сделаете правильно, вы увидите, что он сияет. IDE хорошо помогает в этом. Поскольку мы используем TypeScript, файлы будут иметь расширение .tsx.

Как насчет SCSS / стилей?

Официальный шаблон React create-response-app не имеет встроенной поддержки SASS / SCSS или других препроцессоров, но у них есть документация по настройке без извлечения конфигурации Webpack (или вы можете настроить IDE для сборки с помощью Watcher, но это не 100% пуленепробиваемый при строительстве). Вам все равно нужно будет импортировать ваши CSS-файлы с помощью import, как и любые другие файлы внутри вашего компонента, веб-пакет позаботится о том, чтобы они были правильно включены. Если вы хотите импортировать файлы SCSS напрямую без этих «костылей», вам нужно будет удалить конфигурацию Webpack и добавить в нее надлежащие правила.

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

UPD: проверьте библиотеку, в которой используется синтаксис тегированных шаблонов ES2015, который позволяет использовать классический синтаксис CSS для написания ваших стилей и предотвращает пересечение ненужных стилей в различных компонентах, как в Angular.

Как насчет маршрутизации?

Вам нужно будет использовать react-router - самый популярный. Вы будете ошеломлены его простотой и декларативным характером, потому что вы определяете маршруты как компоненты (как почти все в React) прямо в вашем макете. Даже перенаправления выполняются путем показа / рендеринга компонента <Redirect… /> в макете в нужный момент времени.

UPD: Router5 может предоставить лучший, более структурированный способ организации всей маршрутизации и решить проблему с согласованностью построения ссылок.

Как насчет сервисов?

Для этого вы можете использовать чистые классы ES6, НО я бы порекомендовал использовать MobX в качестве базы для сервисов, и вы одновременно получаете менеджера состояний - BOOM! С MobX вы сможете писать подобные Angular сервисы, называемые здесь магазинами, с собственными видами наблюдаемых, которые привносят реактивные функции в рендеринг React, а не только в рендеринг… Просто помните, что нужно изменять состояние только с помощью «действий», чтобы оставаться чистыми.

Хороший пример сервиса, написанного с использованием MobX, здесь (вам не нужно использовать $req оттуда). Также посмотрите здесь, чтобы inject, чтобы вам не нужно было передавать хранилища через реквизиты по всей иерархии до тех компонентов, где они вам нужны, но учтите: передача данных через реквизиты (данные, а не хранилища) по-прежнему является предпочтительным способом передачи данных в субкомпоненты.

MobX написан на TypeScript, что является для нас плюсом и использует огромные возможности декораторов для значительного сокращения стандартного кода (по сравнению с Redux).

Как насчет модулей?

Там нет модулей. Смотрите «Как насчет структуры проекта?» Как насчет государственного управления?

Я думаю, что вы уже слышали о Redux, и вы будете знакомы с ним, если будете использовать @ ngrx / store, но я все же рекомендую использовать MobX, как я уже говорил выше, это действительно круто и на английском!

UPD: в наши дни все больше людей смотрят на GraphQL, который может заменить весь Redux для вашего приложения. Проверьте эти ссылки и официальные документы по местному государственному управлению. Также я обнаружил MobX-дерево состояний MobX, которое также можно использовать. Так что, оставайтесь непредубежденными, Redux - не серебряная пуля.

Как насчет отложенной загрузки / разделения кода?

На эту тему есть статья по адресу: https://reacttraining.com/react-router/web/guides/code-splitting.

А как насчет DI?

React не использует DI по умолчанию, и в этом нет необходимости. MobX имеет механизм провайдеров, который может использоваться в качестве DI практически для любого класса / объекта.

Когда вам нужно выполнить модульное тестирование компонента с дочерними компонентами / подкомпонентами, вы можете использовать Enzyme с его «неглубоким рендерингом API», поэтому не нужно будет имитировать подкомпоненты, где DI обычно используется в других парадигмах, и если вы следуете хорошим практики на чистых компонентах, тестирование не должно быть проблемой.

А как насчет юнит-тестов?

Там широко используется Jest (со встроенным Jasmine), вместе с Enzyme и всем, что хорошо работает.

Если вы будете бороться с «как я могу протестировать компонент, который использует асинхронное извлечение данных в componentDidMount или async setState» и сбоем Jest - проверьте мой ответ по StackOverflow, это действительно сложная проблема.

А как насчет конфигурации веб-пакета?

Вы можете получить его с помощью yarn eject.

А как насчет конфигов среды?

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

А как насчет i18n / Интернационализация?

Это все еще открытый вопрос для меня, для этого есть много людей. Лучшее, что я могу найти, что близко к широко используемому @ ngx-translate, - это https://github.com/i18next/react-i18next.

Вот и все

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

Если я пропустил что-то важное или ошибся в некоторых деталях - пишите в комментариях. Спасибо и приятного кодирования :)

источник Quick introduction to React for Angular developers
автор Владимир Толстиков