Как правильно установить различные модули в проект на React?

Question

Hahahahh @Hahahahh

React

Как правильно установить различные модули в проект на React?

Знаю что нужно использовать сборщик пакетов вроде webpack или browserify, но пока что нужно просто подключить модуль react-router. Пытаюсь подключить скриптом в html файле, как собственно подключал реакт и реакт-дом(которые работают прекрасно), но почему-то такой способ не работает. Ошибка такая: Link is not defined(В частности из react-router Link и нужен).

Вопрос задан более трёх лет назад
931 просмотр

Комментировать

Подписаться 2 Простой Комментировать

Помогут разобраться в теме Все курсы

Яндекс Практикум

Мидл фронтенд-разработчик

5 месяцев

Далее
Яндекс Практикум

React-разработчик

3 месяца

Далее
Яндекс Практикум

Фронтенд-разработчик

10 месяцев

Далее

Пригласить эксперта

Ответы на вопрос 2

Комментировать

9 комментариев

Hahahahh @Hahahahh Автор вопроса

Странно, смотрю сейчас гайды по 4 версии и там везде используется Link

Написано более трёх лет назад
titanium4februa @titanium4februa

Hahahahh, тоже только услышал, что Link убрали. Почему-то нигде в документации об этом не сказано. Могли бы пометить как устаревшее

Написано более трёх лет назад
titanium4februa @titanium4februa

У меня стоит в проекте версия 4.2.2, Link благополучно импортируется

Написано более трёх лет назад

Hahahahh @Hahahahh Автор вопроса

titanium4februa,

class Menu extends React.Component {
  constructor(props){
    super(props);
  };

  render() {
    return <div className = "sidebar">
    <div className = "inner">
          <nav>
            <ul>
              <li><Link to={"/music"}>Music</Link></li>
              <li><Link href="#My page">MyPage</Link></li>
              <li><Link to={"/news"}>News</Link></li>
              <li><Link href="#Quit">Quit</Link></li>
            </ul>
          </nav>
      </div>
    </div>;
  }
}

ReactDOM.render (<Menu />, document.getElementById('menu'));

Собственно код и соответствующая ошибка: Uncaught ReferenceError: Link is not defined.
Для меня просто непонятно почему посредством скрипта реакт и реакт-дом и я могу подключить, а другие библиотеки нет.

Написано более трёх лет назад

titanium4februa @titanium4februa

Hahahahh, а можешь скинуть код, где ты импортируешь Link?

Написано более трёх лет назад

Hahahahh @Hahahahh Автор вопроса

titanium4februa,

<head>
    <meta charset="utf-8">
    <script src="js/react/react.js"></script>
    <script src="js/react/react-dom.js"></script>
    <script src="js/react/browser.min.js"></script>
    <script src="js/react/EventEmitter.min.js"></script>
    <script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
    <script src="js/react/react-router.min.js"></script>
    <script src="https://use.fontawesome.com/444f77c152.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
  </head>

Ну как и говорил реакт работает, реакт-дом и ивентэммитер тоже, не понимаю в чем проблема. Кстати какие-либо другие библиотеки таким образом тоже не подключаются.

Написано более трёх лет назад

titanium4februa @titanium4februa

Hahahahh, а пробовал напрямую Link получить?
const Link = ReactRouterDOM.Link
Что-то типа вот этого

Написано более трёх лет назад
Hahahahh @Hahahahh Автор вопроса

titanium4februa, Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings. Видимо без сборщиков пакетов мне совсем не обойтись.

Написано более трёх лет назад
titanium4februa @titanium4februa

Hahahahh, попробуй brunch, если лень разбираться с Webpack

Написано более трёх лет назад