ReactJS Tutorial for Beginners - 4 - Components

❮ Previous Chapter Next Chapter ❯

---

In this chapter,  we will learn what is Component and types of Components in React.

In react, a component represents a part of the user interface. Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. 

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

For example:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Components

The below React application has five components one for header, one for side nav one for the main content one for the footer, and finally one component to contain every other component the containing component is the root component and is usually named as the App component.

In our application, each of the four nested components describes only a part of the user interface however all the components come together to make up the entire application.

React components are also reusable the same component can be used with different properties to display different information. For example, the side nav component can be the left side nav as well as the right side nav, and as already mentioned components can also contain other components. For example, the App component contains the other components.

Component Types

There are mainly two components in React:

1. Functional Components
2. Class Components

In this chapter, we will take a quick look at component types and in the next chapters, we will understand more about each component type with an example.

1. Functional Components

• Functional components are basic JavaScript functions. These are typically arrow functions but can also be created with the regular function keyword.
• Sometimes referred to as “dumb” or “stateless” components as they simply accept data and display them in some form; that is they are mainly responsible for rendering UI.
• React lifecycle methods (for example, componentDidMount) cannot be used in functional components.
• There is no render() method used in functional components.
• These are mainly responsible for UI and are typically presentational only (For example, a Button component).
• Functional components can accept and use props.
• Functional components should be favored if you do not need to make use of the React state.

Here is a simple example of Functional component:

import React from "react";
const User = props => (
  <div>
    <h1>Hello, {props.name}</h1>
  </div>
);

export default User;

2. Class Components

• Class components make use of ES6 class and extend the Component class in React.
• Sometimes called “smart” or “stateful” components as they tend to implement logic and state.
• React lifecycle methods can be used inside class components (for example, componentDidMount).
• You pass props down to class components and access them with this.props.

import React, { Component } from "react";

class User extends Component {
  constructor(props){
    super(props);
    this.state = {
      myState: true;
    }
  }
  
  render() {
    return (
      <div>
        <h1>Hello Ramesh</h1>
      </div>
    );
  }
}

export default User;

In the next chapters, we will understand more about each component type with an example.

What's Next?

In this chapter, we learned what is Component and types of Components in React. In the next chapter, we will learn the React functional component with an example.

---

❮ Previous Chapter Next Chapter ❯

---