Displaying Data in React Rails es6 jsx

It’s amazing how quickly I forget coding things. For instance I went back to my middleman blog today to create this article and I’m like how the crap do I do this? Hopefully one day, I can remember it all!

Aight, so Rails and Angular is shit. FUCK ANGULAR. But, Rails and React is awesome and easy. Well, I’ve been learning react for about a week and here’s what I’ve got for a rails implementation. Since I’m an idiot coder, I need simplicity. And amazingly, that’s exactly what react claims they give us. So let’s do a quick dive into displaying data using React on Rails.

This ain’t some guide for you, but for me, as always.

Good ReactJS questions on SO

http://stackoverflow.com/questions/24502898/show-or-hide-element-in-react-js http://stackoverflow.com/questions/27397266/onclick-event-binding-in-react-js http://stackoverflow.com/questions/29810914/react-js-onclick-cant-pass-value-to-method http://stackoverflow.com/questions/26176519/reactjs-call-parent-function –> how to update a child component when the parent managers state, very important

Easiest Way to implement React Component

Reach components are built in two steps. 1. Structure with Fake Data 2. Interactivity

State is reserved for step 2. If you’re writing interactivity in step 1 that’s bad practice. I wrote this part of the blog so I can clean my room and throw out this piece of paper with react principles.

In the beginning it’s important to have a version of the component without any interactivity. Use fake data to demonstrate that it works. This is because you’ll be writing a bunch of code, but it isn’t that difficult. Then the challenging part is the interactivity. And the interactivity takes less code, maybe a line or two, but it’s way more complext.

There’s a badass gem called react-rails. That’s what we’ll be using today.

$ rails new react-rails-es6-jsx $ cd react-rails-es6-jsx $ bundle

Aight, so now we’ve got our rails app. Let’s edit the Gemfile.

Add the Following Lines gem react-rails gem sprockets-es6

So react-rails will give us the ability to use easy Rails helpers in the views, and sprockets-es6 allows the asset pipeline to understand .es6 files so we can write in the future of Javascript. I feel so cool.

$ rails g react:install

This will put required files into application.js and things like that.

$ rails g scaffold Rabbits name:string age:integer $ rake db:migrate

Let’s go ahead and make a React Component Called Rabbits. This file will be located in /app/assets/javascripts/components/rabbits.es6.jsx

Let’s add the following contents to the file…

class RabbitShow extends React.Component {
  propTypes: {
    name: React.PropTypes.string,
    age: React.PropTypes.number
  }

  render() {
   return (
     <div>
       <h2>{this.props.name}</h2>
       <p>This Rabbit is {this.props.age} years old</p>
      </div>
    )
  }
}

Okay, so builds the React Component. Now let’s use it in a Rails View.

app/views/rabbits/show.html.erb <%= react_component “RabbitShow”, name: @rabbit.name, age: @rabbit.age %>

Let’s create a new Rabbit $ rails c

Rabbit.create(name:"Derp", age:30)

Let’s fire up the server $ rails s

And visit localhost:3000/rabbits/1

Then you’ll see react is presenting the Data for you!

Updating the Index

class RabbitsIndex extends React.Component {                                                             
  propTypes: {
rabbits: React.PropTypes.object                                                                      
  } 

  render() {                                                                                             
return (                                                                                             
  <div>     
  { this.props.rabbits.map((rabbit) =>                                                               
    <RabbitShow key={rabbit.id} name={rabbit.name} age={rabbit.age} />                               
  )}
  </div>
)   
  }     
}

This will loop through each of our rabbits and display them using our RabbitShow component.

Then in our app/views/rabbits/index.html.erb simply add the line…

<%= react_component "RabbitsIndex", rabbits:@rabbits %>

Post Content