Book ma być komponentem React czy ma być tablicą? Bo w Sample16.tsx definiujesz tablicę o takiej nazwie, a w MainClass.tsx importujesz to i traktujesz Book jakby było komponentem, którym nie jest.
Jeśli chcesz wyświetlić dane z tablicy, to możesz to zrobić mapując np.
<div>
{
Book.map(book => <div key={book.id}>{book.title}</div>)
}
</div>
Przy czym najlepiej byłoby zmienić nazwę z Book np. na books (nazewnictwo Book sugeruje, że jest to klasa albo komponent Reacta, którym przecież nie jest).
No i zastanawiam się, czemu ma służyć bezpośrednie renderowanie w pliku Sample16.tsx:
const element = ReactDOM.createRoot(document.getElementById('root'));
element.render(<YearOfPublished />);
Jest to trochę nietypowe, ponieważ zwykle renderuje się w ten sposób korzeń aplikacji, a cała reszta jest automatycznie renderowana. Natomiast pliki zwykle eksportują poszczególne komponenty, ale nie renderują się same (ponieważ zwykle zakłada się, że takiego komponentu można użyć w wielu różnych miejscach i nie ma co renderować na sztywno)
Natomiast napisałeś:
Natomiast aby wyeksportować funkcje do klasy znajdującej sie w innym dokumencie musielibyśmy na dole dokumentu przypisać ją do obiektu reprezentowanego przez ReactDOM oraz dodać funkcję renderowania. W samej klasie klasie głównej rozszerzonej o komponent w innym dokumencie zwrócić ją w funkcji renderowania.
co sugeruje, że masz nie do końca dokładny model tego, do czego służy ta funkcja. ReactDOM nie jest do eksportowania, tylko do renderowania komponentów na ekranie komputera (ponieważ same komponenty tylko zwracają reprezentację tego, jak mają wyglądać i funkcja createRoot(.....).render() służy właśnie do wyświetlania komponentów).
