Ой! Наконец-то ангелы здесь, когда я решил стать разработчиком React, я подумал, что это может быть сложно. Я долго пытался понять, что такое React и как он вписывается в архитектуру веб-приложений. Этот пост - то, что я хотел бы, чтобы кто-то сказал мне, но со временем я понял, что реакция - это ангел между демонами :D

Реакция - это любовь :)

Что такое Реакт? Сравнение React, Angular, Ember, Backbone. Как обрабатывать данные? Что с сервером? Что такое JSX? Что такое «компонент»? и бла-бла…

Пожалуйста! остановите себя прямо здесь.

Самое главное, что React vs Angular не имеет смысла. React — это просто слой представления, это библиотека рендеринга, а не фреймворк, такой как Angular. Angular — это полноценный фреймворк, включающий слой представления, в отличие от React. Вот почему React так сложен для понимания, для некоторых разработчиков он выглядит как полноценный фреймворк, но, для ясности, это просто представление.

React предоставляет некоторые функции для рендеринга HTML. Это все выходные данные React, HTML.

Любовь

1) Вы можете сказать, как и что рендерить в вашем приложении в одном исходном файле.

Например:
В заголовке вашего приложения вы хотите отобразить имя пользователя.

<header>  
    <div class="username">
        Not Logged In
    </div>
</header>
$.post('/login', credentials, function( user ) {
    // Modify the DOM here
    $('header .username').text( user.name );
});

Этот код действительно беспорядок, в React вам это нужно.

render: function() {  
    return <header>
        { this.state.name ?
            this.state.name :
            <span>Not Logged In</span> }
    </header>;
}

Это удивительно, не так ли?

Если вы пишете React, у вас есть доступ к более мощной конструкции стиля, чем имена классов CSS. У вас есть компоненты.

— Майкл Чан

2) Делает компоненты легко и понятно.

Сочетание HTML/JavaScript может заставить вас поежиться. Работа с JSX делает компоненты действительно красивым способом.

Традиционно вы отделяете представления от функциональности. Итак, вам нужно проследить сложный поток от JS › HTML › JS › плохие новости – печальное время.

Связывание функциональности непосредственно с разметкой и ее упаковка в портативный автономный «компонент» сделает вас счастливее и менее грязным в целом. Ваш JavaScript хорошо знает ваш HTML, поэтому их объединение имеет смысл.

Компоненты, написанные разными людьми, должны хорошо работать вместе. Для нас важно, чтобы вы могли добавлять функциональные возможности к компоненту, не вызывая волнообразных изменений во всей кодовой базе.

— Команда Facebook React

Ненавидит

1) Не забывайте, что React — это только представление, поэтому вы не можете их получить.

  • Система событий (кроме ванильных событий DOM).
  • Любые возможности AJAX.
  • Любая форма слоя данных.
  • Любой фреймворк приложения.

Редукс

Самая раздражающая часть разработки React — это Flux. Это гораздо более запутанно, чем React. Название Flux — претенциозная преграда для понимания. Flux — это концепция, а не библиотека, но известны две реализации концепций Flux: одна — alt.js, а другая — redux.js. Я собираюсь поговорить о редукции.

Flux — это шаблон, а не фреймворк.

Flux утомляет реализация, но концепция Flux действительно проста.

То, что ваше представление вызывает событие, скажем, пользователь вводит имя в текстовое поле, это событие обновляет модель, затем модель запускает событие, и представление реагирует на событие этой модели путем повторного рендеринга с последними данными. Вот и все.

Redux настолько прижился, что его больше не используют только для React. Вы можете найти реализации архитектуры Redux для других фреймворков, включая Angular 2.

— Эрик Эллиотт,

Должен ли я использовать React?

Ответ положительный.

Причины:

  • Отлично работает для команд, строго применяя шаблоны пользовательского интерфейса и рабочего процесса.
  • Код пользовательского интерфейса легко читается и поддерживается.
  • Компонентный пользовательский интерфейс — это будущее веб-разработки, и вам нужно начать делать это сейчас.

Вы должны дважды подумать, прежде чем переключаться:

  • Кривая обучения React действительно крутая, она сильно замедлит вас в начале. Понять, как работают реквизиты, состояние и связь между компонентами, непросто.
  • Поскольку мы все тоже ненавидим IE React. React не поддерживает браузеры ниже IE8.
  • Если в вашем веб-приложении не очень много динамических обновлений страниц, вы будете реализовывать много кода с очень небольшой выгодой.
  • Вы будете заново изобретать много колес. React молод, поэтому вам придется создавать большие библиотеки компонентов с нуля. Есть ли в вашем приложении раскрывающиеся списки, окна с изменяемым размером или световые окна? Вероятно, вам придется писать все это с нуля.

Это оно! :)