How to import React component from another file (w/out React app)

I am adding some React scripts to my HTML templates and I am trying to separate React code in separate files. I have not started a full-blown React app. I am therefore trying to import smaller components from other files into a "main" React script.

Here is my directory structure:

react
----components
--------Tag.js
--------Definition.js
----Definitions.js

Here is my code for Definitions.js (the "main" React script):

import Definition from './components/Definition';

class Definitions extends React.Component {
    ...
    render() {
        return <Definition definition={definition} />;
    }
}

ReactDOM.render(<Definitions />, document.querySelector("#definitions"));

Here is my code for Definition.js:

import Tag from './Tag';

class Definition extends React.Component {
    ...

    render() {
        return <Tag tag={tag} />;
    }
}

export default Definition;

This code is not rendering any component. What am I doing wrong?

Beforehand you need to render the React application to the actual DOM using ReactDOM.render, so you need to import it and target a valid element:

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return <>React App Example</>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

// target a valid element in index.html
<div id="root"></div>

Thats the reason why you not getting any errors, you don't even initial the application.

Then its just a normal import-export.

Please refer to React docs how to initial a React app.