Почему мы должны использовать импорт React из React

Я изучаю React js в модуле случай ii App.js, мне нужно импортировать React, потому что метод оказывать() используется для преобразования JSX в элементы dom, но в Person.js мы создаем стрелочную функцию, и мы экспортируем ее, чтобы она могла быть импортированы и используются в функции рендеринга модулей приложения, как и в модуле приложения, который мы импортировали React, и он преобразует JSX в модуль person и отображается в DOM, но когда он выдает ошибку, когда мы удаляем приведенный ниже код в Person.js

import React from 'react' in Person.js

это выдает ошибку

React 'должен быть в области действия при использовании JSX, если мы объявляем JSX в методах (например, рендеринге), предоставленных из класса React, он должен выдать ошибку.

может кто-нибудь объяснить

i) зачем нам импортировать React в Person.js?

ii) почему при удалении вышеуказанного кода возникла ошибка?

случай i)

Person.js

 import React from 'react'

 const person = () => {
 return <p>This is person module used inside app module</p>
 };

 export default person

случай ii)

App.js

import React, { Component } from 'react';
import './App.css'
import Person from './Person/Person'

class App extends Component {
render() {
return (
  <div className = "App">
    <h1>this is app module and i am being used as the root component</h1>
     <Person/>
  </div>
);}}

export default App;