How to place react component on bitrix site?

Question

1C-Bitrix

Hello everyone, please tell me how to place a component on the site, in my case bitrix. I set it up on the local network via npm, it works, but I can’t figure out how to do it on the site. npm run build is probably not suitable. I need the component to be called on the main page, for example by clicking on a button. Here is the app.js calendar itself

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import DateFnsUtils from '@date-io/date-fns'; // choose your lib
import { ThemeProvider } from "@material-ui/styles";
import { createMuiTheme } from "@material-ui/core";
import format from "date-fns/format";
import ruLocale from "date-fns/locale/ru";
import {
  DateTimePicker,
  MuiPickersUtilsProvider,
} from '@material-ui/pickers';
import TextField from "@material-ui/core/TextField";

class LocalizedUtils extends DateFnsUtils {
  getDatePickerHeaderText(date) {
    return format(date, "d MMM yyyy", { locale: this.locale });
  }
}

const localeCancelLabelMap = {
  ru: "отмена",
};
const defaultMaterialTheme = createMuiTheme({
  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: '#e61e23',
      // dark: will be calculated from palette.primary.main,
      // contrastText: will be calculated to contrast with palette.primary.main
    },
  },
});

function App() {
  const [selectedDate, handleDateChange] = useState(new Date());
  var newDate  = new Date();
  newDate.setFullYear(newDate.getFullYear() + 1);
  return (
    <MuiPickersUtilsProvider utils={LocalizedUtils} locale={ruLocale}>
    <ThemeProvider theme={defaultMaterialTheme}>
    <DateTimePicker
    cancelLabel={"Отмена"}
    autoOk
    ampm={false}
    disablePast
    minDate={new Date()}
    maxDate={newDate}
    value={selectedDate}
    onChange={handleDateChange}
    label="24h clock"
format="d MM yyyy HH:mm"
  />
 </ThemeProvider>
    </MuiPickersUtilsProvider>
  );
}

export default App;

Answer 1

The ReactDOM.render function has a second argument in which you specify the html element inside which the application will be rendered. For example:

const container = document.getElementById('calendar');
ReactDOM.render(
                <App/>,
                container
);

Accordingly, you can do this: when you click on the button, draw an element with id="calendar" on the page and include the js file of the assembled application. If an element with the same id already exists, apply the display: visible style to it . Then the React application will appear when the button is clicked. Hiding can be done very simply by adding the display: none style to the element with id="calendar" .
Ps You can still experiment with this library.

Answer 2

Ok, but how to assemble this single

js file of the assembled application

? Is this done with webpack or npm run build is needed too, can you explain plz?