№ 1 — Введение

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

Учебный указатель

  1. Учебник по ReactJS № 1 — Введение
  2. Учебник по ReactJS № 2 — Компоненты и свойства
  3. Учебник по ReactJS № 3 — Состояние и жизненный цикл компонента
  4. Учебник по ReactJS № 4 — Формы, события и ключи
  5. Учебник по ReactJS № 5 — React Flux и Redux
  6. Учебник по ReactJS № 6 — Лучшие практики ReactJS

Что такое ReactJS?

Библиотека JavaScript для создания пользовательских интерфейсов. Это определение написано на их официальном сайте.

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

Вы запутались?

Представьте, что вы просматриваете ленту новостей Facebook (не так уж сложно представить, правда?). Вы замечаете, что ваш друг разместил эту сумасшедшую фотографию прошлой ночи. Конечно, вам это понравится, и вы прочитаете комментарии, чтобы понять, что произошло прошлой ночью, потому что у вас алкогольный блэкаут. Теперь, пока вы читаете комментарии, вы видите, что количество лайков увеличилось на 20 с тех пор, как вам понравилась картинка. И не было перезагрузки страницы. Каким-то волшебным образом изменилось количество лайков. Эта магия называется ReactJS.

Функции

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

Вы уже знаете, что вся сеть основана на HTML. Все началось с простого HTML-кода, и люди сходили с ума еще в 90-х. После этого появился JavaScript со способами взаимодействия с HTML DOM (Document Object Model). JQuery упростил изменение содержимого HTML DOM. По пути было выпущено несколько библиотек и фреймворков JavaScript. Все это работает с HTML-кодом, другими словами, вы изменяете HTML на основе JavaScript. Но JavaScript намного мощнее HTML, поэтому разработчики React решили создать сам HTML из JavaScript. Короче говоря, ReactJS создает HTML из JavaScript.

Просто для ясности: это не ванильный JavaScript. Он называется JSX (JavaScript XML). Подождите, подождите… Что такое JSX?

const title = ‹h1›Привет, мир!‹/h1›;

const title = ‹h1›Привет, мир!‹/h1›;

Приведенный выше синтаксис тега не является ни строкой, ни HTML.

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

Но браузеры не понимают JSX, как нам получить JavaScript из JSX. Для этого мы используем Babel — набор инструментов, который преобразует JSX в JavaScript, понятный браузерам.

Преимущества — что делает ReactJS быстрым

Основная концепция React — Virtual DOM. Это концепция программирования, при которой идеальное или «виртуальное» представление пользовательского интерфейса хранится в памяти и синхронизируется с «реальным» DOM с помощью такой библиотеки, как ReactDOM.

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

Виртуально, реально, быстрее?

Хорошо, я знаю. Объясним весь процесс.

Когда вы визуализируете элемент JSX, виртуальный объект DOM обновляется. Возможно, это звучит невероятно неэффективно, но стоимость этого незначительна, потому что виртуальный DOM может обновляться так быстро по причине, о которой мы упоминали выше. После обновления виртуального DOM React сравнивает текущий виртуальный DOM с моментальным снимком виртуального DOM, сделанным непосредственно перед обновлением. Сравнивая новый виртуальный DOM с версией до обновления, React может легко определить, какие объекты виртуального DOM изменились. Этот процесс называется «диффинг». Когда React знает, какие виртуальные объекты DOM изменились, он обновляет эти объекты и только эти объекты в реальном DOM.

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

Ограничения

Когда вы впервые взглянете на React, JSX будет и, вероятно, будет выглядеть для вас действительно странно. Я обнаружил, что это проблема новичков. В конце концов, использование HTML в качестве JavaScript — это более новая концепция, но как только вы к ней привыкнете, она вам понравится.

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

Нет предопределенного способа структурировать ваше приложение (например, службы, контроллеры и представления в Angular). Это означает, что разработчик несет ответственность за поиск собственных способов эффективного управления несколькими частями приложения без предопределенной структуры.

Конфигурация среды

Создать приложение React — это удобная среда для изучения React и лучший способ начать создавать новое одностраничное приложение в React.

Он настраивает вашу среду разработки, чтобы вы могли без каких-либо проблем использовать новейшие функции JavaScript, обеспечивает приятный опыт разработки и оптимизирует ваше приложение для производства. Вам понадобится Node ›= 6 и npm ›= 5.2 на вашем компьютере. Теперь вы готовы создать свое новое приложение React:

npx create-react-app my-app cd my-app npm start

npx создать-реагировать-приложение мое-приложение

Вывод

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

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

Учебный указатель

  1. Учебник по ReactJS № 1 — Введение
  2. Учебник по ReactJS № 2 — Компоненты и свойства
  3. Учебник по ReactJS № 3 — Состояние и жизненный цикл компонента
  4. Учебник по ReactJS № 4 — Формы, события и ключи
  5. Учебник по ReactJS № 5 — React Flux и Redux
  6. Учебник по ReactJS № 6 — Лучшие практики ReactJS

Первоначально опубликовано на www.opencodez.com 2 ноября 2018 г.