Why we do extends React.Component when creating the class component in React?

2
votes

I am new to React and i am very confused and continuously thinking about it day and night and almost all my hairs are fallen and still falling down, that why we always extends React.Component class when creating the component with the class.

But in the functional component and in other methods we do not do any such thing to push the created component into the React.Component class. So the main question is that What is React.Component class why we always add new components to it as a child using the extends and why we cannot create components in react native without using the extends in class component or without extending the React.Component class. So, what is React.Component class whats going on inside React under the hood, whats the scenario ?

I will be very very thankful to the person who will answer my question with examples and easy approach.

3
javascriptreactjsreact-nativees6-class
It's because you can use React's Component method can be used. – Bhojendra Rauniyar
@Bhojendra Rauniyar - I didn't get your comment. Please edit – user9066923
There are a lot of hooks inside Component like render, componentDidMount, etc. and to use them you'll use React's Component. – Bhojendra Rauniyar
It sems that you need to learn some basic stuff, like what a class and what inheritance is – Thomas
The things you don't know have nothing to do with react but these are basic programming things you have to learn. They are not even specifc to JS; You're asking a question similar to "what is a function and why should I use it" Sry, but my best answer is: You need to learn some basics. Learn what classes are and what inheritance is – Thomas

3 Answers

2
votes

React components are simply functions.

For example, you can render a functional react component without importing react, as long as you don't use JSX.

If you want to use JSX and write your HTML in your js file, then you need to import react.

If you want to write a component that takes advantage of the lifecycle methods you will need to extend the default Component class. The Component class contains the lifecycle methods and should not be confused with other generic react components, such as functional components or any component you may write. This Component refers to a specific class implementation maintained by react.

Extending Component will give you access to functions like componentDidMount, componentDidUpdate, componentWillUnmount and render.

1
votes

if you extend React.Component class , you can use the life cycle of the Component which can be used for mounting and unmounting.

Refer this https://reactjs.org/docs/react-component.html

0
votes

Normally, you'll use stateless component for presentation layer. And you'll use statefull component (class based component) for behavioral layer (container components). Container components can contain many actions and accepts many hooks you'd want to use. For eg. render(), componentDidMount(), etc.

You can read the blog written by the creator of React, Dan Abramov.

Further you may read the scotch blog.

But before you go further with React, I strongly suggest you to learn JavaScript and ES6+ features. There are a lot of materials to learn. But starting from MDN will be a good to go.