React + Rails = <3

?

@hubertlepicki

 

BRUG

2015-05-14 18:45

Rails + ...

  • jQuery / ujs
  • Angular
  • Ember
  • Backbone

!Rails

  • meteor ?
  • Volt Framework?

Isomorphism

React

React vs. Angular/Ember

  • No router
  • No controllers
  • No models
  • No services
  • No providers
  • No factories

Views only

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
React.render(
  <CommentBox />,
  document.getElementById('content')
);

// index.html
<body><div id='content'></div></body>
var CommentBox = React.createClass({
  render: function() {
    return (
      React.DOM.div(
        {className: "commentBox"},
        "Hello, world! I am CommentBox"
      );
    );
  }
});

React.render(
  React.createFactory(CommentBox)(),
  document.getElementById('content')
);

// index.html
<body><div id='content'></div></body>
var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">

        <Comment author="Pete Hunt">
          This is one comment
        </Comment>

        <Comment author="Jordan Walke">
          This is *another* comment
        </Comment>

      </div>
    );
  }
});

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </div>
    );
  }
});

Try tutorial!

https://facebook.github.io/react/docs/tutorial.html

What I like about React?

  • Small reusable components
  • Small library
  • Small API
  • Very fast (virtual dom)
  • Plays nice with others (jQuery, lodash/underscore, postal.js)
  • Isomorphism

My current set up

  • Rails
  • lodash
  • postal
  • react
  • coffescript

react-rails

https://github.com/reactjs/react-rails

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

$ rails g react:install

# application.js:
//= require react
//= require react_ujs
//= require components


In ERB view:
<%= react_component('HelloMessage', name: 'John') %>

To pre-render server-side:
<%= react_component('HelloMessage', 
                    {name: 'John'},
                    {prerender: true}) %>
<%= react_component('HelloMessage', name: 'John') %>

<!-- becomes: -->

<div data-react-class="HelloMessage"
     data-react-props="{"name":"John"}">
</div>


<!-- react_ujs does the rest -->
//= require jquery
//= require react
//= require turbolinks
//= require jquery_ujs
//= require react_ujs
@Component = React.createClass
  render: ->
    `<ExampleComponent videos={this.props.videos} />`

react_component

expose React.DOM DSL for CoffeeScript

@Component = React.createClass
  render: ->
    div null,
      h1 null,
        "Hello, world!"

      ul className: 'my-list',
        li null, "Item 1"
        li null, "Item 2"
        li null, "Item 3"

      

@Component = React.createClass
  getInitialState: -> items: ["Item 1", "Item 2"]

  render: ->
    div null,
      h1 null,
        "Hello, world!"

      ul className: 'my-list',
        @state.items.map (item) ->
          li null, item

    # look mama how nice!

Thanks!

React + Rails = <3?

By Hubert Łępicki

Made with Slides.com

React + Rails = <3?

  • 1,333

More from Hubert Łępicki