Библиотека/фреймворк React

Что такое React?

React - это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов. Она позволяет создавать сложные пользовательские интерфейсы из небольших и изолированных частей кода, называемых «компонентами».

React простым языком

React часто описывают как V в структуре MVC . Это также является наименее осязаемым объяснением, которое можно дать новичку, поскольку (V)iews - это, как правило, файлы без логики, которые управляются контроллером. Кроме того, такие фреймворки, как Angular, Backbone, Ember и другие, уже имеют достаточное количество слоев представления - тогда возникает вопрос, почему нам нужно заменить V в MVC на React?

Ответ заключается в том, что React не обязательно хочет заменить наши представления - он хочет дополнить их, позволяя вам создавать многократно используемые компоненты UI (панели вкладок, поля комментариев, всплывающие «модалки», списки, сортируемые таблицы и т.д.).

Другими словами, основная идея React заключается в следующем: что если бы вы могли создать свой собственный элемент HTML с настраиваемой функциональностью? Например, можно создать элемент, который будет отображать текстовую область, выполнять проверку текста, введенного в текстовую область, отправлять форму при нажатии клавиши Enter и т.д. - и все это всего лишь с помощью одной строки кода: <CommentBox></CommentBox>. Для тех из вас, кто пришел из мира Angular, вы можете считать React Components близкой аналогией Directives.

Декларативность

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

Компонентная основа

Создавайте инкапсулированные компоненты, которые управляют своим состоянием, а затем компонуйте их для создания сложных UI. Поскольку логика компонентов пишется на JavaScript, а не на шаблонах, вы можете легко передавать богатые данные через ваше приложение и держать состояние вне DOM.

Учись один раз, пиши где угодно

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

React также может рендерить на сервере с помощью Node и создавать мобильные приложения с помощью React Native.

Простой компонент

Компоненты React реализуют метод render(), который принимает входные данные и возвращает то, что нужно отобразить. В этом примере используется XML-подобный синтаксис, называемый JSX. Входные данные, которые передаются в компонент, могут быть доступны в render() через this.props.

Компоненты React реализуют метод render(), который принимает входные данные и возвращает то, что нужно отобразить. В этом примере используется XML-подобный синтаксис, называемый JSX. Входные данные, которые передаются в компонент, могут быть доступны в render() через this.props.

JSX является необязательным и не требуется для использования React. Попробуйте использовать Babel, REPL, чтобы увидеть необработанный код JavaScript, полученный на этапе компиляции JSX.

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

Источники

• reactjs.org.