无法在React中导入类

Question

I have two react files as follows. They are in same folder. But it is not working.

Game.js

import { Board } from 'Board';

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
      </div>
    );
  }
}

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

And in Board.js

class Board extends React.Component {
  render() {
    return (
      <div>Test</div>
    );
  }
}
export { Board };

I have the following cdn in my project.

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dnd@2.4.0/dist/ReactDnD.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dnd-html5-backend@2.4.1/dist/ReactDnDHTML5Backend.min.js"></script>
    <script crossorigin src="https://unpkg.com/prop-types@15.5.10/prop-types.min.js"></script>

I couldn't run the project because it shows an error

react.js:1 Uncaught ReferenceError: require is not defined

Check this image

Answer 1

Import Board like this.

import { Board } from './Board';

Or export component like this in Board.js .

export default Board ;

import like this in Game.js

import Board from './Board';

Answer 2

In your Board component (Board.js), you can do something like this:

export class Board extends React.Component {
  // code 
}

In your Game component (Game.js), import it by doing:

import { Board } from './Board';