React Mastery / React Basics

What Are Components in React?

🧬 What's a Component?

In React, components are like building blocks that help you create the user interface in a clean and organized way. Each component handles a small part of the screen—like a button, a navbar, or a footer.

  • You can reuse components wherever needed.

  • They help in dividing the UI into smaller, manageable parts.

  • The root component (usually App.js) holds all the other components.

So instead of writing all your UI in one place, React lets you break it into smaller chunks (components) and combine them to build your full application.

🔍 Understanding React Components

Each component in React is either a function or a class (in older versions). It returns JSX, which looks like HTML but works inside JavaScript.

  • Components can receive data using something called props (short for properties).

  • They can also maintain their own data internally (known as state, which you'll learn later).

  • Components can also call other components, which makes your UI modular and scalable.

For example, a Navbar component can be used on every page of your app, and you can still customize it by passing different props.

React reads these components, processes the JSX, and renders the actual HTML in the browser.

So in simple terms, React components turn your code (JSX + logic) into real UI that users see and interact with.

🧬 Types of Components in React

1. Functional Components

  • These are JavaScript functions that return JSX (which looks like HTML).

  • Easy to write, read, and understand.

  • They can receive props (data passed from a parent component).

  • Most commonly used type in modern React.

2. Class Components

  • These are built using JavaScript ES6 classes and extend from React.Component.

  • They have access to more built-in features like state and lifecycle methods.

  • Used more in older versions of React.

  • Now less common because functional components can handle most use cases more easily.