I have followed the "hello world" module tutorial at https://www.drupal.org/developing/modules/8. At the end of the tutorial, you create a custom page which gets generated from a render array you created in the module's controller. The content is a single line of text, contained in the #markup
field in the render array.
Now I'm trying to go beyond and create a more complex page, with some ajax-enabled elements. Hard-coding a bunch of HTML and Javascript into the #markup field does not seem to be the way to go. And looking through other modules, I see that most do not have a #markup
field, but a bunch of other fields, some of which seem to be custom fields (possibly adhering to an unknown naming convention), and others which appear to be defined by Drupal core. But in some cases it's not clear which are which, and after hours of searching the Drupal documentation and the wider internet, I cannot find a clear explanation of how the different fields in the array are interpreted and translated into HTML. (It seems that "theme hooks" may be involved somehow, but it's not clear to me which hooks are needed or where those hooks should be defined)
Can someone provide or point me towards an explanation of how to get to a desired HTML layout and set of javascript behaviors using render arrays?