ReactJS - это …
ReactJS - JavaScript библиотека c открытым исходным кодом, призванная облегчить создание интерактивных, часто используемых интерфейс-компонентов. React создан разработчиком из Facebook - Джорданом Волком и представлен в 2013 году. React позволяет создавать динамичные и интерактивные веб-приложения (чаще одностраничные), в которых изменение данных может происходить на лету и без перезагрузки страницы.
Одной из важных особенностей React’а является его применение не только на клиентской стороне, но и на стороне сервера, сохраняя при этом взаимодействие с клиентом.
React использует концепцию виртуальный DOM, которая селективно формирует ветки DOM дерева основываясь на их состояниях.
Почему React?
-
- Простота написания кода - React.js использует специальный синтаксис называемый JSX, который позволяет легко писать JavaScript внутри HTML.
- Компонентность - React.js не использует Shadow DOM - взамен он дает возможность создавать свои собственные компоненты, которые Вы можете позже использовать, комбинировать, располагать в разметке сайта.
12345678910111213141516171819202122import React, { Component } from 'react';import Header from './header';import Footer from './footer';import ContactForm from './contactForm';import ListItems from './listItems';class DemoComponents extends Component {render() {return (<div><Header /><h2> Какой-то заголовок </h2><ul><ListItems /></ul><ContactForm /><Footer /></div>);}} - Эффективность - 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.
1 2 3 4 5 6 7 8 9 10 |
<div id="container"> <!-- Этим элементов управляет React.js -->; </div>; <script> ReactDOM.render( <h1>Привет, Мир!</h1>;, document.getElementById('container’') ); </script> |