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.

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.

• javascript
• reactjs
• react-native
• es6-class

• 1 It's because you can use React's Component method can be used. – Bhojendra Rauniyar Commented Oct 1, 2018 at 6:56
• @Bhojendra Rauniyar - I didn't get your comment. Please edit – user9066923 Commented Oct 1, 2018 at 6:57
• 1 There are a lot of hooks inside Component like render, componentDidMount, etc. and to use them you'll use React's Component. – Bhojendra Rauniyar Commented Oct 1, 2018 at 6:58
• 1 It sems that you need to learn some basic stuff, like what a class and what inheritance is – Thomas Commented Oct 1, 2018 at 7:01
• 2 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 Commented Oct 1, 2018 at 7:12

4 Answers 4

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.

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

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.

extends React.Component "extends" your component to the React library and allows your component to use all functions (as in JavaScript functions) contained within the React library. In other words, React.Component is the "component name" that references the entirety of the React library.

The React library is a collection of functions initially created by Jonathan Walke of Facebook back in 2011 to streamline their code development process for their specific needs. These functions proved to be useful in general, and so were adopted by the broader JavaScript community.

After your first few lessons of React, you'll usually start creating multiple class components "extended" to each other. For example, class ChildComponent extends ParentComponent {} where you want the ChildComponent to have access to(inherit) the properties of the ParentComponent. Well, React.Component is the "parent component" of all class components. Without React.Component, there would be no class components and no React.