Components in React

In the world of React, everything is a Component. If JSX is the language, components are the building blocks.

Think of a React component like a LEGO brick: it’s a self-contained piece of UI that you can combine with other bricks to build something massive.

Functional Components

A functional component is a JavaScript function that returns JSX.

function WelcomeMessage() { // Define a functional component 
  return <h1>Returning JSX, an h1 element!</h1>; // Return JSX
}

Functional components are reusable and can receive props to display dynamic content.

Component Structure

A well-structured component typically follows this internal order:

1. Imports: Bringing in React, CSS, or other components.
2. Logic/Hooks: Where you define state and side effects.
3. Return Statement: The JSX that defines the UI.
4. Export: Making the component available for use in other files.

//IMPORT: imports the React library into this file so we can use JSX and React features
import React from "react";

function Card({ title, description }) {
    // This is a functional component
    // Hooks (like useState, useEffect) would be declared here
  
    // HOOK: useState adds state to this functional component
   // 'liked' is the current state value
  // 'setLiked' is the function used to update the state
  const [liked, setLiked] = useState(false);

 function toggleLike() {
    setLiked(!liked); 
    // LOGIC: Updates the state when the button is clicked
  }

// RETURN: Specifies what UI (JSX) this component should render
  return (
    <div className="card">
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  );
}
// EXPORT: Makes this component available to be imported and used in other files
export default Card;

Reusable Components

Components can be reused multiple times with different data.

Get Nimmikrishnab’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Instead of writing the same button code ten times, you create one CustomButton component and pass different props to change its look or behavior.

// Define a functional component that takes props: label and color
function CustomButton({ label, color }) {
// Return JSX for the component
  return (
  // Render a <button> element with inline style using the color prop
  // and display the text from the label prop inside the button
    <button style={{ backgroundColor: color }}>
      {label}
    </button>
  );
}

// Example Usage of same component to render two behaviors
// From Parent Component passing different props
function App() {
  return (
    <>
      <CustomButton label="Save" color="green" /> // Renders a green button with text "Save"
      <CustomButton label="Delete" color="red" /> // Renders a red button with text "Delete"
    </>
  );
}

Props

“Props” (short for properties) are how we pass data from a Parent component to a Child component. Props are read-only; a child cannot modify the props it receives.

// Parent Component
function App() {
  return <UserCard name="Alex" occupation="Developer" />;
}

// Child Component
// uses the props passed down to render accordingly
function UserCard(props) {
  return (
    <div className="card">
      <h2>{props.name}</h2>
      <p>{props.occupation}</p>
    </div>
  );
}

Can define default values for props if a parent component doesn’t provide them.

function Button({ text }) {
  return <button>{text}</button>;
}

// Default prop
Button.defaultProps = {
  text: "Click Me",
};

// Usage
<Button />           // Renders: Click Me as no props passed down
<Button text="Save" /> // Renders: Save

Conclusion

Components divide the UI into manageable pieces, with functional components being simple and widely used. Props make them dynamic and reusable, while default props provide safe fallback values. Together, components form the foundation of React, enabling state, hooks, and composition.