Практические примеры использования React.js

Вы наверняка слышали о популярном JavaScript фреймворке от Facebook - React.js. Он используется многими популярными веб-сайтами, в том числе самим Facebook и Instagram. В этой статье вы найдете 5 практических примеров, которые разработаны на React.js.

react

Что особенного в React.js?

React.js основан на концепции компонентов. Это главное отличие от Angular и Ember, которые используют двухстороннюю привязку данных, для обновления HTML разметки страницы. На мой взгляд React.js, гораздо легче изучать, чем Angular и Ember. Он также чрезвычайно быстр, так как работает с виртуальным DOM и синхронизирует только изменение частей страницы. Если вы хотите полностью изучить данную технологию, рекомендуем прочесть серию уроков по React JS для начинающих.

Как использовать React.js?

Для использования React.js, подключите один JavaScript файл, к вашей странице. Facebook любезно предоставляет CDN, поэтому для подключения React.js, вы можете использовать следующий код:

<script src="http://fb.me/react-0.10.0.min.js"></script>

Это дает вам доступ к глобальному объекту React.js, который имеет ряд полезных методов, некоторые из которых вы можете увидеть в наших примерах. Рекомендуемый способ использования React.js в веб-приложениях, это использование языка под названием JSX. Это расширенная версия JavaScript, которая позволяет инициализировать React.js компоненты с помощью синтаксиса HTML, непосредственно в коде. JSX является дополнительным языком - вы можете использовать JavaScript, если предпочитаете.

Создание таймера на React.js

Как я упоминал, стандартные блоки в React.js, это компоненты приложения. Они создаются, при помощи вызова React.createClass() с дополнительным объектом опций и методов. У каждого компонента есть состояние (объект с данными), каждый компонент отвечает за собственный рендеринг – render(), а при изменении состояния, происходит вызов метода. Вот пример создания простого таймера:

Вы можете вставлять любое JavaScript выражение в фигурные скобки {} при создании компонента. В этом примере мы передаем начальное время, которое будет использоваться при каждом вызове функции tick(), чтобы вычислить прошедшее время.

Создание навигационного меню на React.js

Давайте посмотрим, как мы можем использовать события нажатия в React.js путем создания навигационного меню:

Обратите внимание, что в этих примерах, мы используем такие атрибуты, как className, которых на самом деле не существует в HTML. Для того чтобы вернуть новый элемент p, в качестве экземпляра компонента React.DOM.p.

Создание мгновенного поиска на React.js

Также рекомендуем вам прочитать статью Как генерировать SVG на React

Конечно же люди не любят ждать. Поэтому вы можете использовать данный пример для создания поиска в реальном времени на React.js:

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

Создание формы заказа на React.js

Реальная сила React.js приходит, когда вы объединяете несколько компонентов. Это позволяет лучше структурировать ваш код. Вы также сможете использовать этот код в разных частях своего приложения. Вот пример формы заказа, которая помогает клиентам спланировать свой бюджет:

Первый вопрос, который возникает при объединении нескольких компонентов, как наладить связь между ними. Один из способов - передача данных в атрибутах при их инициализации. Это будет работать только между родительскими и дочерними компонентами. Для связи в обратном направлении, вы можете передать один из методов родительского компонента в качестве атрибута к дочернему. Затем дочерний компонент, может вызвать этот метод и уведомить родительский компонент.

Подгрузка изображений с помощью AJAX

Данный пример демонстрирует, как можно объединить React.js с JQuery, а также как загрузить результаты при помощи AJAX. В то время как Angular, имеет свои собственные подходы при выполнении AJAX, React.js позволяет использовать любые библиотеки, с которыми вы знакомы.

Обратите внимание, что наш пример использует тот же компонент Picture при рендеринге списка изображений и избранного списка. Повторное использование компонентов - одно из преимуществ React.js в организации кода.

Перевод статьи 5 Practical Examples For Learning The React Framework

Тэги: Frameworkreact.jsnavigationajax

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.