[Эта статья была написана Аурелио Де Росой .]
2015 год станет годом React . В последнее время он привлек большое внимание к разработке на стороне клиента, мобильной и серверной части JavaScript. Похоже, что в прошлом году React набирал обороты, но его популярность растет день ото дня, отчасти благодаря успеху React.js Conf, который состоялся в январе. Если вас заинтересовал React, эта статья даст вам обзор библиотеки. Мы также обсудим его сильные стороны и почему вы можете узнать больше об этом.
Что реагирует?
React — это библиотека JavaScript, созданная в сотрудничестве Facebook и Instagram. Его цель — позволить разработчикам легко создавать быстрые пользовательские интерфейсы. React не делает никаких предположений об остальной части используемого стека технологий, поэтому легко опробовать его на небольшой функции в существующем проекте.
В настоящее время он используется в крупных компаниях, таких как Facebook, Instagram, Yahoo !, Airbnb и Sony. Как я уже говорил во введении, его популярность сильно растет, поэтому я ожидаю, что все больше компаний будут использовать его очень скоро. По моему мнению, сообщество не было так взволновано по поводу инструмента / библиотеки JavaScript с момента появления Node.js.
Реакт не является полной структурой. Он не предлагает все компоненты, которые вы найдете в таких проектах, как Ember или AngularJS. На самом деле, многие называют React просто V в MVC.
React Native
На ранее упомянутой конференции команда разработчиков React анонсировала React Native. Его можно использовать для создания пользовательского интерфейса мобильных приложений. React Native немного отличается от React, потому что вы создаете не DOM-узлы, а реальные нативные элементы. Таким образом, вы не строите объекты JavaScript, которые превращаются в divs или spans, а скорее в нативные элементы, такие как Image, Textили View.
Помимо этого различия, они основаны на одних и тех же принципах и обладают практически одинаковыми функциями, поэтому команда представила идею «Учись один раз, беги повсюду». В этом уроке я не буду рассказывать о React Native, но я подумал, что это из-за упоминания. Если вам интересен этот проект, вы можете посмотреть два видео, записанных на конференции: видео 1 и видео 2 .
Telerik предлагает библиотеку под названием NativeScript, которая, как и React Native, призвана позволить разработчикам создавать собственные мобильные приложения с использованием JavaScript. Однако между проектами есть ряд отличий. NativeScript запускается 5 марта. Если вы хотите больше узнать о том, как работает NativeScript, вы можете присоединиться к нам для выпуска вебинара, чтобы глубже изучить возможности среды выполнения.
Основные аспекты React
Виртуальный ДОМ
Одна из наиболее важных и широко обсуждаемых концепций React — это виртуальный DOM . Виртуальный DOM — это дерево, основанное на объектах JavaScript, созданных с помощью React, которое имитирует дерево DOM. Каждый раз, когда вы хотите что-то изменить в DOM, React использует алгоритм diff, который только повторно отображает измененные узлы DOM. Этот алгоритм используется для эффективного повторного рендеринга, потому что операции DOM обычно медленны, по крайней мере, по сравнению с выполнением операторов JavaScript. Таким образом, React может быть очень быстрым, что особенно важно, учитывая, что ЦП мобильных устройств намного менее мощен, чем настольные устройства.
Рендеринг на стороне сервера
Еще одной важной особенностью этого проекта является то, что объекты, которые вы создаете с помощью React, представления также могут быть отображены на сервере с помощью Node.js. В отличие от React Native, вам не нужно использовать другую библиотеку. Вы используете тот же файл на клиенте, а также на сервере. Это важное улучшение производительности. Фактически, вы можете сначала визуализировать статическую версию страниц с помощью сервера, что является более быстрым и дружественным к SEO, а затем включить взаимодействие с пользователем и обновления пользовательского интерфейса с помощью React на стороне клиента.
Данные связывания
Последняя особенность, которую я хочу выделить, — используемая модель привязки данных. За последние несколько лет многие фреймворки, такие как AngularJS, приняли модель двустороннего связывания данных. Реагирование отличается тем, что имеет одностороннюю модель привязки данных. По словам команды React, этой моделью легче управлять при разработке приложения.
Теперь, когда мы рассмотрели основные функции фреймворка, давайте посмотрим, как вы можете начать его использовать.
Начало работы с React
Для начала у вас есть два метода. Первый — использовать CDN Facebook, чтобы вам не приходилось загружать какие-либо файлы. Конечно, у этого метода есть тот недостаток, что вы должны быть онлайн. Второй способ — зайти на сайт React и скачать стартовый набор React.
После того, как вы загрузили zip, распакуйте файлы на свой компьютер. Вы увидите каталог с именем «act- <версия> », где <версия> — текущая версия проекта. На момент написания этой статьи последняя версия — 0.12.2, и в этом случае у вас будет папка с именем «act-0.12.2 ». Откройте папку, а затем подпапку «build», и вы найдете два необходимых файла: JSXTransformer.jsи react.js. Первый позволяет преобразовывать файлы, содержащие код, используя синтаксис JSX (принятый большинством разработчиков, использующих React), в файлы, содержащие чистые операторы JavaScript. Второй файл — это базовая библиотека React.
В оставшейся части этого руководства я буду использовать CDN Facebook, но вы можете адаптировать представленные фрагменты к локальной копии файлов. Но прежде чем мы создадим первое демо, использующее React, важно обсудить некоторые важные концепции.
Компоненты
Реакт выдвигает идею повторно используемых компонентов. Это виджеты или другие части макета (форма, кнопка или все, что можно разметить с помощью HTML), которые вы можете многократно использовать в своем веб-приложении. В React у каждого компонента есть render()метод, который отвечает за отображение кода HTML. Обычно компоненты React написаны с использованием синтаксиса JSX, описанного в следующем разделе, но вы также можете использовать чистый JavaScript.
Синтаксис JSX
JSX — это расширение синтаксиса JavaScript, которое похоже на XML и которое вы смешиваете с обычным кодом JavaScript. Его использование не является обязательным, но, как я уже сказал, большинство разработчиков, использующих React, использовали его. Это удобно, потому что это краткий синтаксис для определения древовидных структур с атрибутами. Основанный на XML, он имеет преимущество сбалансированных открывающих и закрывающих тегов. Это может облегчить чтение больших деревьев, чем вызовы функций или литералы объектов. Если вы хотите узнать больше об этом синтаксисе, вы можете прочитать статью JSX in Depth .
Реквизит и состояние
React опирается на однонаправленный поток данных. Это означает, что поток данных происходит от родительских компонентов к дочерним через атрибуты. Внутри компонента вы можете получить доступ к значениям переданных свойств (или реквизитов, используя язык React) через propsобъект. Когда значения изменяются, React выполняет повторную визуализацию вашего компонента, чтобы ваш пользовательский интерфейс был актуальным. В React реквизиты являются неизменными, что означает, что после прохождения, если родительский объект не обновлен, они не изменятся.
В дополнение к реквизиту, каждый компонент может иметь свои личные данные. Эти данные упоминаются как состояние . Компонент может хранить значение в своем состоянии и передавать его дочерним компонентам через реквизиты. Это гарантирует, что всякий раз, когда изменяется состояние компонента, реквизиты также меняются. В результате дочерние компоненты, которые зависят от этих реквизитов, автоматически перерисовываются.
Давайте теперь приведем в действие наши знания React на простом примере.
Привет, мир с React
Теперь, когда у вас есть базовые знания основных понятий React, пришло время увидеть конкретный пример. Давайте начнем с создания нового index.htmlфайла, содержащего следующий код:
<html>
<head>
<title>Hello World with React</title>
</head>
<body>
<script src="https://fb.me/react-0.12.2.js"></script>
<script src="https://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="hello.jsx"></script>
<script src="main.jsx"></script>
</body>
</html>
Как вы можете видеть, в приведенном выше коде у нас есть четыре scriptэлемента. Первые два файла указывают на два вышеупомянутых файла, которые позволяют нам использовать React. Третий, hello.jsxбудет содержать наш первый компонент React. Последний main.jsx, запускает приложение, визуализируя наш компонент.
Код ниже является нашим hello.jsxкомпонентом:
var Hello = React.createClass({
render: function() {
return <p>Hello, world!</p>;
}
});
В приведенном выше фрагменте мы создали новый компонент React, передав объектный литерал React.createClass()методу, который реализует шаблон Factory. Результат вызова этого метода сохраняется в переменной с именем Hello. Внутри литерала объекта мы определяем свойство с именем, renderкоторое имеет функцию в качестве значения.
Как я уже говорил, render()отвечает за создание объектов, отображающих HTML-код, полученный из компонента. Однако, вместо того , чтобы использовать заявление , как console.log(), alert()или document.write()мы возвращаем содержимое на экран. Здесь мы возвращаем абзац с «Привет, мир!».
Мы создали наш первый компонент React, но этого недостаточно. Нам нужно дать указание странице использовать наш Helloкомпонент. Мы сделаем это в main.jsxфайле:
React.render( <Hello />, document.body );
Хотя этот фрагмент очень короткий, он дает нам возможность выделить несколько концепций. Во-первых, когда мы создаем компонент React, это похоже на определение нового тега, который мы можем использовать всякий раз, когда нам это нужно.
Чтобы использовать компонент, нам нужно вызвать React.render()метод. Этот метод принимает два аргумента: компонент для рендеринга и элемент DOM, в который мы хотим внедрить результат компонента. В нашем примере мы хотим визуализировать Helloкомпонент и внедрить содержимое bodyдокумента.
В этом примере не использовались никакие реквизиты, но мы рассмотрим это в следующем примере.
Использование реквизита в React
В этом примере мы обновим предыдущий код, чтобы увидеть реквизит в действии. Вместо фиксированного сообщения, жестко закодированного в компоненте, оно будет передано как атрибут. Для этого у нас есть два обновления двух фрагментов из предыдущего раздела.
Новое hello.jsxбудет:
var Hello = React.createClass({
render: function() {
return <p>{this.props.message}</p>;
}
});
И новый main.jsxфайл будет:
React.render( <Hello message="Hello, world!" />, document.body );
Как видите, мы передаем строку через messageатрибут, добавленный к Helloтегу в main.jsxфайле. Переданное значение извлекается путем доступа к свойству тезки propsобъекта в render()методе Helloкомпонента. Результат этого второго примера такой же, как и раньше, однако, благодаря этому изменению наш Helloкомпонент более пригоден для повторного использования.
Выводы
В этой статье представлен краткий обзор React, его основных концепций и JSX. В начале статьи мы обсуждали, как React может улучшить производительность веб-сайта и как он позволяет создавать более дружественные к SEO веб-страницы. Мы рассмотрели реквизиты и состояние, а также то, как они могут использоваться для создания более повторно используемых компонентов. Наконец, мы рассмотрели пару простых примеров, использующих React.
Как мы уже говорили, React имеет много преимуществ, и, вероятно, это будущее веб-разработки. Надеюсь, вам понравилась статья, и вы попробуете React в вашем следующем проекте.