Введение в ReactJS

ReactJS - это …

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

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

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

Почему React?

Простота написания кода - React.js использует специальный синтаксис называемый JSX, который позволяет легко писать JavaScript внутри HTML.

Компонентность - React.js не использует Shadow DOM - взамен он дает возможность создавать свои собственные компоненты, которые Вы можете позже использовать, комбинировать, располагать в разметке сайта.

import 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>
    );
  }
}

import 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>

<h2> Какой-то заголовок </h2>

<ul>

</ul>

</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.

<div id="container">
  <!-- Этим элементов управляет React.js -->;
</div>;

<script>
ReactDOM.render(
  <h1>Привет, Мир!</h1>;,
  document.getElementById('container’')
);
</script>

;

</div>;

ReactDOM.render(

<h1>Привет, Мир!</h1>;,

document.getElementById('container’')

);

</script>