Введение в ReactJS

ReactJS - это …

ReactJS - JavaScript библиотека c открытым исходным кодом, призванная облегчить создание интерактивных, часто используемых интерфейс-компонентов. React создан разработчиком из Facebook - Джорданом Волком и представлен в 2013 году. React позволяет создавать динамичные и интерактивные веб-приложения (чаще одностраничные), в которых изменение данных может происходить на лету и без перезагрузки страницы.

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

React использует концепцию виртуальный DOM, которая селективно формирует ветки DOM дерева основываясь на их состояниях.

Почему React?

    • Простота написания кода - React.js использует специальный синтаксис называемый JSX, который позволяет легко писать JavaScript внутри HTML.
    • Компонентность - React.js не использует Shadow DOM - взамен он дает возможность создавать свои собственные компоненты, которые Вы можете позже использовать, комбинировать, располагать в разметке сайта.
    • Эффективность - React.js создает свою собственную виртуальную DOM модель, в которой находятся компоненты. Такой подход дает вам значительную гибкость и высокую производительность, потому что React заблаговременно высчитывает какие изменения необходимо сделать в DOM и выполняет их соответственно. Таким образом, React избегает высокозатратных операций при обновлении DOM дерева.
    • Не влияет на SEO - одна из насущных проблем JavaScript фреймворков, является отрицательное воздействие на SEO. React отличается тем, что он после рендеринга виртуального DOM возвращает статичную веб-страницу доступную для чтения поисковыми роботами. В результате не нужно прибегать к использованию PhantomJS и прочих “магических” средств.
    • Наличие инструментов разработчика - React имеет свой собственный набор инструментов для разработчика в браузере Chrome, который помогает дебажить веб-приложение React.js. После установки этого расширения Вы сможете просматривать виртуальный DOM точно также как просматривали бы его в инспекторе элементов.

Будет ли React заменой Angular?

Однозначный ответ - нет. Сравнивать React с Angular все равно, что сравнивать Bootstrap с Ember. React - библиотека UI компонентов и из модели MVC (Model-View-Controller) использует только View (Представление), в то время как в Angular модель MVC реализована полностью.

React в действии

Выведем текстовое сообщение с помощью React.js.