int(1)

Что такое React.js и стоит ли его изучать?

Turing Bootcamp 05.07.2021 0

Высокооплачиваемая карьера веб-разработчика — это мечта. Сложнее всего выяснить, какие именно навыки вам понадобятся, чтобы получить работу . Если вы планируете зарабатывать себе на жизнь созданием веб-сайтов, то вам нужно знать языки программирования HTML, CSS и JavaScript. Но в списке вакансий вы также можете заметить React JS.

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

Что такое React JS?

React JS — это библиотека JavaScript, используемая в веб-разработке для создания интерактивных элементов на веб-сайтах. Но если вы не знакомы с библиотеками JavaScript или JavaScript, это определение бесполезно. Итак, давайте вернемся назад и сначала разберемся с этими терминами.

 

Что такое JavaScript?

JavaScript (или JS) — это язык сценариев, используемый для создания и управления динамическим веб-контентом.
Динамическое веб-содержимое включает в себя такие вещи, как анимированная графика, слайд-шоу из фотографий и интерактивные формы.
Каждый раз, когда вы посещаете веб-сайт, где что-то перемещается, обновляется или иным образом изменяется на вашем экране, не требуя ручной перезагрузки веб-страниц, то велика вероятность, что все это работает благодаря JS.
Кратко: JavaScript — это очень важный язык программирования, используемый для добавления анимированных и интерактивных функций на веб-сайты или веб-приложения (поверх основных статических структур, созданных такими языками, как HTML и CSS ).

Что такое библиотека JavaScript?

Из приведенного выше определения вы можете увидеть, что JavaScript играет важную роль в разработке веб-сайтов и веб-приложений. Но бывают случаи, когда вам нужен JavaScript для выполнения повторяющихся функций, таких как стандартные эффекты анимации или функции автозаполнения панели поиска. Перекодирование этих функций каждый раз, превращается в «изобретение колеса». Здесь на помощь приходят библиотеки JavaScript .
Библиотеки JavaScript — это коллекции предварительно написанного кода JavaScript, которые можно использовать для общих задач JS, что позволяет обойти трудоемкий (и ненужный) процесс кодирования вручную. Если есть обычная функция JavaScript, которую вам по прежнему нужно кодить, вероятно, она уже есть в библиотеке JS.

Вернемся к React. Существует множество различных JS-библиотек, и React JS — одна из них. Но что делает ее уникальной? Для чего она используется и почему вы должны изучать React JS? И чем React лучше других библиотек JavaScript?

Почему разработчики JavaScript используют React JS?

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

До React JS разработчики застряли в создании пользовательских интерфейсов вручную или с менее ориентированными на пользовательский интерфейс предшественниками React, такими как jQuery . Это означало более длительное время разработки и большая вероятность ошибок. Итак, в 2011 году инженер Facebook Джордан Уолк создал React JS специально для улучшения разработки пользовательского интерфейса.

В дополнение к предоставлению повторно используемого кода библиотеки React (экономия времени на разработку и уменьшение вероятности ошибок кодирования), React имеет две ключевые функции, которые делают его привлекательным для разработчиков JavaScript:
1. JSX
2. Виртуальный DOM
Чтобы лучше понять React JS и почему вы должны его использовать, давайте взглянем на оба.

JSX

В основе любого базового веб-сайта лежат HTML-документы. Веб-браузеры читают эти документы и отображают их на вашем компьютере, планшете или телефоне в виде веб-страниц. Во время этого процесса браузеры создают нечто, называемое объектной моделью документа (DOM). Затем разработчики могут добавлять динамический контент в свои проекты, изменяя DOM с помощью таких языков, как JavaScript.
JSX (сокращение от JavaScript eXtension) — это расширение React, которое позволяет веб-разработчикам легко изменять DOM с помощью простого кода в стиле HTML. И поскольку поддержка браузера React JS распространяется на все современные веб-браузеры, JSX совместим с любой платформой браузера, с которой вы, возможно, работаете.

Однако это не просто вопрос удобства — использование JSX для обновления DOM приводит к значительному повышению производительности сайта и эффективности разработки. Как? Все дело в следующей функции React — Virtual DOM.

Виртуальный DOM

Если вы не используете React JS (и JSX), ваш веб-сайт будет использовать HTML для обновления своей DOM (процесс, который заставляет вещи «меняться» на экране без необходимости вручную обновлять страницу). Это отлично работает для простых статических веб-сайтов, но для динамических веб-сайтов, требующих интенсивного взаимодействия с пользователем, это может стать проблемой (поскольку вся DOM должна перезагружаться каждый раз, когда пользователь щелкает функцию, вызывающую обновление страницы).

Однако, если разработчик использует JSX для управления и обновления своей DOM, React JS создает нечто, называемое Virtual DOM. Виртуальная модель DOM является копией DOM сайта, и React JS использует эту копию, чтобы увидеть, какие части реальной DOM необходимо изменить, когда происходит событие (например, пользователь нажимает кнопку).

Допустим, пользователь вводит комментарий в форме сообщения в блоге и нажимает кнопку «Комментарий». Без использования React JS вся DOM должна была бы обновиться, чтобы отразить это изменение (используя время и вычислительную мощность, необходимые для этого обновления). React, с другой стороны, сканирует виртуальную модель DOM, чтобы увидеть, что изменилось после действия пользователя (в данном случае добавления комментария), и выборочно обновляет только этот раздел модели DOM.

Экосистема React JS

Часто можно увидеть, что React JS описывается как библиотека JavaScript , так и как платформа JavaScript , так что же это такое? Или и то, и другое?

Разница между библиотеками JavaScript (такими как React) и фреймворками JavaScript (такими как Angular) заключается в том, что в случае библиотеки — разработчик применяет библиотечный код в отдельных экземплярах, которые этого требуют. Однако, когда дело доходит до фреймворков, то фреймворк создает основу, которая упорядочивает ваш веб-сайт или приложение и предоставляет выделенные области для встраивания кода фреймворка.

Чтобы понять разницу между библиотекой, такой как React JS, и Angular (фреймворк), вы можете представить код из библиотеки Javascript с точки зрения мебели и декораций для дома, который вы уже построили, а фреймворк — это модельный домашний шаблон, который вы используете, чтобы построить дом.
React JS иногда ошибочно принимают за полноценный фреймворк, поскольку его надежная экосистема и расширяемость делают его такой универсальной библиотекой JavaScript. Помните, что когда вы используете React JS для создания пользовательских интерфейсов веб-сайтов и веб-приложений, у вас есть доступ к:
1. Фрагментам и компонентам кода React;
2. Возможность использовать JSX для прямого управления вашей DOM;
3. Виртуальная модель DOM для повышения производительности вашего сайта.

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

Стоит ли изучать React JS?

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

Поделиться
Интересные статьи:
Turing Bootcamp 08.07.2021 «8 лет спустя»: путь от новичка до сеньора после буткемпа по программированию Что отличает учебный курс по программированию от степени по информатике? Самая большая разница в том, что дипломы по информатике больше...
Turing Bootcamp 22.07.2021 Что такое CSS? Как изучить CSS для начинающих CSS идеально подходит для всех, кто хочет создать свой собственный сайт (например, блог, портфолио, электронная коммерция). Это также идеальная...
Turing Bootcamp 30.08.2021 Шпаргалка по JavaScript Если вы хотите создавать динамические веб-страницы, вам придется дополнить свои знания HTML и CSS пониманием JS . Этот язык...