Loading
MindXchange
MindXchange
MindXchange

Quipoin Menu

Learn • Practice • Grow

Tutorial Exercises MCQs Interview Q & A Tests
react / React Components
tutorial
ExercisesInterview QsMCQVideosDiscussion

React Components

Imagine you are building a Lego castle. You don't create the castle as one giant, solid piece. Instead, you build it using many smaller Lego blocks—a door block, a window block, a tower block—and then you assemble them together. In React, these Lego blocks are called **components**.

Components are the heart and soul of React. They are reusable, independent pieces of code that define how a part of the user interface (UI) should look and behave. Think of them as custom, reusable HTML elements that you create yourself.

What is a React Component?

A component is a JavaScript function or class that optionally accepts inputs (called 'props') and returns a React element that describes what should appear on the screen.

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Types of Components

In React, there are two main ways to create components:

1. Functional Components (Modern, preferred way)
These are simple JavaScript functions that accept props as an argument and return JSX.
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

2. Class Components (Older way, still found in legacy code)
These are ES6 classes that extend `React.Component` and must have a `render()` method.
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Why Use Components?

  • Reusability: Write once, use everywhere. A Button component can be used throughout your app.
  • Separation of Concerns: Each component handles one specific part of the UI, making code easier to understand and maintain.
  • Testability: Smaller, isolated components are easier to test.
  • Collaboration: Different team members can work on different components simultaneously.

Component Composition

Components can be used inside other components. This is called composition. It's how you build complex UIs from simple pieces.

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

In this example, the `App` component composes (uses) the `Welcome` component three times. Each one gets its own `name` prop.

Naming Convention

Component names must start with a capital letter. This is how React distinguishes between regular HTML tags (like `div`, `span`) and your custom components.
  • ✅ Correct: ``
  • ❌ Incorrect: `` (React would treat this as an HTML tag)

Two Minute Drill

  • Components are reusable, independent pieces of UI in React.
  • They can be created as functions (functional components) or classes (class components).
  • Functional components are simpler and the modern standard; class components are older but still in use.
  • Components accept inputs called 'props' and return JSX that describes the UI.
  • Components can be composed (nested inside other components) to build complex UIs.
  • Component names must start with a capital letter.
  • Benefits: reusability, maintainability, testability, and separation of concerns.
Practice ExercisesInterview QuestionsTake Quiz

Need more clarification?

Drop us an email at career@quipoinfotech.com