@worldandlife

Как разместить компонент react на сайт bitrix?

Всем привет, подскажите пожалуйста как разместить компонент на сайте, в моем случае bitrix. На локалке через npm настроил, работает, а вот как на сайте сделать не могу понять. npm run build наверное не подходит. Мне нужно, чтобы компонент можно было вызвать на главной странице, например кликнув на кнопку. Вот сам календарь

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;
  • Вопрос задан
  • 152 просмотра
Пригласить эксперта
Ответы на вопрос 2
@dimuska139
Backend developer
У функции ReactDOM.render есть второй аргумент в котором вы указываете html-элемент, внутрь которого будет рендерится приложение. Например:
const container = document.getElementById('calendar');
ReactDOM.render(
                <App/>,
                container
);

Соответственно, можно сделать так: при клике на кнопку рисовать на странице элемент с id="calendar" и подключать js-файл собранного приложения. Если элемент с таким id уже существует, то к нему применять стиль display: visible. Тогда React-приложение будет появляться при нажатии на кнопку. Скрывать можно очень просто, путём добавления стиля display: none для элемента с id="calendar".

P.s. ещё можно поэкспериментировать с вот такой библиотекой.
Ответ написан
@worldandlife Автор вопроса
Ок, а как собрать этот единый
js-файл собранного приложения
? Это делается с помощью webpack или npm run build тоже нужен, можете объяснить плз?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы