Testcafe - Page object structure and default class

I'm modeling a web page with a lot of items on it. Coming from a Ruby background, I had one class for each, say, large item and its subitems on the page. For instance, a navbar would be its own class:

import { Selector, t } from 'testcafe';

export class NavBar {
  constructor () {
    this.home = Selector('#home')
    this.intro = Selector('#intro')
    ...
  }
}

export class HeaderSection {
  ...
}

Questions:

1. Do I need a default class? My IDE is complaining, but the test work. I believe, the answer is no, but it's a good practice(?)
2. What's the recommended way to write a complex page model in JavaScript? I'm leaning to have one page class, say index and then have multiple child classes (Navbar and HeaderSection on my example) that inherit from the index class