ReactJS Tutorial for Beginners - 4 - Components

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

❮ 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 ❯

---

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF