Modern Front-end Development for Rails/

...

/

Adding Our First Component

Adding Our First Component

Learn how to add a component using React in this lesson.

We'll cover the following...

Using React for concert seats

Let’s take a second and talk about how we’ll use React to do what we want to. The concert page was quietly part of our original Rails app, but we haven’t looked at it closely yet. It currently has a grid of seats that we’d like to use to allow people to select what seats they want to purchase at a particular concert.

Right now, it’s just a grid of squares in an HTML table:

Press + to interact
<table class="table">
  <tbody>
    <% concert.venue.rows.times do %>
      <tr>
        <% concert.venue.seats_per_row.times do |seat_number| %>
          <td>
            <span class="button"><%= seat_number %></span>
          </td>
        <% end %>
      </tr>
    <% end %>
  </tbody>
</table>

The first thing we are going to do is convert this partial to give React control of that part of the page. Eventually we are going to add interactivity to allow a user to select seats, show a running total, and show the current status of seat purchases. But first we’re going to simply draw the table in React.

This feature has great potential for React because it is interactive, but yet does not use traditional browser form elements that might already have a lot of built-in functionality in the browser.

React encourages splitting your page into small components. To draw this section of the page, we’re going to have three components: one for each individual seat, one for each row that contains a row’s worth of seats, and one for the venue itself, which combines all the rows.

Here’s a screenshot of the page, with the boundaries of our eventual React components—Venue, Row, and Seat—marked:

The Seat component

Let’s work from the most inside component up, which in our case is the Seat component. I’ve decided to put all our React components in their own subdirectory of ...