На начальном уровне такие переводы — мой вклад в развитие rails сообщества.
Дальше в тексте все что выделено курсивом мои замечания (таких будет не много:) )

Введение в React.js

React.js это новый популярный парень из команды JavaScript фреймворков, он сияет своей простотой. Когда другие фреймворки реализуют полный MVC (Model View Controller) подход, мы можем сказать React’у реализовать только View (Отображение) (факт — некоторые люди переписывают часть отображения (V) этих фреймворков c помощью React).

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

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

Макет для отслеживания расходов приложения

Для этого гайда мы создадим маленькое приложение с нуля что бы отслеживать наши действия. Каждая запись(дальше, тоже самое что и Record) будет состоять из даты, названия и количества. Запись будет рассматриваться как Кредит(Credit) если его сумма больше нуля, в противном случае она будет рассматриваться каr дебет. Вот макет проекта:

Суммарно приложение будет вести себя так:

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

Инициализация React.js в Rails проект

В первую очередь нам нужно создать наш новый проект, назовем его Accounts

rails new accounts

Для пользовательского интерфейса этого проектамы будем использовать bootstrap. Процесс установки выходит за рамки этой статьи, но вы можете установить официальный гем bootstrap-sass используя инструкцию из гит репозитория.

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

Если вы занимались разработкой Rails приложений вы знаете как легко установить гем: Добавте react-rails в ваш Gemfile

  gem 'react-rails', '~> 1.0'

Затем любезно скажите рельсам установить новый гем

bundle install

React-rails идет с установкой скрипта, который создаст файл components.js внутри папки app/assets/javascripts где и будут жить наши React компоненты.

rails g react:install

Если вы посмотрите в ваш файл application.js после запуска установки — вы увидите 3 новые строки:

//= require react //= require react_ujs //= require components

По существу, это включает в себя React библиотеку, компоненты и похожие файлы хранятся в ujs.Как вы могли догадаться по имени файла react-rails содержит ненавязчивый JS драйвер который поможет установить наши React компоненты а также будет обрабатывать Turbolinks события.

Создание ресурса

Мы будем создавать Record ресурс, который будет состоять из даты(date) заголовка(title) и количества(amount).
Взамен использования генерацииscaffold‘a, мы будем использовать resource генератор,
мы не будем использовать все файлы и методы созданные с помощью scaffold генератора. Другая настройка могла бы запустить скаффолд и тогда продолжила бы удалять неиспользуемые файлы/методы но наш проект может стать в таком случае немного грязным. После этого, внутри проекта запустите следующую команду:

rails g resource Record title date:date amount:float

После этой магии мы имеем новую модель(Model) контроллер(Controller) и роуты(routes). Теперь создадим базу данных и запустим миграции:

rake db:create db:migrate

Плюс ко всему вы можете создать пару записей(records) через

rails console Record.create title: 'Record 1', date: Date.today, amount: 500 Record.create title: 'Record 2', date: Date.today, amount: -100

Не забудьте запустить ваш сервер

rails s

Готово! Мы можем писать код.

Вложенные компоненты: Список Records

Для нашей первой задачи, нам нужно отрендерить любую созданную запись внутри таблицы.
Во-первых нам нужно создать index экшн внутри контроллера RecordsController:

# app/controllers/records_controller.rb  class RecordsController < ApplicationController    def index      @records = Record.all    end end

Теперь нам нужно создать новый файл index.html.erbвapps/views/records/, этот файл будет мостом между нашим Rails приложением и компонентами React. Для выполнения этой задачи, мы будем использовать хелпер метод react_component, который получает имя React, компонент мы хотим отрендерить вместе с данными которые передаем в него.

<%# app/views/records/index.html.erb %>  <%= react_component 'Records', { data: @records } %>

Стоит отметить что этот helper предоставлен react-rails гемом, если вы решите использывать другой интеграционный React метод, этот хелпер не будет доступен.

Теперь можете перейти в localhost:3000/records. Очевидно что что-то работает не так, все потому что отсутствуют Records (React компоненты). Но если вы возьмете сгенерированный HTML внутри браузера, мы можем вставить что то вроде этого.

<div data-react-class="Records" data-react-props="{...}"> </div>

C этой разметкой react_ujs определит, мы пытаемся отрендерить React компонент и создать его экземпляр включая настройки мы посылаем через react_component, в нашем случае контент @records

Пришло время создать наш первый компонент, внутри директории javascripts/components создайте новый файл: records.js.coffee, этот файл будет содержать наш Records компонент.

# app/assets/javascripts/components/records.js.coffee    @Records = React.createClass     render: ->       React.DOM.div         className: 'records'         React.DOM.h2           className: 'title'           'Records'

Каждый компонент требует рендер метод, который будет изменять рендеринг своих компонентов, рендер метод должен возвращать экземпляр класса ReactComponent, таким образом, когда React реализует ре-рендер он будет выполненятся оптимально.

Замечание. В другом случае экземпляр ReactComponents внутри рендер метода может быть записан с помощью JSX синтаксиса.
Эквивалент коду выше:

 render: ->  `<div className="records">    <h2 className="title"> Records </h2>  </div>`

Лично для меня, когда я работаю с CoffeeScript, я предпочитаю использовать React.DOM синтаксис JSX’у потому что код будет преобразован к иерархической структуре, как в HAML С другой стороны если вы пробуете интегрировать React в существующий проект с ERB, вы можете повторно использовать существующий ERB код и конвертировать его в JSX.

Обновите браузер

Отлично. Мы отрендерили наш первый React компонент. Теперь пришло время отобразить наши записи.

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

# app/assets/javascripts/components/records.js.coffee  @Records = React.createClass   getInitialState: ->     records: @props.data   getDefaultProps: ->     records: []   render: ->       ...

Метод getDefaultProps будет инициалиировать настройки наших компонентов в случае когда мы забываем передать данные, когда инстанцируем его и метод getInitialState будет генерировать начальное состояние нашиш компонентов. Теперь нам вообще то нужно отобразить records с помощью нашего Rails view.

Похоже что нам нужен хелпер метод для форматирования количества строк, мы можем вставить простое форматирование строк и сделать его доступным для всех coffee файлов Создадим новый utils.js.coffee файл в javascripts/ с следующим контентом:

# app/assets/javascripts/utils.js.coffee    @amountFormat = (amount) ->     '$ ' + Number(amount).toLocaleString()

Нам нужно создать новый Record компонент, отобразить каждую отдельную запись, создать новый файл record.js.coffee в javascripts/components директории и вставить следующий код:

# app/assets/javascripts/components/record.js.coffee    @Record = React.createClass     render: ->       React.DOM.tr null,         React.DOM.td null, @props.record.date         React.DOM.td null, @props.record.title         React.DOM.td null, amountFormat(@props.record.amount)

Record компонент должен отобразиться в колонке таблицы содержащей клетку для каждого атрибута записи. Не волнуйтесь на счет этих null в React.DOM.* вызовах, это значит что мы не передаем атрибуты компонентам.Теперь обновим рендер метод внутри Records компонентов с следующим кодом:

# app/assets/javascripts/components/records.js.coffee    @Records = React.createClass     ...     render: ->       React.DOM.div         className: 'records'         React.DOM.h2           className: 'title'           'Records'         React.DOM.table           className: 'table table-bordered'           React.DOM.thead null,             React.DOM.tr null,               React.DOM.th null, 'Date'               React.DOM.th null, 'Title'               React.DOM.th null, 'Amount'           React.DOM.tbody null,             for record in @state.records               React.createElement Record, key: record.id, record: record

Вы видели что только что произошло? Мы создали таблицу с хедером и телом внутри. Мы создали Record элемент для каждой существующей записи. Иначе говоря, мы вложили build-in/custom React компоненты, Круто. правда?

Когда мы имеем динамических наследников (в нашем случае records) мы должны обеспечить ключ настройки к динамическому генирированию елементов, итак React не имеет большого времени обновления нашего UI(пользовательского интерфейса) это потому что мы передаем
ключ: record.id вместе с настоящей записью когда создаем Record элемент. Если мы не делаетем это, нам нужно получить предупреждение в нашей JS консоли браузера (и вероятно, в ближайшем будущем, иногда, получать головную боль).

Вы можете посмотреть код этой секции тут или вы можете посмотреть измения секции.

Связь между родительскими и дочерними элементами: создание Records

Теперь мы отображаем все созданные записи также было бы здорово включить форму для создания новой записи. Давайте добавим эту фичу в наше React/Rails приложение. Во-первых, нам нужно добавить метод создания (create method) нашего контроллера (не забудьте про использование _strongparams )

class RecordsController < ApplicationController     ...      def create       @record = Record.new(record_params)        if @record.save         render json: @record       else         render json: @record.errors, status: :unprocessable_entity       end     end      private        def record_params         params.require(:record).permit(:title, :amount, :date)       end   end

Дальше, нам нужно создать React компонент и отслеживать создание новой записи. Компонент будет иметь свое собсвенное состояние что бы хранить дату (date) заголовок (title) и количество (amount).

# app/assets/javascripts/components/record_form.js.coffee    @RecordForm = React.createClass     getInitialState: ->       title: ''       date: ''       amount: ''     render: ->       React.DOM.form         className: 'form-inline'         React.DOM.div           className: 'form-group'           React.DOM.input             type: 'text'             className: 'form-control'             placeholder: 'Date'             name: 'date'             value: @state.date             onChange: @handleChange         React.DOM.div           className: 'form-group'           React.DOM.input             type: 'text'             className: 'form-control'             placeholder: 'Title'             name: 'title'             value: @state.title             onChange: @handleChange         React.DOM.div           className: 'form-group'           React.DOM.input             type: 'number'             className: 'form-control'             placeholder: 'Amount'             name: 'amount'             value: @state.amount             onChange: @handleChange         React.DOM.button           type: 'submit'           className: 'btn btn-primary'           disabled: !@valid()           'Create record'

Ничего креативного, просто инлайн форма бутстрапа. Обратите внимание как мы определяем значение атрибута установив значение инпутов(input’s), onChange атрибут прикрепляет и обрабатывает метод который был вызван при каждом нажатии клавиши, метод обрабатчик handleChange будет использовать имя атрибута, какой инпут вызвал событие и обновил состояние значения.
# app/assets/javascripts/components/record_form.js.coffee

@RecordForm = React.createClass ... handleChange: (e) -> name = e.target.name @setState "#{ name }": e.target.value
Мы просто используем интерпретатор строк для динамического определения объкта ключей эквивалентных @setState title: e.target.value когда имя соответствует title. Но почему мы должны использовать @setState? Почему мы не можем просто установить желаемоеых <co значение в state как мы обычно делаем в регулярнde>JS объектах? Потому что @setState должен выполнять 2 действия, это:

Обновлять компоненты состояния
Планировать UI проверку/обновление на основе нового состояния

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

# app/assets/javascripts/components/record_form.js.coffee  @RecordForm = React.createClass   ...   render: ->     ...     React.DOM.form       ...       React.DOM.button         type: 'submit'         className: 'btn btn-primary'         disabled: !@valid()         'Create record'

Мы определили disabled атрибут вместе с значением !@valid(), подразумевая что мы собираемся реализовать valid метод для оценки, если данные предоставленные пользователем правильны.

# app/assets/javascripts/components/record_form.js.coffee    @RecordForm = React.createClass     ...     valid: ->       @state.title && @state.date && @state.amount

Для простоты мы только валидируем @state атрибут снова пустыми строками. Таким образом каждый раз состояние получает обновления, Create record кнопка вкл/выкл зависит от валидации данных.

Сейчас наш контроллер и форма на месте. Пришло время что бы отправить нашу новую запись на сервер. Нам нужно обработать формы представления событий. Для выполнения задачи нам нужно добавить на onSubmit атрибут нашей формы и новый handleSubmit метод (похожее мы делали с onChange событием ).

# app/assets/javascripts/components/record_form.js.coffee    @RecordForm = React.createClass     ...     handleSubmit: (e) ->       e.preventDefault()       $.post '', { record: @state }, (data) =>         @props.handleNewRecord data         @setState @getInitialState()       , 'JSON'      render: ->       React.DOM.form         className: 'form-inline'         onSubmit: @handleSubmit       ...

Просмотрим новый метод построчно:

Предотвратить форму отправки
POST новой record информации текущего URL
Успешный коллбек

Успешный коллбек — это ключ этого процесса, после успешного создания новой записи кто то должен сообщить об этом действии, и состояние обновляется до нового значения. Вы помните когда я упомянул что этот компонент взаимодействует с другими компонентами через настройки (или @props)? Так вот, так и есть. Наш текущий компонент отправляет информацию назад родительскому компонента через @props.handleNewRecord сообщая про создание новой записи.

Как вы могли догадаться когда мы создаем наш RecordForm элемент нам нужно передать handleNewRecord настройки с ссылыкой на метод в нем, что то вроде React.createElement RecordForm, handleNewRecord: @addRecord. Ну, родительский Records компонента «везде» как это имеет состояние со всеми из существующих записей нам нужно обновить это состояние с новой созданной записью
Добавить новый addRecord метод внутри records.js.coffee и создать новую RecordForm элемента, просто после h2 title (внутри рендер метода).

# app/assets/javascripts/components/records.js.coffee    @Records = React.createClass     ...     addRecord: (record) ->       records = @state.records.slice()       records.push record       @setState records: records     render: ->       React.DOM.div         className: 'records'         React.DOM.h2           className: 'title'           'Records'         React.createElement RecordForm, handleNewRecord: @addRecord         React.DOM.hr null

Обновите браузер, заполните форму с новой записью, кликните по Create record не удивительно, на этот раз запись была добавлена почти незамедлительно и форма стала пустой после нажатия. Просто выполнилось обновление, конечно бекэнд заполнился новыми данными

Если вы используете другой JS фреймворк вместе c React (ангулар например) и создаете подобные фичи, то вы можете иметь проблемы, потому что ваш POST запрос не включает CSRF токен требуемый Rails, итак, почему мы не столкнулись с этим вопросом? Просто потому что мы используем jquery для взаимодействия с нашим бекэндом и Rails jquery_ujs ненавязчивый драйвер, будет включать в себя маркер CSRF на каждом нашем AJAX запросе. Круто.

Вы можете увидеть результат кода в этой секции, или изменить тут

Повторное использование компонентов

Чего бы хотело приложение без некоторых (хороших) показателей? Давайте добавим несколько боксов наверху нашего окна с некоторой используемой информацией. Мы обозначим для боксов 3 значение: Суммарное количество кредитов, суммарное кол-во дебета и баланс.
Это выглядит как работа с тремя компонентами или может быть просто одной из настроек?

Мы можем создать новый AmountBox компонент который будет получать настройки: количество текст и тип. Создание нового файла вызовет amount_box.js.coffee из javascripts/components/ и вставит следующий код:

# app/assets/javascripts/components/amount_box.js.coffee   @AmountBox = React.createClass    render: ->      React.DOM.div        className: 'col-md-4'        React.DOM.div          className: "panel panel-#{ @props.type }"          React.DOM.div            className: 'panel-heading'            @props.text          React.DOM.div            className: 'panel-body'            amountFormat(@props.amount)

Мы просто используем бутстрап панель, элемент отображает информацию в «blocky» методе и устанавливает цвет через тип настройки.
Мы также имеем включенное и очень простое количество форматированных методов вызванных amountFormat которые читают количество настроек и отображают это в формате валют.

В заказе есть завершенное решение. Нам нужно создать этот элемент 3 раза внутри нашего главного (main) компонента передать обязательные настройки зависимости от данных, которые мы хотим отобразить. Давайте создадим калькулярот методов. Во-первых откройте Record компонент и добавте следующий метод:

# app/assets/javascripts/components/records.js.coffee    @Records = React.createClass     ...     credits: ->       credits = @state.records.filter (val) -> val.amount >= 0       credits.reduce ((prev, curr) ->         prev + parseFloat(curr.amount)       ), 0     debits: ->       debits = @state.records.filter (val) -> val.amount < 0       debits.reduce ((prev, curr) ->         prev + parseFloat(curr.amount)       ), 0     balance: ->       @debits() + @credits()     ...

Сумма credits всех записей с количеством больше 0. Cумма дебетов всех записей количество меньше 0 и значение баланса. Теперь мы имеем в нужном месте калькулято методов. Нам просто нужно создать AmountBox элемент внутри, отрендерить метод (просто выше RecordForm компонента)

# app/assets/javascripts/components/records.js.coffee    @Records = React.createClass     ...     render: ->       React.DOM.div         className: 'records'         React.DOM.h2           className: 'title'           'Records'         React.DOM.div           className: 'row'           React.createElement AmountBox, type: 'success', amount: @credits(), text: 'Credit'           React.createElement AmountBox, type: 'danger', amount: @debits(), text: 'Debit'           React.createElement AmountBox, type: 'info', amount: @balance(), text: 'Balance'         React.createElement RecordForm, handleNewRecord: @addRecord     ...

Мы закончили с этой фичей! Обновим браузер. Вы должно быть увидели 3 отображаемых бокса, суммы мы вычислили раньше. Но подождите! Есть еще! Создадим новую запись и увидим магию в работе.

Вы можете увидеть результат кода
исправления тут

setState/replaceState: удаление записей

Следующая фича в нашем списке — удаление записи. Нам нужнен новая экшн колонка в нашем таблице записей. Эта колонка будет иметь Delete кнопку для каждой записи, симпатичный стандарт UI. Как в нашем предыдущем примере нам нужно создать и удалить метод в нашем Rails контроллере.

# app/controllers/records_controller.rb   class RecordsController < ApplicationController    ...     def destroy      @record = Record.find(params[:id])      @record.destroy      head :no_content    end     ...  end

Это весь код на стороне сервера, который нам нужен для этой фичи. Теперь откройте ваши Records React компонент и добавте в экшены колонку справа в хеадер таблицы.

# app/assets/javascripts/components/records.js.coffee    @Records = React.createClass     ...     render: ->       ...       # almost at the bottom of the render method       React.DOM.table         React.DOM.thead null,           React.DOM.tr null,             React.DOM.th null, 'Date'             React.DOM.th null, 'Title'             React.DOM.th null, 'Amount'             React.DOM.th null, 'Actions'         React.DOM.tbody null,           for record in @state.records             React.createElement Record, key: record.id, record: record

И наконец откройте Record компонент и добавте дополнительную колонку с Delete ссылкой

# app/assets/javascripts/components/record.js.coffee      @Record = React.createClass     render: ->     React.DOM.tr null,      React.DOM.td null, @props.record.date      React.DOM.td null, @props.record.title      React.DOM.td null, amountFormat(@props.record.amount)      React.DOM.td null,        React.DOM.a          className: 'btn btn-danger'          'Delete'

Сохраните ваш файл, обновите браузер и Мы имеем нерабочую кнопку без каких либо событий прикрепленных к ней.

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

Удалить событие внути потомка Record компонента (onClick)
Выполнять экшн (отправить DELETE запрос к серверу в этом случае)
Уведомить Records родительских компонентов об этом действии (отправка / прием метод обработчика через настройки)
Обновить состояние Record компонентов

Для реализации первого шага мы можем добавить обработчик OnClick к Recordтаким же образом, мы добавили обработчик для onSubmit к RecordForm для создания новых записей. К счастью для нас, React реализует большинство общих событий браузера в нормальном виде. Поэтому мы не должны беспокоиться о кросс-браузерной совместимости (вы можете посмотреть на полный список событий здесь ).

Снова откройте компонент записи, добавьте новый метод handleDelete и OnClick атрибут нашей «бесполезной» кнопке удаления следующим образом:

# app/assets/javascripts/components/record.js.coffee    @Record = React.createClass     handleDelete: (e) ->       e.preventDefault()       # yeah... jQuery doesn't have a $.delete shortcut method       $.ajax         method: 'DELETE'         url: "/records/#{ @props.record.id }"         dataType: 'JSON'         success: () =>           @props.handleDeleteRecord @props.record     render: ->       React.DOM.tr null,         React.DOM.td null, @props.record.date         React.DOM.td null, @props.record.title         React.DOM.td null, amountFormat(@props.record.amount)         React.DOM.td null,           React.DOM.a             className: 'btn btn-danger'             onClick: @handleDelete             'Delete'

Когда происходит клик по кнопке удалить handleDelete отправляет AJAX запрос к серверу
чтобы удалить запись на бекэнде и после этого сообщит родительскому компоненту про это действие через handleDeleteRecord обработчик доступен через настройки, это значит нам нужно регулировать создание Record элементов в родительском компоненте,
чтобы включить дополнительное свойство handleDeleteRecord, а также осуществлять фактический метод обработчика в предках:

# app/assets/javascripts/components/records.js.coffee  @Records = React.createClass   ...   deleteRecord: (record) ->     records = @state.records.slice()     index = records.indexOf record     records.splice index, 1     @replaceState records: records   render: ->     ...     # almost at the bottom of the render method     React.DOM.table       React.DOM.thead null,         React.DOM.tr null,           React.DOM.th null, 'Date'           React.DOM.th null, 'Title'           React.DOM.th null, 'Amount'           React.DOM.th null, 'Actions'       React.DOM.tbody null,         for record in @state.records           React.createElement Record, key: record.id, record: record, handleDeleteRecord: @deleteRecord

В основном наш deleteRecord метод копирует текущий компонент состояния записей, выполнение поиска индекса записи которую нужно удалить. милый стандарт JS операций.

Мы ввели новый способ взаимодействия с состоянием replaceState главное отличие между setState и replaceState это то что первый будет только обновлять один ключ состояния объекта, а второй будет полностью переопределять текущее состояние компонента с любым новым объектом который мы посылаем.

После обновления последнего бита кода обновите окно браузера и пробуйте удалить запись, должно произойти две вещи:

Запись должна пропасть из таблицы
Индикатор должен мгновенно обновить кол-во (для этого ненужен никакой другой код).

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

Refactor: State Helpers

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

Как вы догадались из предыдущей главы нам нужно обрабатывать несколько данных для переключения каждого состояния записей внутри нашего компонента Record. Это случай использования того, что React называет реактивные потоки данных.
Давайте добавим флаг редактирования и метод handleToggle к record.js.coffee:

# app/assets/javascripts/components/record.js.coffee  @Record = React.createClass  getInitialState: ->    edit: false  handleToggle: (e) ->    e.preventDefault()    @setState edit: !@state.edit  ...

Флаг редактирования по умолчанию будет выключен, и handleToggle изменит редактирование от ложного к истинному, и наоборот, нам просто нужно запустить handleToggle с пользователем OnClick событие.

Теперь нам нужно управлять двумя версиями строки читать/читать_и_редактировать и отображать их условно в зависимости от редактирования. К счастью для нас, до тех пор, как наш метод визуализации возвращает React элемент, мы свободны совершать какие-либо действия в нем; мы
можем определить несколько вспомогательных методов recordRow и recordForm и вызывать их условно внутри визуализации в зависимости от содержания @ state.edit.

У нас уже есть первый вариант recordRow, это наш текущий метод визуализации. Давайте переместим содержимое рендеринга в наш совершенно новый метод recordRow и добавим дополнительный код к нему:

# app/assets/javascripts/components/record.js.coffee  @Record = React.createClass ... recordRow: ->   React.DOM.tr null,     React.DOM.td null, @props.record.date     React.DOM.td null, @props.record.title     React.DOM.td null, amountFormat(@props.record.amount)     React.DOM.td null,       React.DOM.a         className: 'btn btn-default'         onClick: @handleToggle         'Edit'       React.DOM.a         className: 'btn btn-danger'         onClick: @handleDelete         'Delete' ...

Мы только добавили дополнительный React.DOM. a элемент ждет сигнала от onClick для вызова handleToggle

Двигаемся дальше. Реализация recordForm должна быть следующей структуры но с input полем в каждой клетке. Мы будем использовать новый ref атрибут для наших input’oв, сделаем их доступными; поскольку этот компонент не обрабатывает состояние, этот новый атрибут позволит нашему компонент считывать данные, предоставленные пользователем через@refs:

# app/assets/javascripts/components/record.js.coffee    @Record = React.createClass     ...     recordForm: ->       React.DOM.tr null,         React.DOM.td null,           React.DOM.input             className: 'form-control'             type: 'text'             defaultValue: @props.record.date             ref: 'date'         React.DOM.td null,           React.DOM.input             className: 'form-control'             type: 'text'             defaultValue: @props.record.title             ref: 'title'         React.DOM.td null,           React.DOM.input             className: 'form-control'             type: 'number'             defaultValue: @props.record.amount             ref: 'amount'         React.DOM.td null,           React.DOM.a             className: 'btn btn-default'             onClick: @handleEdit             'Update'           React.DOM.a             className: 'btn btn-danger'             onClick: @handleToggle             'Cancel'     ...

Не волнуйтесь. Этот метод мог быть больше но это просто html синтаксис.
Замечание. Мы вызываем @handleEdit, когда пользователь нажимает на кнопку Update, мы собираемся использовать аналогичный поток в качестве одной реализации для удаления записей.

Заметили ли вы отличие в том, как создаются React.DOM.inputs? Мы используем defaultValue по умолчанию вместо того что бы задать начальные входные данные, это происходит потому, что, используя только значение без OnChange
будет в конечном итоге создан только для чтения input’ов.

Наконец, метод визуализации сводится к следующему коду:

# app/assets/javascripts/components/record.js.coffee     @Record = React.createClass      ...      render: ->        if @state.edit          @recordForm()        else          @recordRow()

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

Для обработки обновлений записей, нам нужно добавить метод обновления к нашему контроллеру Rails:

# app/controllers/records_controller.rb  class RecordsController < ApplicationController   ...   def update     @record = Record.find(params[:id])     if @record.update(record_params)       render json: @record     else       render json: @record.errors, status: :unprocessable_entity     end   end   ... end

Вернемся к нашему компоненту записи, нам необходимо реализовать метод handleEdit, который будет отправлять AJAX запрос на сервер с обновленной информацией записи, тогда он уведомляет об этом родительский компонент, отправив обновленную версию записи с помощью метода handleEditRecord, этот метод будет получен через @props, так же, как мы делали это раньше при удалении записей:

# app/assets/javascripts/components/record.js.coffee   @Record = React.createClass    ...    handleEdit: (e) ->      e.preventDefault()      data =        title: React.findDOMNode(@refs.title).value        date: React.findDOMNode(@refs.date).value        amount: React.findDOMNode(@refs.amount).value      # jQuery doesn't have a $.put shortcut method either      $.ajax        method: 'PUT'        url: "/records/#{ @props.record.id }"        dataType: 'JSON'        data:          record: data        success: (data) =>          @setState edit: false

Для простоты, мы не проверили пользовательские данные, мы просто прочитали их через React.findDOMNode (@ refs.fieldName) .value и отправив их дословно на бэкэнд. Обновление состояния для переключения в режим редактирования на успех не является обязательным, но пользователь, безусловно, будет благодарить нас за это.

И последнее, но не в последнюю очередь, нам просто нужно обновить состояние на компоненте Records, чтобы перезаписать прежний record с новой версией потомка record и пусть React выполнять свою магию. Реализация может выглядеть следующим образом:

# app/assets/javascripts/components/records.js.coffee    @Records = React.createClass     ...     updateRecord: (record, data) ->       index = @state.records.indexOf record       records = React.addons.update(@state.records, { $splice: [[index, 1, data]] })       @replaceState records: records     ...     render: ->       ...       # almost at the bottom of the render method       React.DOM.table         React.DOM.thead null,           React.DOM.tr null,             React.DOM.th null, 'Date'             React.DOM.th null, 'Title'             React.DOM.th null, 'Amount'             React.DOM.th null, 'Actions'         React.DOM.tbody null,           for record in @state.records             React.createElement Record, key: record.id, record: record, handleDeleteRecord: @deleteRecord, handleEditRecord: @updateRecord

Как мы узнали в предыдущем разделе, с помощью React.addons.update изменение нашего состояния может привести к более конкретным методам. Конечным звеном между Records и Record выступает метод @updateRecordон передается через handleEditRecord настройки.

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

Мы сделали!
Мы только что построили небольшой Rails + React приложение с нуля!

Вы можете увидеть результат кода тут исправить тут

Завершающая мысль: React.js, простота и гибкость

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

Мы также узнали на примере, как интегрировать его в «активную работу и насколько хорошо он играет вместе с CoffeeScript, JQuery, Turbolinks, и остальной частю рельсов» Рельс-оркестр так сказать. Но это не единственный способ достижения желаемых результатов. Например, если вы не используете Turbolinks (а значит, вам не нужно react_ujs) вы можете использовать Rails активы вместо гема react-reils, вы могли бы использовать JBuilder для построения более сложных JSON ответов вместо рендеринга объектов JSON; однако вы все равно сможете получить те же прекрасные результаты.

ссылка на оригинал статьи https://habrahabr.ru/post/281735/

React.js — Руководство для Rails разработчиков