Как использовать инверсию управления в javascript и в reactjs для упрощения работы с кодом

Содержание

Step 5: Add Inverse Data Flow

See the Pen Thinking In React: Step 5 on CodePen.


So far, we’ve built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it’s time to support data flowing the other way: the form components deep in the hierarchy need to update the state in .

React makes this data flow explicit to help you understand how your program works, but it does require a little more typing than traditional two-way data binding.

If you try to type or check the box in the current version of the example, you’ll see that React ignores your input. This is intentional, as we’ve set the prop of the to always be equal to the passed in from .

Let’s think about what we want to happen. We want to make sure that whenever the user changes the form, we update the state to reflect the user input. Since components should only update their own state, will pass callbacks to that will fire whenever the state should be updated. We can use the event on the inputs to be notified of it. The callbacks passed by will call , and the app will be updated.

Свойства экземпляра

содержит свойства, которые были определены тем, кто вызывает этот компонент. Подробнее об этом можно узнать в разделе Компоненты и пропсы

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

Состояние содержит данные, специфичные для этого компонента. Они могут измениться со временем. Состояние определяется пользователем и должно быть простым объектом JavaScript.

Вам не нужно вставлять в состояние значение, если оно не используется для рендера или потока данных (например, идентификатор таймера). Такие значения можно определить как поля экземпляра компонента.

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

Никогда не мутируйте напрямую, так как более поздний вызов может перезаписать эту мутацию. Относитесь к  как к иммутабельному объекту.

Попробовать React

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

Интерактивные онлайн-площадки

Если вам нравится “играться” с React, вы можете использовать онлайн-площадку для кода. Попробуйте шаблон Hello World на CodePen или CodeSandbox.

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

Добавление React на сайт

You can add React to an HTML page in one minute. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.

Создание нового React-приложения

При начале нового проекта React простая HTML-страница с тегами скрипта всё же может быть лучшим вариантом. Это займет всего минуту!

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

Gradual Adoption Strategy

We know that React developers are focused on shipping products and don’t have time to look into every new API that’s being released. Hooks are very new, and it might be better to wait for more examples and tutorials before considering learning or adopting them.

We also understand that the bar for adding a new primitive to React is extremely high. For curious readers, we have prepared a detailed RFC that dives into motivation with more details, and provides extra perspective on the specific design decisions and related prior art.

Crucially, Hooks work side-by-side with existing code so you can adopt them gradually. There is no rush to migrate to Hooks. We recommend avoiding any “big rewrites”, especially for existing, complex class components. It takes a bit of a mindshift to start “thinking in Hooks”. In our experience, it’s best to practice using Hooks in new and non-critical components first, and ensure that everybody on your team feels comfortable with them. After you give Hooks a try, please feel free to send us feedback, positive or negative.

We intend for Hooks to cover all existing use cases for classes, but we will keep supporting class components for the foreseeable future. At Facebook, we have tens of thousands of components written as classes, and we have absolutely no plans to rewrite them. Instead, we are starting to use Hooks in the new code side by side with classes.

Инверсия управления

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

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

Что такое Инверсия Управления в коде?

Для начала, вот очень надуманный пример:

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

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

В целом, это довольно простая абстракция. Но ее можно упростить. Часто бывает так, что абстракцию, в которую добавляли новый функционал, можно было бы сильно упростить для тех вариантов использования которые она фактически и поддерживает. К сожалению, как только абстракция начинает что-то поддерживать (например, выполнение ), мы боимся удалять эту функциональность из-за того что это может сломать код который на нее полагается.

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

Окей, давайте теперь напишем более продуманную абстракцию к этой функции и применим метод инверсии управления для поддержки всех нужных нам вариантов использования:

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

Но была ли предыдущая версия этой абстракции настолько уж плохой? Возможно, нет. Но так как мы перевернули управление, теперь мы можем поддерживать гораздо более уникальные варианты использования:

Только представьте если бы вам нужно было добавить поддержку для этого варианта использования, не применяя инверсию управления? Да это было бы просто нелепо.

Плохой API?


Одна из самых распространенных жалоб, которую я слышу от людей, касательно API-интерфейсов в которых применяется инверсия управления это: «Да, но теперь этим сложнее пользоваться, чем раньше». Возьмите этот пример:

Да, один из вариантов явно проще в использовании, чем другой. Но одним из преимуществ инверсии управления является то что вы можете использовать API в котором применяется инверсия управления для повторной реализации вашего старого API. Обычно это довольно просто. К примеру:

Круто, да? Таким образом мы можем создавать абстракции поверх API в котором применяется инверсия управления, и тем самым создавать более простой API. А если в нашем «более простом» API недостаточно вариантов использования, тогда наши пользователи могут применить те же самые строительные блоки, которые мы использовали для создания нашего высокоуровневого API, чтобы разрабатывать решения для более сложных задач. Им не нужно просить нас добавить новую функцию в и ждать, пока она будет реализована. У них уже есть инструменты при помощи которых они могут самостоятельно разрабатывать нужный им дополнительный функционал.

И, просто для фана:

Можно создавать специальный функционал для любой ситуации которая часто встречается у вас.

Необязательно: Используем React с JSX

В предыдущих примерах мы не выходили за рамки обычных браузерных возможностей. В частности, мы указываем, что React должен выводить на экран, просто вызывая JavaScript-функцию:

Однако, React позволяет использовать специальный синтаксис, называющийся JSX:

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

Вы можете попробовать JSX в .

Быстрый старт с JSX

Чтобы быстро попробовать JSX, добавьте такой -тег на страницу:

Теперь синтаксис JSX доступен внутри каждого -тега, у которого есть атрибут . Скачайте пример HTML-кода с JSX, чтобы поэкспериментировать.

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

Добавляем JSX в проект

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

С помощью терминала перейдите в директорию вашего проекта и запустите следующие команды:

  1. Шаг 1: Запустите команду (если появляются ошибки, попробуйте этот способ)
  2. Шаг 2: Запустите команду

Поздравляем! Вы только что добавили в ваш проект поддержку JSX, готовую к продакшену.

Запускаем препроцессор JSX

Создайте директорию с названием и наберите в терминале следующую команду:

Дожидаться завершения работы команды не нужно — она работает в режиме наблюдения за изменениями в JSX-коде.

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

Кроме препроцессинга JSX, вы в качестве бонуса получаете синтаксические новинки JavaScript, такие как классы, без головной боли с их браузерной поддержкой. Всё это доступно благодаря использованию инструмента под названием Babel, информацию о котором вы можете узнать из его документации.

Если вы неплохо разбираетесь в инструментах сборки и хотите создавать приложения на React с их помощью, обратитесь к следующему разделу, где описаны некоторые из наиболее популярных способов. Если нет — не беспокойтесь, уже знакомые нам script-теги ничуть не хуже!

1.1.2 Изучить React

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

  • Если вы предпочитаете учиться на практике, начните с практического руководства.

  • Если вы предпочитаете изучать концепции шаг за шагом, начните с раздела быстрый старт.

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

1.1.2.1 Первые примеры

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

1.1.2.2 React для начинающих

Если вы чувствуете, что документация по React пока тяжеловата, ознакомьтесь с данным обзором React от Tania Rascia. В нем представлены наиболее важные концепции React в подробном, удобном для начинающих виде. Когда вы закончите, попробуйте снова вернуться к документации!

1.1.2.4 JavaScript ресурсы

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

Мы рекомендуем посмотреть этот обзор JavaScript, чтобы проверить свой уровень знаний. Это займет у вас от 30 минут до часа, но зато вы будете чувствовать себя более уверенно, изучая React.

Внимание!

Каждый раз, когда у вас возникают трудности в JavaScript, MDN и learn.javascript.ru — отличные сайты для проверки. Есть также форумы поддержки сообщества, где вы можете обратиться за помощью.

1.1.2.5 Практическое руководство

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

1.1.2.6 Пошаговое руководство

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

1.1.2.7 Мышление в React

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

1.1.2.8 Рекомендуемые курсы

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

1.1.2.9 Продвинутое руководство

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

1.1.2.10 Справочное руководство

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

1.1.2.11 Глоссарий и FAQ

Глоссарий содержит обзор наиболее распространенных терминов, которые вы встретите в документации React. Существует также раздел часто задаваемых вопросов FAQ, посвященный коротким вопросам и ответам на общие темы, такие как выполнение запросов AJAX, состояние компонентов и структура файлов.

Бандлинг

Большинство React-приложений «собирают» свои файлы такими инструментами, как Webpack, Rollup или Browserify. Сборка (или «бандлинг») — это процесс выявления импортированных файлов и объединения их в один «собранный» файл (часто называемый «bundle» или «бандл»). Этот бандл после подключения на веб-страницу загружает всё приложение за один раз.

Пример

Приложение:

Бандл:

Если вы используете Create React App, Next.js, Gatsby или похожие инструменты, то у вас уже будет настроенный Webpack для бандлинга приложения.

Иначе, вам нужно будет настроить webpack самостоятельно. Для этого ознакомьтесь со страницами Установка и Начало работы в документации по Webpack.

Step 1: Break The UI Into A Component Hierarchy

The first thing you’ll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you’re working with a designer, they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!

But how do you know what should be its own component? Use the same techniques for deciding if you should create a new function or object. One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.

Since you’re often displaying a JSON data model to a user, you’ll find that if your model was built correctly, your UI (and therefore your component structure) will map nicely. That’s because UI and data models tend to adhere to the same information architecture. Separate your UI into components, where each component matches one piece of your data model.

You’ll see here that we have five components in our app. We’ve italicized the data each component represents.

  1. (orange): contains the entirety of the example
  2. (blue): receives all user input
  3. (green): displays and filters the data collection based on user input
  4. (turquoise): displays a heading for each category
  5. (red): displays a row for each product

If you look at , you’ll see that the table header (containing the “Name” and “Price” labels) isn’t its own component. This is a matter of preference, and there’s an argument to be made either way. For this example, we left it as part of because it is part of rendering the data collection which is ’s responsibility. However, if this header grows to be complex (e.g., if we were to add affordances for sorting), it would certainly make sense to make this its own component.

Now that we’ve identified the components in our mock, let’s arrange them into a hierarchy. Components that appear within another component in the mock should appear as a child in the hierarchy:

Try React


React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started.

Online Playgrounds

If you’re interested in playing around with React, you can use an online code playground. Try a Hello World template on CodePen, CodeSandbox, , or Stackblitz.

If you prefer to use your own text editor, you can also download this HTML file, edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so we’d only recommend using this for simple demos.

Add React to a Website

You can add React to an HTML page in one minute. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.

Create a New React App

When starting a React project, a simple HTML page with script tags might still be the best option. It only takes a minute to set up!

As your application grows, you might want to consider a more integrated setup. There are several JavaScript toolchains we recommend for larger applications. Each of them can work with little to no configuration and lets you take full advantage of the rich React ecosystem. Learn how.

Как устроена интерактивная часть статьи

Основ­ная часть ста­тьи — это про­сто HTML-код, кото­рый залит внутрь React-приложения. Ино­гда внут­ри это­го тек­ста встре­ча­ют­ся вот такие закли­на­ния:

Перед нами — вызов ком­по­нен­тов Figure и Grid. За них отве­ча­ют фай­лы Grid.js и Figure.js — в них опи­са­ны пра­ви­ла, как имен­но бра­у­зе­ру сле­ду­ет исполь­зо­вать эти пара­мет­ры, что­бы нари­со­вать ани­ма­цию и под­пи­си к ней.

Пара­мет­ры каж­дой симу­ля­ции мы ука­зы­ва­ем пря­мо в тек­сте ста­тьи. Когда React рабо­та­ет, он заби­ра­ет эти пара­мет­ры из ста­тьи, пере­да­ёт в ком­по­нент, ком­по­нент обра­ба­ты­ва­ет эти пара­мет­ры и воз­вра­ща­ет в ста­тью гото­вый интер­ак­тив­ный виджет с симу­ля­ци­ей зара­же­ния.

Что это нам даёт:

  • Слож­ная логи­ка движ­ка симу­ля­ций про­пи­са­на где-то в отдель­ном месте, её не нуж­но дуб­ли­ро­вать. Если мы захо­тим поме­нять общий прин­цип рабо­ты симу­ля­то­ра, мы это сде­ла­ем в фай­лах Grid.js и Figure.js, не сло­мав саму ста­тью.
  • Внут­ри ста­тьи мы про­пи­сы­ва­ем толь­ко суще­ствен­ные изме­не­ния в пове­де­нии симу­ля­ции: напри­мер, како­го раз­ме­ра будет симу­ля­ция, с какой ско­ро­стью будет про­те­кать, как люди будут зара­жать­ся.
  • Нам очень лег­ко добав­лять в ста­тью новые симу­ля­ции с любы­ми пара­мет­ра­ми.
  • Код полу­ча­ет­ся эле­гант­ным и про­стым, хотя само при­ло­же­ние доволь­но слож­ное.

Другие методы API

В отличие от методов жизненного цикла, представленных выше (React вызывает их сам), методы, приведённые ниже, можно вызывать из компонентов.

Их всего два: и .

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

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

Метод не всегда обновляет компонент сразу. Он может группировать или откладывать обновление до следующего раза. Это делает чтение сразу после вызова потенциальной ловушкой. Вместо этого используйте или колбэк (), каждый из которых гарантированно вызывается после того как было применено обновление. Если вам нужно обновить состояние на основе предыдущего, используйте аргумент , описанный ниже.

всегда приводит к повторному рендеру, если только не возвращает . Если используются мутабельные объекты, и условие рендеринга не может быть реализовано в , вызывайте только при разнице следующего и предыдущего состояния. Это предотвратит ненужные повторные рендеры.

Первым аргументом передаётся функция , которая имеет следующий вид:

 — ссылка на состояние компонента при изменении. Объект состояния не должен мутировать. Изменения должны проявляться в виде нового объекта на основе входных данных из  и . Предположим, что мы хотели бы увеличить значение состояния с помощью :

Как , так и , полученные функцией обновления, гарантированно будут обновлены. Результат функции поверхностно объединяется с .

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

В качестве первого аргумента , вместо функции, вы можете передать объект:

В нём образуется новое состояние после поверхностного объединения с . Например, установим количество товаров в корзине:

Эта форма записи также асинхронна, и несколько вызовов в течение одного цикла могут быть объединены вместе. Например, вам нужно увеличить количество элементов несколько раз в одном цикле. Результат этого можно представить так:

Последующие вызовы будут переопределять значения из предыдущих вызовов того же цикла. Из-за этого количество увеличится только один раз. В случае, если следующее состояние зависит от текущего, мы рекомендуем использовать форму функции обновления:

Для более подробной информации смотрите:

  • Руководство по состоянию и жизненному циклу
  • Продвинутый уровень: когда и почему группируются вызовы ?

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

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

Чаще всего, не используется. Вместо этого используются в  данные из  и .

Разделение кода на основе маршрутов

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

Часто таким удобным местом оказываются маршруты. Большинство интернет-пользователей привыкли к задержкам во время переходов между страницами. Поэтому и вам может быть выгодно повторно отрендерить всю страницу целиком. Это не позволит пользователям взаимодействовать с другими элементами на странице, пока происходит обновление.

Вот пример того, как организовать разделение кода на основе маршрутов с помощью и таких библиотек как React Router.

Предостережения


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

Не используйте HOC внутри рендер-метода

Алгоритм сравнения React (известный как согласование или reconciliation) использует тождественность компонентов чтобы определить нужно ли обновить существующее поддерево, или убрать и монтировать вместо него новое. Если компонент, полученный из , идентичен () компоненту из предыдущего рендера, то React рекурсивно продолжит сравнивать поддерево. Если компоненты не равны, React полностью удалит и заменит старое поддерево.

Обычно нас это не беспокоит

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

Повторное монтирование компонента обнуляет его состояние, а также состояние его дочерних компонентов

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

Не применяйте HOC в определении другого компонента. Сначала нужно отдельно получить компонент из HOC, и только потом использовать его. Таким образом React будет сравнивать один и тот же компонент при повторном рендере.

При необходимости (в редких случаях) можно динамически применять HOC в методах жизненного цикла или конструкторе компонента.

Копируйте статические методы

Иногда бывает полезно определить статические методы компонента. Например, статический метод библиотеки Relay позволяет составить композицию из фрагментов данных GraphQL.

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

Скопируйте недостающие методы в контейнер:

К сожалению, вы должны точно знать какие методы копировать. Вы можете воспользоваться hoist-non-react-statics, чтобы автоматически скопировать не связанные с React статические методы:

Другое возможное решение — экспортировать статические методы отдельно от компонента.

Рефы не передаются

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

Вы можете решить эту проблему с помощью API-метода (добавлен в React 16.3). Узнать подробнее в главе Перенаправление рефов.

Добавляем React за одну минуту

В этом разделе вы научитесь добавлять React на существующую HTML-страницу. Вы можете практиковаться на своём собственном сайте или создать для этого пустой HTML файл.

Мы не будем пользоваться сложными инструментами сборки или что-то устанавливать. Всё, что вам нужно — это доступ к Интернету и минута свободного времени.

Необязательно: скачать готовый пример (архив 2 Кбайт)

Шаг 1: Добавляем DOM-контейнер в HTML

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

Затем назначьте созданному уникальный атрибут . Это позволит впоследствии найти тег из JavaScript кода и отобразить React-компоненты внутри него.

Шаг 2: Добавляем script-теги

Теперь добавьте три -тега перед закрывающим тегом :

Первые два тега загружают React. Третий тег загружает код вашего собственного компонента.

Шаг 3: Создаём React-компонент

Создайте файл с именем рядом с вашим HTML файлом.

Возьмите этот стартовый код и вставьте его в созданный ранее файл.

Добавьте ещё 2 строки в конец файла , после стартового кода:

Этот код ищет контейнер , который мы добавили на первом шаге, а затем отображает наш React-компонент с кнопкой «Нравится» внутри него.

Готово!

Вот и всё! Вы только что добавили свой первый React-компонент на страницу.

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

Совет: Повторное использование компонентов

Зачастую, вам может понадобиться отобразить React-компонент в нескольких местах одной и той же HTML-страницы. Вот как можно показать сразу три кнопки «Нравится» с разными данными:

Совет: Минификация JavaScript для продакшена

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

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

Если же вы не настроили минификацию для ваших скриптов, то вот один из вариантов, как это сделать.

Разделение кода

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

Чтобы предотвратить разрастание бандла, стоит начать «разделять» ваш бандл. Разделение кода — это возможность, поддерживаемая такими бандлерами как Webpack, или Browserify (с factor-bundle), которая может создавать несколько бандлов и загружать их по мере необходимости.

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


С этим читают