Cannot find module 'react'というエラーについて

Question

React学習中のプログラミング初心者です。
下記の動画を参考にReactでアプリをつくろうとしております。
（https://www.youtube.com/watch?v=vppVZsR6uoo&t=384s)
Appという文字の出力を期待したところ、コンソール上で図1のようなエラーが出ました。
エラー原因のご指導をお願いいたします。

（図１)

(App.js)

import React from 'react'

function App() {
  return (
    <div>
      App
    </div>
  )
}

export default App

(index.jsx)

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom';
import App from '../components/App'

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <BrowserRouter>
      <App/>
    </BrowserRouter>,
    document.querySelector('#root'),
  );
});

index.jsxが下記のような場合は、「Hello React!」とエラーなくメッセージが出力されていました。

(index.jsx)

// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
// of the page.

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

const Hello = props => (
  <div>Hello {props.name}!</div>
)

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Hello name="React" />,
    document.body.appendChild(document.createElement('div')),
  )
})