Search⌘ K
Home
Courses
Rails for Front-end Development: Essential Tools

Connecting to the Page

Explore how to connect React components to a Rails page by using Webpacker to embed React in specific DOM elements. Understand handling Turbo events and rendering components dynamically within a Rails application. This lesson helps you control React's interaction with the Rails DOM while preparing for deeper server communication.

We'll cover the following...

The Venue component

Like when we combine Seat components into a Row, we also need to combine Row components into a Venue. Our Venue component is similar to Row:

TypeScript 3.3.4
import * as React from "react"
import Row from "components/row"
interface VenueProps {
  rows: number
  seatsPerRow: number
}
const Venue = (props: VenueProps): React.ReactElement => {
  const rowNumbers = Array.from(Array(props.seatsPerRow).keys())
  const rowItems = rowNumbers.map((rowNumber) => {
    return (
      <Row
        key={rowNumber}
        rowNumber={rowNumber}
        seatsPerRow={props.seatsPerRow}
      />
    )
  })
  return (
    <table className="table">
      <tbody>{rowItems}</tbody>
    </table>
  )
}
export default Venue

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

We cheat herein that the list of row numbers is hard-coded. This is because we haven’t looked at ways to get the information about how many rows are in a venue from Rails to React. We’ll talk more about that in ...