React Mastery / React Basics

Class Components

🔵 Class Components in React

Class components in React are ES6 JavaScript classes that allow you to build UI just like functional components, but with more built-in features.

✅ What they can do:

  1. Receive props as input: Just like functions, class components can receive data (called props) and use it inside the component.

  2. Return JSX (like HTML): They return JSX that describes what should be shown on the screen.

  3. Maintain private state: This is what makes class components powerful. They can store and manage their own data, called state.

This state is private, meaning it's only available inside that component and not accessible directly from outside. The component uses this state to decide what to display and how to behave.

✅ How to Create a Class Component in React

  • To create class component we need 2 imports, we need react and the component class from react.

  • Use class to define your component.

  • Extend from React.Component.

  • Add a render() method to return JSX (the UI).