Understanding React Components: The Building Blocks

Welcome to Part 3 of our React.js series! Today we’ll explore the fundamental concept that makes React so powerful – Components. By the end, you’ll be creating your own reusable components like a pro.

What Are Components?

In React, components are independent, reusable pieces of UI. Think of them like Lego blocks – you build small pieces that combine to form complex interfaces.

Two Types of Components:

• Functional Components (Modern, preferred way)
• Class Components (Older, still used in legacy code)

Creating Your First Functional Component

Functional components are simply JavaScript functions that return JSX:

function Welcome() {
  return <h1>Hello, React Developer!</h1>;
}

// Usage: <Welcome />

Component Composition

Components can nest inside other components:

function App() {
  return (
    <div>
      <Welcome />
      <Welcome />
      <Welcome />
    </div>
  );
}

Passing Data with Props

Props (short for properties) let you customize components:

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

// Usage: <Greeting name="Sarah" />

Modern Props with Destructuring

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Component Styling

Three popular ways to style React components:

• Inline Styles (JavaScript objects)
• CSS Stylesheets (Traditional approach)
• CSS-in-JS (Styled-components, Emotion)

Example: Inline Styling

function ColoredText() {
  const style = {
    color: 'blue',
    fontSize: '24px'
  };
  
  return <p style={style}>Styled text!</p>;
}

Component Best Practices

• 💡 Keep components small and focused
• 💡 Name components with PascalCase (e.g., UserCard)
• 💡 Keep JSX clean and readable
• 💡 Separate concerns (presentation vs logic)

Practical Exercise

Try creating these components in your project:

1. A Header component with your blog name
2. A PostCard component that accepts title and content props
3. A Footer component with copyright information

What’s Next?

In Blog 4, we’ll dive into:

• 🔥 Understanding State in React
• 🔥 The useState Hook
• 🔥 Building interactive components

Got questions about components? Drop them in the comments below! 👇