Как добавить react библиотеку в существующий сайт?

Question

[SannX]

Создаю простенький сайт без node.js но с react. Использую этот туториал: https://ru.reactjs.org/docs/add-react-to-a-website... Чтобы react заработал, там советуют подключить его через CDN:

<div id="root"></div>

<!-- Load React. -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

<!-- Load your React component. -->
<script src="root.js"></script>

root.js написан с помощью JSX-синтаксиса. Теперь хочу расширить этот пример из туториала и добавить бибилиотеку react-csv-reader. Но как это сделать? Если ее импортировать внутри root.js, то будет ошибка "SyntaxError: import declarations may only appear at top level of a module". Если попробовать добавить ее через CDN:

<!-- Load React. -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://cdn.jsdelivr.net/npm/react-csv-reader@3.1.0/dist/react-csv-reader.min.js" crossorigin></script>

<!-- Load your React component. -->
<script src="root.js"></script>

то возникает ошибка "ReferenceError: module is not defined". Как успешно добавить эту библиотеку?

Comments

[Robur]

покажите код который вызывает ошибку в том и другом случае.

[Михаил]

походу у этого нет варианта подключения по ссылке https://github.com/nzambello/react-csv-reader

[Антон Иванов]

root.js должен быть скомпилированным файлом, в нем не может быть JSX шаблонов

[SannX]

Robur,

'use strict';

import CSVReader from 'react-csv-reader'

class App extends Component {

  render() {
    return (
      <CSVReader onFileLoaded={(data, fileInfo) => console.dir(data, fileInfo)} />
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

[SannX]

Антон, можно. В туториале написано как.

[Robur]

SannX, от этого и зависят ваши ошибки и то как можно это исправить. Если вы подключаете бабель тегом, и компилите jsx на лету, добавляя type="text/babel", то надо смотреть что там бабель выдает в итоге в той строке где у вас импорт.
А вообще вы используете подход "чтобы по быстрому поиграться", который в самой документации не рекомендуют использовать, не стоит от него ждать что все заработает сразу. Вот вы прогирались - теперь время делать все по нормальному.
Если выбрали его - будьте готовы к тому что надо сидеть и разбираться. что там происходит с импортом, как бабель это все компилит, может ли react-csv-reader работать как нативный модуль в браузере, или нет и прочие мелочи.
Если вы ждете готовый ответ на это-вряд ли вам его кто-то даст.

Лучший вариант, сделать сборку как общепринято, с бандлером и избавить себя от ненужных проблем.

[SannX]

Лучший вариант, сделать сборку как общепринято, с бандлером и избавить себя от ненужных проблем.

Robur, посоветуйте, пожалуйста, какой туториал (например из офиц сайта реакта) больше подходит для того, чтобы создать сайт без сервера node.js?

[Robur]

проще всего начать вот с этого https://reactjs.org/docs/create-a-new-react-app.ht...