React is not defined in simple React component ( Universal )

Question

I'm using 15.0.1 and using React to create Universal app

I was getting React is not defined in the following component

import {Component} from "react";

export default class HeroSearchView extends Component{

    render() {

        return (
            <div className='row'>
                hello
            </div>
        );
    }
}

The following code call that React component

import React from "react";
import { connect } from 'react-redux'
import Coupon from '../../common/components/Coupon'
import { actions as miscActions } from '../../redux/modules/misc'
import HeroSearchView from './components/HeroSearchView'


const mapStateToProps = (state) => ({
    misc:state.misc
})

export class HomeView extends React.Component{
    render() {

        return (
            <div>
                <HeroSearchView  />
                <Coupon {...this.props} />
            </div>
        );
    }
}

export default connect(mapStateToProps, Object.assign({}, miscActions))(HomeView)

I'm kind of scratching my head now what the following message means ...

ReferenceError: React is not defined
    at HeroSearchView.render (HeroSearchView.jsx:8:13)
    at [object Object].ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactCompositeComponent.js:679:34)
    at [object Object].ReactCompositeComponentMixin._renderValidatedComponent (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactCompositeComponent.js:699:32)
    at [object Object].wrapper [as _renderValidatedComponent] (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactPerf.js:66:21)
    at [object Object].ReactCompositeComponentMixin.performInitialMount (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactCompositeComponent.js:284:30)
    at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactCompositeComponent.js:237:21)
    at [object Object].wrapper [as mountComponent] (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactPerf.js:66:21)
    at Object.ReactReconciler.mountComponent (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactReconciler.js:39:35)
    at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactMultiChild.js:203:44)
    at ReactDOMComponent.Mixin._createContentMarkup (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactDOMComponent.js:589:32)

[ Note ] : If I remove <HomeSearchView /> from my example code, it works fine ...

Any tips will be appreciated ...

Answer 1

You need to use

import React from "react"

and

export default class HeroSearchView extends React.Component

This is because JSX convert your file to actual JS that calls React.createElement, and because you only imported Component from react, it couldn't find references to React

Answer 2

You can do something like this to keep your code tidy.

import React, {Component} from "react";

export default class HeroSearchView extends Component {

    render() {

        return (
            <div className='row'>
                hello
            </div>
        );
    }
}