Как внедрить react в отдельную страницу?

Question

[Leopandro]

У меня есть несколько веб приложений, в которых например нужно реализовать сложную форму или грид. Как подключить реакт чтоб можно было им отрендерить нужный мне контент, потому что если писать на чистом js то получится каша?

Comments

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

Как внедрить react в отдельную страницу?

Заглянуть в документацию или хотя бы почитать туториал и узнать.
Любое React приложение по сути "внедряется в отдельную страницу". При этом внедрить можно неограниченное количество приложений.

Answer 1

[Станислав Тамат]

В точке входа в приложение (app.js(x)) вашей страницы объявляете функцию и пробрасываем пропсы для инициализации и вызываете `render` из `react-dom`.

window.renderView = function (data) {
  render(<App
    foo={data.foo}
    bar={data.bar}
  />, document.getElementById('app'));
};

На страничке создаете контейнер для вашего приложения и вызываете нашу функцию 'renderView'

<div id="app"></div>
<script>
renderView({
    foo: 1,
    bar: 'prop'
})
</script>

Как вы будете подключать собранный через babel "bundle" зависит от архитектуры вашего приложения, но он должен загрузиться с этой страницей.

Comments

[Макс]

1. babel транспилирует, а не собирает. Имелся в виду webpack, подозреваю
2. domNode лучше передавать в вызов функции аргументом, а не хардкодить в реакт приложении