ReactJS Components

ReactJS components, split the UI into independent reusable pieces that is called component. components are like JavaScript functions.

There are four types of react component.
  1. Class component (ES6)
  2. Old style createClass component (ES5)
  3. Stateless function component
  4. Presentational component
  • Class Component :- Stateful components are always class components. Stateful components have a state that gets initialized in the constructor but not required anymore.
Stateful Component Example :-

React components are using ES6 Classes, we are using React.Component—a base class—and extend it, meaning our component class is a derived class from React.Component.

By default when we are using an ES6 class, this is still equal to the component instance, however, depending on where it’s used it may be undefined.

In additional to this, you can notice that in our constructor(), we receive our component’s props as an argument and need to pass it to a call to super().

What is super function in react ? :- The super keyword is used to access & call functions on an object’s parent.

  • Old style createClass component (ES5) :- When we are writing React, you can use the React.createClass syntax  for creating component that is called createClass component.

 

 

  •  Stateless functional components :- Stateless components as a way to define React components as a function that is called Stateless functional components.

  • Presentational component :-

Presentational component is a component that renders HTML only. The component’s function is presentational markup. In term of Redux app, a presentational component does not interact with the Redux store.

The presentational component accepts props from a container component. The container component specifies the data a presentational component should render. The container component have individualize behavior.

Component uses and features

  1. Components provide strong encapsulation for reusable components.
  2. Components provide strong declarative library that keeps the DOM in sync with your data.

 

Categories: React

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of
Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.