为什么import React from 'react'，React首字母必须大写？

Question

为啥我import React from 'react'没事，但是import react from 'react'就会报错？

错误信息为：'React' must be in scope when using JSX react/react-in-jsx-scope

这个不是解构吧，还要求名称一致？

而且index.js里面没有使用React，在把jsx转化的时候，到底是提供了怎么样一个环境呢？难道是自执行函数，但是直接import 'react'也报相同错误。

虽然感觉有点钻牛角尖，但是我实在搜索不到相关问题，望有人能够解答一二，谢谢！

Answer 1

把jsx编译到js需要调用一个函数, 这个函数在React叫React.createElement. 你可以比较一下jsx和编译出的js.

Answer 2

请题主采纳正确的答案，以免误导后来人：

• 目前采纳的“小火车”的回答是完全错误的；
• “jokester”的回答才是正确的。

import React from 'react';
const comp = () => (
    <div>something...</div>
);
//...

// 编译 JSX 后：

import React from 'react';
const comp = () => (
    React. createElement('div', null, 'something...' )
);
//...

这个问题跟首字母是不是大写没有关系，是必须使用React。

Answer 3

1. 你使用的‘react’文件 最后使用 module.exports = React;
2. 所以需要使用 import React from 'react';
3. 要是你想使用 react 的话 ，可以使用 as 对导出的React 重命名。
4. 详细可参考es6 module

Answer 4

import会被编译成require，而require是commonjs规范里的

Answer 5

import foo from 'react'
const React = foo

因为你当前作用域内，并没有名为 React 的对象。你 import 的时候可以另取别名， 但是 JSX 编译后依赖这个
React。

Answer 6

var React = {
    ...
}
module.exports = React;

React源码中exports的接口名称就是React，import时的变量名称必须和exports的接口一致，exports的使用参考

Answer 7

这是个约定熟成，不大写，babel编译会出错

Answer 8

用 TSX 的話 你可以隨意取名

Answer 9

在今天 已经不需要显式地引入react了

Answer 10

React的组件首字母必须大写，请参考 ！！！

大家好，我是Artwork全栈工程师。目前在 BAT 中的一家搬砖。从事前端工作9年有余，算是个老鸟了。希望可以帮助新人快速进阶，少走弯路，能把我的经验分享给大家。To learn more, please join us ,QQ Group：622923327