为什么需要在功能组件中导入 React？

React 是一个用于构建用户界面的声明式、高效且灵活的 JavaScript 库。它是 MVC 中的“V”。 ReactJS 是一个开源的、基于组件的前端库，只负责应用程序的视图层。

浏览器不理解 React，它只理解 HTML、CSS 和 JavaScript。因此，为了将 React 转换为有效的 JavaScript，我们使用了一个名为 Babel 的 webpack。它用于将 JSX 转换为对象，然后返回该对象。 Babel 已经包含在 create-react-app 生成的样板文件中。

让我们在示例的帮助下理解。

第 1 步：创建 React 应用程序

npx create-react-app reactapp

第 2 步：创建项目文件夹 ieloops 后，使用以下命令移动到该文件夹：

cd reactapp

项目结构：它将如下所示。

项目结构

第 3 步：在App.js中编写以下代码。下面是一个 JSX 语法。因此，无论何时使用它，都需要导入 React。

App.js

import React from 'react'
import ReactDOM from 'react-dom'
  
function App() { 
  return Hello, World!
}
  
const rootElement = document.getElementById('root')
ReactDOM.render(, rootElement)

App.js

import React from 'react'
import ReactDOM from 'react-dom'
  
function App() { 
  return React.createElemet("h1",null,"Hello World") ;
}
  
const rootElement = document.getElementById('root')
ReactDOM.render(, rootElement)

App.js

import React from 'react'
import ReactDOM from 'react-dom'
  
function App() { 
  return Hello, World!
}
  
const rootElement = document.getElementById('root')
console.log(App())
ReactDOM.render(, rootElement)

上面的 JSX 在内部被 Babel 转换为 this

Object
$$typeof: Symbol(react.element)
key: null
props: {children: 'Hello, World!'}
ref: null
type: "h1"
_owner: null
_store: {validated: false}
_self: null
_source: {fileName: '/src/index.js', lineNumber: 5, columnNumber: 10}
[[Prototype]]: Object

解释：

type：在这个例子中，我们的组件是代表根元素的对象，它是 h1 元素。 type 是对应于 HTML 元素的属性。
props：这个属性包含所有的孩子，在我们的例子中，它是 Hello, World！
key：你可能知道我们在 React 中映射时将 key 作为 prop 传递，在我们的例子中是 null。它用于唯一标识虚拟 DOM 中的元素。
ref：当您需要强制修改典型数据流之外的孩子时，我们需要 ref。
$$typeof：此属性将对象标识为 React 元素

代码编译后浏览器看到的是以下代码。

应用程序.js

import React from 'react'
import ReactDOM from 'react-dom'
  
function App() { 
  return React.createElemet("h1",null,"Hello World") ;
}
  
const rootElement = document.getElementById('root')
ReactDOM.render(, rootElement)

您可以通过将其登录到控制台来亲自查看它。

应用程序.js

import React from 'react'
import ReactDOM from 'react-dom'
  
function App() { 
  return Hello, World!
}
  
const rootElement = document.getElementById('root')
console.log(App())
ReactDOM.render(, rootElement)

说明： JSX 内部进入许多 React.createElement()函数调用，每个函数调用都返回一个对象，如上所示。现在正因为如此，我们需要从“react”导入 React，因为在内部每个 JSX 都在使用 JSX 转换器创建一个 React 组件。

因此，为了使用 createElement函数，我们需要导入 React，如果我们不导入它

那么 React.createElement函数将是未定义的。

注意：从 React 版本 17 开始，对于较小的项目，您甚至不需要从“react”导入 React，但早期版本的 React 项目需要导入它。 JSX 转换器在内部负责将 JSX 转换为 React 元素，但您可能仍需要导入它以使用诸如 useState 和 useEffect 之类的钩子。我们不需要在动作、reducers 等文件中导入 React，因为我们没有 JSX。

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：