📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.
✅ Some premium posts are free to read — no account needed. Follow me on Medium to stay updated and support my writing.
🎓 Top 10 Udemy Courses (Huge Discount): Explore My Udemy Courses — Learn through real-time, project-based development.
▶️ Subscribe to My YouTube Channel (172K+ subscribers): Java Guides on YouTube
In this chapter, we will learn what is Component and types of Components in React.
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
Components
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
- Functional Components
- Class Components
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.
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;
Comments
Post a Comment
Leave Comment