why should we use import React from 'react'

Question

我正在学习React js，在Case ii App.js模块中，我必须导入React，因为render()方法被用来将JSX转换成DOM元素。然而在Person.js中，我们创建了一个箭头函数并将其导出，以便在App模块的render函数中可以导入和使用它。然而，在App模块中，我们导入了React，并且它会将模块person中的JSX转换并渲染到DOM中。但是当我们删除Person.js中下面的代码时，会抛出错误。

import React from 'react' in Person.js

出现错误了

使用JSX时必须在范围内引入'React', 如果我们在React类提供的方法（如render）中声明JSX，它应该会产生一个错误。

有人能解释一下吗？

i)为什么需要在Person.js中引入React？

ii)为什么删除上述代码时会报错？

案例i)

Person.js

 import React from 'react'

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

 export default person

第二种情况：

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;

- Sai Teja Pakalapati

---

谢谢！你能解释一下编译器如何理解 JSX 在 Person.js 中的使用吗？ - Sai Teja Pakalapati

静态分析使Babel能够检测JSX（通过一些插件）。然后它使用更多的插件来实际分解并解析/转换JSX为React.createElement。 - Andrew Li

感谢这条评论帮助我了解JSX是如何被编译器理解的。 - Sai Teja Pakalapati

Answer 1

如果你将一些JSX代码交给Babel，你会发现JSX只是对React.createElement调用的语法糖。这就是为什么我们在使用JSX时需要导入React的原因。

<p>This is person module used inside app module</p>

输出

/*#__PURE__*/
React.createElement("p", null, "This is person module used inside app module");

- Tholle

---

最新消息：React 17 和某些旧版本的指定主要版本现在包括一种新的JSX变换，不需要显式导入React。详情请见 https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html。 - kmui2

Answer 2

当你试图在JavaScript文件中使用JSX时，通常的编译器甚至Babel都无法理解它。尽管通常的编译器从不理解它。但无论如何，你想告诉你的编译器，我在文件中提供了一个JSX。

import React from 'react';

上面是指导babel进行操作的方法，现在对你来说是一项简单的任务。

<p>This is person module used inside app module</p>

上面是一个jsx语句。因此，每当你使用它时，你都需要导入React。同样，在许多地方，如actions、reducers等，我们不需要在那里使用它，因为我们没有jsx。

- Shubham Agarwal Bhewanewala