Введение в ReactJS
Это будет первая статья в моем блоге, состоящем из трех частей, о ReactJS.
Я знаю, что многие из нас (новичков в программировании) преувеличенно ненавидят любимый во всем мире язык программирования JAVASCRIPT. Но мы не должны забывать, что JavaScript по-прежнему входит в пятерку самых востребованных языков программирования на сегодняшний день, и одним из лидеров по удовлетворенности и темпам роста библиотек JavaScript является REACT. В этом 2018 году ReactJS вместе с AngularJS, Vue.JS и Ember.JS являются лучшими JavaScript-фреймворками/библиотеками, которые ищут работодатели.
Что такое ReactJS?
ReactJS создан инженером-программистом Facebook по имени Джордан Уоке и впервые развернут в Facebook в 2011 году и использован в Instagram.com в 2012 году, а затем открыт в 2013 году. ReactJS используется только во внешнем интерфейсе для создания пользовательских интерфейсов. Это компонент «V» — View в шаблоне проектирования MVC (Model-View-Controller). Мы видим, что он широко используется на таких сайтах, как Facebook, Instagram, Airbnb, Pinterest, Uber и многих других. React поддерживается Facebook и Instagram.
React — это простая библиотека JavaScript на основе компонентов, позволяющая веб-приложению изменять данные без перезагрузки страницы. Он используется для разработки сложных и интерактивных веб- и мобильных пользовательских интерфейсов. Он следует подходу, основанному на компонентах, который позволяет создавать многоразовый пользовательский интерфейс. Он следует за однонаправленным потоком данных, который представляет собой одностороннюю привязку данных, что означает, что вся привязка данных и поток данных происходят только в одном направлении.
Зачем реагировать?
Ниже приведены причины, по которым люди предпочитают использовать ReactJS:
· React работает быстро — приложения, созданные в React, могут обрабатывать сложные обновления, оставаясь при этом быстрыми и отзывчивыми.
· Может отображать на стороне клиента или сервера
· Полностью независимый от остальной части приложения
· Он модульный — модульность React может быть решением проблем с ремонтопригодностью JavaScript, потому что вместо написания больших плотных файлов кода; React может быть написан в виде небольших повторно используемых файлов.
· Он использует виртуальный DOM
· Масштабируемость — React лучше всего работает с большими программами, которые отображают много изменяющихся данных.
· Обладает динамическими свойствами и состоянием
· Увеличивает производительность приложений
· Гибкость и простота интеграции — React также можно использовать для любых других фреймворков, технологий и интересных проектов.
· Изучение React поможет вам трудоустроиться — рынок труда постоянно растет!
Что такое виртуальный DOM?
Утверждается, что одним из преимуществ ReactJS является использование Virtual DOM. Но что такое виртуальный DOM и что он делает в React?
DOM означает объектную модель документа. Это платформа и независимый от языка интерфейс, который позволяет программам и сценариям динамически получать доступ и обновлять содержимое, структуру и стиль документа. В React для каждого объекта DOM существует соответствующий виртуальный объект DOM. Виртуальный объект DOM — это представление объекта DOM, например облегченная копия.
React абстрагируется от DOM и создает собственную упрощенную версию, включающую только то, что вам нужно. Виртуальный DOM работает в 3 простых шага:
1. Всякий раз, когда какие-либо базовые данные изменяются, весь пользовательский интерфейс повторно отображается в представлении Virtual DOM.
2. Затем вычисляется разница между предыдущим представлением DOM и новым.
3. После того, как расчеты будут выполнены, реальный DOM будет обновлен только теми вещами, которые действительно изменились.
Если вы используете Facebook или Instagram, вы можете заметить, что когда вы отправляете комментарий к определенному сообщению в ленте новостей или истории, оно просто отображает обновление в самом сообщении, и больше ничего не меняется на всей странице. Именно так работает виртуальный DOM: он включает только то, что вам нужно, и помогает нам определить, какие части изменились. Поэтому, когда вы обновляете компонент и вам нужно повторно отобразить его вместо обновления всего приложения, React может взглянуть на то, что изменилось, и посмотреть на исходный DOM, а затем просто повторно отобразить ту часть, которая нуждается в обновлении. приложение быстрее.
Итак, знакомство с ReactJS завершено. В своих следующих сообщениях в блоге я буду обсуждать различные способы того, как мы можем начать использовать React на нашей собственной машине, основные функции React и покажу, как создать простое веб-приложение React. Просто держите в курсе!
