Importing component only in class not in function

Question

I’m bit confused Why we need to import component while creating class in react ? Why we can’t import react simply like we do in function component?

Answer 1

A functional component is just a plain JavaScript function which accepts props as an argument and returns a React element. A class component requires you to extend from React. Component and create a render function which returns a React element.

To get detailed information about Functional vs Class Based Components you can go through this article

React is popular because of its concept of Reusable web components

While creating functional components we are writing a function, returning JSX that we want this component to represent. Then in the ReactDOM.render() we have an instance of functional components, wrapping it in JSX tags, which is a self closing component

Function return ui that we want to represent on the page, but functional component cant do everything that we needed to do implement for eg. state and lifecycle methods

Functional components are also called stateless components, because we could not do all the complex things with it like life cycle methods

Class Based Components

The syntax of class is same as ES6

For class-based components we are using prototype system in Javascript and its setting up prototype with React.Component, that provide bunch of goodies for our React.Component

App.js

import React, {Component} from "react"

class App extends Component {
    constructor(){
    super()
    this.state={
    name:"Bhavya",
    age: 20
    }
    }
    render(){
    return(
    <div>
    <h1>{this.state.name}</h1>
    <h3>{this.state.age} years old</h3>
    </div>
    )
    }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from "./App"

class Main extends React.Component {
  render() {
    return (
      <h1>Hello world!</h1>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

The above code of App.js can be written like this also:

App.js

import React  from "react"                  ----> Take note of these two lines

class App extends React.Component {
    constructor(){
    super()
    this.state={
    name:"Bhavya",
    age: 20
    }
    }
    render(){
    return(
    <div>
    <h1>{this.state.name}</h1>
    <h3>{this.state.age} years old</h3>
    </div>
    )
    }
}

export default App;

In the above example App class extends Components, so React undersatnds that this class is a component, and it renders(returns) a React Element.. So a React class Components is an ES6 class, will be a component once it 'extends' React component See this

To know more about when to use functional OR Class based components refer this SO ans

React is the default export from the react package, whereas Component is a named export in that package. See this

To know why do you import React in functional components refer this blog