Adding Our First Component

Let’s take a second and talk about what we are going to use React to do. The concert display 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 seat they want to purchase at the particular concert being displayed.

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

 <table class=​"table"​>
  <tbody>
 <%​ @concert.​venue​.​rows​.​times​ ​do​ |row| ​%>
  <tr>
 <%​ @concert.​venue​.​seats_per_row​.​times​ ​do​ |seat| ​%>
 <%​ ticket = @concert.​find_ticket_at​(
 row: ​row + 1,
 number: ​seat + 1
  ) ​%>
  <td>
 <%=​ link_to(ticket_path(ticket.​ ...

Get Modern Front-End Development for Rails now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.