Prograils lightning talks 2015.11.10 - short introduction to React and Ruby on Rails

1. React
Brief Introduction
Maciej Litwiniuk
Prograils Lightning Talks, 10 Nov 2015

2. –https://facebook.github.io/react/
„A JavaScript library for building user interfaces”

3. It's the "V" in MVC

4. It's fast.

5. Like... really fast
Photo: Tim Shields, https://www.flickr.com/photos/glaciertim/4320524072/

6. Virtual DOM
Think of it like
something similar to
russian doll caching

7. 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

8. –Yoda
„So how to use it in Rails, you wondering must”

9. 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.

10. 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

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>
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>