React.js — это библиотека для языка программирования JavaScript для разработки интерфейсов сайтов и приложений. Как и везде, здесь есть свои термины и понятия, на которых строится разработка.
1. Компоненты
Это готовые блоки кода для создания интерфейса. Чтобы не создавать код каждый раз с нуля, было принято решение сохранять получившиеся варианты в библиотеке. Каждый компонент можно многократно использовать на странице.
Например, в этом посте компонентами будут текст, картинки, комментарии, лайки.
2. Состояния (State)
У компонентов есть состояния. Они необходимы, если данные у компонентов меняются. Это и есть та самая интерактивность.
Например, если нажать на лайк, то он станет другого цвета. Если поставить реакцию — то она появится внизу поста.
3. Props
Это свойства, которые передаются компонентам от других компонентов (от родительского к дочернему). Они используются только для чтения и их не нужно регулярно менять.
Например, текст на нашем сайте. Один раз написали и он не меняется.
4. Виртуальный DOM
DOM — это структура HTML-документа, представленная схематично в виде дерева.
Виртуальный DOM — это тот же самый DOM, только он хранится виртуально в JavaScript. Его главная функция — минимизировать прямые манипуляции с основным DOM, вносить все изменения разом, а не поштучно.
При работе в React изменения вносятся в виртуальный DOM, который пользователь не видит. Когда их накопится достаточное количество (внесены все правки, которые нужно было внести), запускается рендер и все изменения разом вносятся в основной DOM, который отображается пользователю.
5. Hooks
Этот механизм позволяет использовать возможности React без использования классов.
Когда-то давно функциональные компоненты были очень простыми — все, что они умели делать, это выводить информацию. У них не было состояний и методов, которые делали бы их интерактивными, из-за чего каждый раз компоненты нужно было переводить в классы (что скучно, времязатратно и монотонно).
6. Однонаправленный поток данных
Данные в React передаются, как в HTML, только в одном направлении — сверху вниз, от родительского компонента к дочерним и никак иначе. Это особенно удобно на больших проектах, так как позволяет легко и быстро определять, откуда и куда пришли данные.
7. React Developer Tools
Это специальные расширения для браузеров для работы с React. Они помогают проверять код на ошибки.
8. JSX
Это расширение для JavaScript на основе синтаксиса HTML. Сложнее, чем HTML, но в разы проще, чем классический JavaScript. Для чего? JSX выглядит как язык шаблонов, при этом у него есть все возможности JavaScript.
*HTML — это язык разметки для описания интерфейса сайтов, то, с чего начинают свой путь в программировании все. Это фундамент. Сейчас HTML проходят в школах и даже на гуманитарных факультетах в вузах.
Подробнее о том, как работать с React, мы разбираем в нашем курсе «Основы Frontend разработки на React».