Как встроить React компонент в 1С-Битрикс: Управление сайтом?

Question

[maksipes]

Есть сайт на Битрикс, есть небольшой интерактивный компонент написанный React.js, нужно чтобы он выводился в шаблоне станицы сайта на Битрикс.

Answer 1

[Антон Спирин]

И в чем проблема?

Шаблон:

<div id="my-react-module-root"></div>
<script type="text/javascript" src="my-react-module-bundle.js"></script>

Точка входа:

import React from 'react';
import { render } from 'react-dom';
import MyReactModule from './MyReactModule';

render(
  <MyReactModule />,
  document.getElementById('my-react-module-root'),
);

Comments

[worldandlife]

Здравствуйте, столкнулся с такой же проблемой, есть комопнент календарь , на локальном сервере я его настроил с помощью npm, работает, а как мне его разместить на bitrix сайте, например на главной странице ?

app.js он же не увидит моих испортов, можете объяснить пожалуйста как это сделать?

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;