React js with jsx: Uncaught ReferenceError: require не определен - PullRequest
Новая
       10

React js with jsx: Uncaught ReferenceError: require не определен

1 голос
/ 08 мая 2020

Чтобы добавить реакцию в моем существующем веб-приложении, у меня есть файл index.js, где есть файлы button и thanks.js, или есть thank you message, записываемый в jsx, теперь, если кто-то нажимает боттоном я показываю сообщение. Если я попытаюсь импортировать thanks component в index.js, это не сработает, я получу эту ошибку Uncaught ReferenceError: require is not defined

index. html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>My app</title>
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    </head>
    <body>
        <div class="flex-center position-ref full-height">

            <div class="content">
                <div class="title m-b-md">
                    <div id="like_container"></div>
                </div>
            </div>
        </div>
        <!-- Load React. -->
        <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
        <!-- Babel -->
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

        <!-- Load our React component. -->
        <script src="js/src/index.js" type="text/babel"></script>
    </body>
</html>

index. js

'use strict';

import Thanks from './thanks';

class Like extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return <Thanks />;
    }

    return (
      <button onClick={() => this.setState({ liked: true }) }>
        Like
      </button>
    );
  }
}

let domContainer = document.querySelector('#like_container');
ReactDOM.render(<Like />, domContainer);

спасибо. js

'use strict';

export default class Thanks extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <p>
        Thanks you for liking!
      </p>
    );
  }
}

Пожалуйста, помогите!

1 Ответ

1 голос
/ 08 мая 2020

Если вы используете npx create-react-app my-app для создания приложения - под капотом вы получите Babel и webpack .

Сборщик, такой как webpack или Parcel, позволяет писать модульные код и объедините его в небольшие пакеты для оптимизации времени загрузки.

Если вы добавите React в какое-либо существующее приложение, просто добавив React / Babel JS файлы, как вы 

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

вы можете использовать JSX, но вам, вероятно, не хватает сборщика, поэтому вы не можете делать такие вещи, как: 

import Thanks from './thanks';

Чтобы решить эту проблему, вы можете добавить какой-нибудь сборщик в свой проект (, и это, вероятно, правильный способ исправить это , особенно если у вас большое приложение)

или вы можете просто поместить свой код React в файлы JS (или один файл) и загрузить их вместе с React JS файл (ы) с использованием <script></script>: 

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

<!-- Custom files or it can be a single file -->
<script src="/js/my-thanks-component.js" type="text/babel"></script>
<script src="/js/my-another-component.js" type="text/babel"></script>

<script src="js/src/index.js" type="text/babel"></script>

В этом случае вам не нужно никуда делать импорт, потому что вы все равно загрузите все свои компоненты, поэтому вы можете просто использовать их всякий раз, когда вы нужно.

Например:

my-com компоненты. js

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

  render() {
    return (
      <p>
        Thanks you for liking!
      </p>
    );
  }
}

class Like extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return <Thanks />;
    }

    return (
      <button onClick={() => this.setState({ liked: true }) }>
        Like
      </button>
    );
  }
}

А потом загружаете: 

<script src="my-components.js" type="text/babel"></script>
<script src="js/src/index.js" type="text/babel"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...