ReactBrief Introduction

Maciej LitwiniukPrograils Lightning Talks, 10 Nov 2015

–https://facebook.github.io/react/

„A JavaScript library for building user interfaces”

It's the "V" in MVC

It's fast.

Like... really fastPhoto: Tim Shields, https://www.flickr.com/photos/glaciertim/4320524072/

Virtual DOM

Think of it like something similar to russian doll caching

Advantages• Easy plug and play - even in existing, mature

application

• Can be rendered server-side

• DOM manipulation in one place

• Re-render only what needed

–Yoda

„So how to use it in Rails, you wondering must”

1 gem 'therubyracer' # it's just fast 2 # https://github.com/reactjs/react-rails/pull/290 3 gem 'react-rails', '~> 1.4.0'

1 # config/environments/development.rb 2 RewardsThem::Application.configure do 3 config.react.variant = :development 4 end

1.

2.

1 <div class="row"> 2 <div class="col-lg-7 col-md-12"> 3 <h3> 4 What happend recently 5 </h3> 6 <% @rewards.each do |reward| %>

7 <%= render reward %> 8 <% end %> 9 </div> 10 </div> 11

1 <div class="row"> 2 <div class="col-lg-7 col-md-12"> 3 <h3> 4 What happend recently 5 </h3> 6 <% @rewards.each do |reward| %>

7 <%= react_component 'Reward', reward: reward.to_json %> 8 <% end %> 9 </div> 10 </div> 11

1 class Reward extends React.Component{ 2 render(){ 3 const reward = this.props.reward; 4 return ( 5 <div className={ this.rewardClass() }> 6 <div className="created_at">{ reward.created_at }</div> 7 <div className="description"> 8 <a href={ reward.giver_path }>{ reward.giver }</a> 9 <div className="glyphicon glyphicon-arrow-right" /> 10 <a href={ reward.recipient_path }>{ reward.recipient }</a> 11 <div className="border"> 12 { reward.description } 13 <div className="points">{ reward.value }</div> 14 </div> 15 </div> 16 </div> 17 ) 18 } 19 }

1 <div class="<%= reward_class(reward) %>"> 2 <div class="created_at"> 3 <%= reward.created_at.to_s(:short) %> 4 </div> 5 <div class="description"> 6 <%= link_to reward.giver, user_path(reward.giver) %> 7 <div class="glyphicon glyphicon-arrow-right"></div> 8 <%= link_to reward.recipient, user_path(reward.recipient) %> 9 <div class="border"> 10 <%= emojify reward.description %> 11 <div class="points"> 12 <%= reward.value_with_unit %> 13 </div> 14 </div> 15 </div> 16 </div>