React Components Guide

Last updated: 2025-09-25 12:47:03

React Components

React components are the building blocks of React applications. They let you split the UI into independent, reusable pieces.

Functional Components

import React from 'react';

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

// Arrow function syntax
const Greeting = ({ name }) => {
  return <div>Welcome {name}</div>;
};

Using Hooks

import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Props and State

// Parent component
function App() {
  const [user, setUser] = useState({ name: 'John', age: 25 });
  
  return (
    <UserProfile user={user} onUpdate={setUser} />
  );
}

// Child component
function UserProfile({ user, onUpdate }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Age: {user.age}</p>
    </div>
  );
}