9

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.

Omair Nabiel
  • 1,662
  • 2
  • 12
  • 24
  • 1
    It's because you can use React's Component method can be used. – Bhojendra Rauniyar Oct 01 '18 at 06:56
  • @Bhojendra Rauniyar - I didn't get your comment. Please edit –  Oct 01 '18 at 06: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 Oct 01 '18 at 06:58
  • 1
    It sems that you need to learn some basic stuff, like what a `class` and what `inheritance` is – Thomas Oct 01 '18 at 07:01
  • @Thomas - Yes i am also confused about the **super()** because i can use the for example **this.props.name** without calling the **super()**, then why to use the **super()**? –  Oct 01 '18 at 07:08
  • 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 Oct 01 '18 at 07:12

4 Answers4

10

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.

AndrewSteinheiser
  • 500
  • 5
  • 17
2

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

Jabar Sadiq Syed Ibrahim
  • 19
  • 3
0

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.

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • So, it means that the react has provided many ways to create and render the components, either creating component with the function or with class or with other methods, right ? And all these are process and serialized and fallen down to the DOM by the React at the end ? Right ? –  Oct 01 '18 at 07:13
  • 1
    React uses its own which is called ReactDOM. – Bhojendra Rauniyar Oct 01 '18 at 07:15
  • So, it means that the react has provided many ways to create and render the components, either creating component with the function or with class or with other methods, right ? And all these are process and serialized and fallen down to the ReactDOM by the React at the end ? Right ? –  Oct 01 '18 at 07:21
  • 1
    Sorry, I'm not quite clear with your question. But having a look at my another post should satisfy your query I think: https://stackoverflow.com/questions/52460185/updating-the-rendered-elementimmutable/52460393#52460393 – Bhojendra Rauniyar Oct 01 '18 at 07:26
0

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.

Jason Wei
  • 1
  • 1