How are the templates in the js_example module retrieved? I installed js_example, one of the sample modules in the Examples for Developers module.

In this module I found the following configuration:

css
 - jsweights.js
js
 - black.js
 - blue.js
 - brown.js
 - green.js
 - js_example_accordion.js
 - purple.js
 - red.js
src
 Controller
  - JsExampleController
templates
 - accordion.html.twig
 - description.html.twig
js_example.info.yml
js_example.libraries.yml
js_example.links.menu.yml
js_example.module
js_example.routing.yml


I do not understand how the template description.html.twig and accordion.html.twig are retrieved.

I miss this piece to understand the example completely.

In which file do I find the configuration I am looking for?
Inside js_example.module there's a function which declares how a render array using a certain '#theme' is to be rendered as HTML and which variables might be available. This function is hook_theme. It also can define a template that Drupal will look for inside the module's template folder.

function js_example_theme() {

  return [
    'js_example_accordion' =&gt; [
      'template' =&gt; 'accordion',
      'variables' =&gt; [
        'title' =&gt; NULL,
      ],
    ],
  ];
}


Next there is the src/Controller/JsExampleController.php which has a function to output stuff and is told to use the 'js_example_accordion'-'#theme' for that.

  public function getJsAccordionImplementation() {

    $title = $this-&gt;t('Click sections to expand or collapse:');

    $build['myelement'] = [
      '#theme' =&gt; 'js_example_accordion',
      '#title' =&gt; $title,
    ];

    $build['myelement']['#attached']['library'][] = 'js_example/js_example.accordion';

    return $build;
  }


That's the basics.



The description.html.twig is used a little bit differently but maybe just skip that for now as its some kind of advanced exception you'll understand later.