импорт реагирует (строчные буквы) против импорт реагирует (прописные)

Question

Я пытаюсь импортировать реагировать в нижнем регистре

import react from 'react' (строчные буквы)

В мой компонент
Я знаю, что набрал его здесь в нижнем регистре и на самом деле это исправляется, когда я превращаю его в верхний регистр

import React from 'react' (заглавные буквы)

вот мой код

import react from 'react'
class Test extends react.Component{
    render(){
        return(
            <div>
                hi there
            </div>
        );
    }
}

вот что я получаю как ошибку, когда она в нижнем регистре:

Uncaught ReferenceError: React is not defined

мой вопрос: почему это происходит?

Answer 1

JSX - просто сахар для React.createElement вызовов , поэтому, если вы назовете React import равным react, React не будет определено.

Если вы по какой-то причинехотите изменить на react.createElement и импортировать react, , вы можете изменить прагму, например, // @jsx react.createElement комментарий .

Answer 2

Когда вы используете функцию рендера внутри класса компонента, она преобразует приведенный выше синтаксис jsx в React.createElement. Эта ссылочная ошибка на самом деле является этой "Реакцией".

Answer 3

Вам нужно import React from react.

Код, похожий на обычный HTML, на самом деле является JSX, который после транспиляции через веб-пакет использует React.createElement

import React from 'react'
class Test extends React.Component{
    render(){
        return(
            <div>
                hi there
            </div>
        );
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>