How many html files does Meteor render inside client directory?

I had a main.html inside client folder with many menus,header, footer etc. I also declared a div inside it to be rendered by a component.

...
 <div id="render-slides"></div>
 ...

And my main.js:

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import 'animate.css/animate.min.css'
import '../imports/css/sidebar.css';
//import './imports/js/nodcast.js';
//import './main.html';

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';

import '../imports/startup/accounts-config.js';
import App from '../imports/ui/App.js';

Meteor.startup(() => {
  render(<App />, document.getElementById('render-slides'));
});

It rendered the slides from the component, but I couldn't click on them as if they were covered with other divs. So, I entirely replaced my main.html with:

<head>

</head>

<body>
    <div id="render-slides"></div>
</body> 

And renamed my old main.html to main2.html. As I run the program, it shows my render slides inside the old structure (menuse, ...) in main2.html and I don't have the problem of clicking!!!

However, if I move main2.html I just have a blank html files containing the rendered components. Note in both html files I have the <div id="render-slides"></div>. So, I wonder how it works! Does it merege all html files inside client directory and render them together?!!