Reactbeginner6 min read

Components

Master React components, the reusable and independent pieces of code that assemble to build stunning user interfaces.

Learning Goals

Create reusable functional components to split user interfaces.

Render multiple component instances with different values.

Nest components within each other to build layout trees.

Follow standard naming conventions for React components.

The Core Concept

Components are the heartbeat of React. Instead of managing a single massive HTML file, React splits the interface into small, isolated elements. There are two benefits: reusability and maintainability. For instance, you can write a Button component once and use it in 20 different places with different colors or text.

A React component is just a standard JavaScript function that returns JSX. In modern React, we use Function Components exclusively (avoiding old ES6 Class components). We can combine multiple child components inside a larger parent component to construct complex pages.

Visual guide

React concept flow

A simple original diagram to connect the lesson idea with real project flow.

1Concept

2Example

3Output

4Mistakes

5Practice

Code & Implementation

react

// 1. Child Component
function WelcomeMessage() {
  return <p>Thanks for visiting! We hope you learn something new today.</p>;
}

// 2. Parent Component (Container)
export default function HomePage() {
  return (
    <main style={{ padding: '24px' }}>
      <h1>Dashboard Home</h1>
      {/* Reusing the child component */}
      <WelcomeMessage />
      <WelcomeMessage />
    </main>
  );
}

Expected Output

UI preview:
- Heading 'Dashboard Home'
- Paragraph 'Thanks for visiting!...'
- Second duplicate Paragraph 'Thanks for visiting!...'

Build a Simple Navigation Bar

Hands-on practice task

Required for Mastery

The Challenge

Create a NavBar component. Inside, render a custom child component named NavLink three times with different names to build a header navigation skeleton.

Helpful Hints

•Define NavLink component returning a styled list item <li>.
•Define NavBar component returning a <nav> and an unordered list <ul> containing three <NavLink /> elements.

Quick Knowledge Check

Can components call other components?

Absolutely! Parent components routinely render child components. However, never declare a component function *inside* another component function, as this will recreate it on every render, causing bugs and lag.

Do I have to export every component?

Only if you need to import it into a different file. Usually, you have one default export per file, and minor helper components remain local.

Continue Learning

Next steps after this lesson

Previous lessonJSX Basics Next lessonProps Build a Simple Navigation BarCreate a NavBar component. Inside, render a custom child component named NavLink three times with different names to build a header navigation skeleton.Text CompareUse this free tool while practicing the lesson.Free Developer Learning HubExplore coding tutorials, tools, projects, automation guides, and resume resources.

Practice task

Create a NavBar component. Inside, render a custom child component named NavLink three times with different names to build a header navigation skeleton.

Ready to take action?

Supercharge your career workflows!

Discover free online utilities to format data, build job applications, and automate your productivity routine with TechIdea.

Browse 80+ Free Tools Build Professional Resume