Search⌘ K
Home
Courses
Modern Front-end Development for Rails

Tying Into the Page

Explore the process of integrating React components into a Rails application page using Webpacker. Understand how to render React components within existing DOM elements, set up event listeners for page load, and connect your React components to Rails views to create interactive user interfaces while maintaining performance.

We'll cover the following...

The Venue component

As we combined Seat components into a Row, we also need to combine Row components into a Venue. Our Venue component is very similar to Row:

TypeScript 3.3.4
import * as React from "react"
import Row from "./row"
interface VenueProps {
  rows: number
  seatsInRow: number
}
const Venue = (props: VenueProps) => {
  const rowNumbers = [1, 2, 3, 4, 6, 7, 8, 9, 10]
  const rowItems = rowNumbers.map(rowNumber => {
    return (
      <Row
        key={rowNumber}
        rowNumber={rowNumber}
        seatsInRow={props.seatsInRow}
      />
    )
  })
  return (
    <table className="table">
      <tbody>{rowItems}</tbody>
    </table>
  )
}
export default Venue

There’s a minor difference. The Venue returns an HTML table, and the props type is a little different, but basically the structure is similar: we still use map to convert a list of row numbers to a list of row items.

We do cheat here a little bit in that the list of row numbers is hard-coded. This is because ...