How to Implement React Components

React components are the fundamental building blocks of any React application, allowing you to split the user interface into independent, reusable pieces. This article provides a straightforward guide on how to implement React components, covering functional components, passing data with props, managing internal state with hooks, and nesting components to build a complete application.

Understanding React Components

A React component is a self-contained piece of code that returns React elements (usually JSX) to be rendered on the screen. While React historically supported both Class and Functional components, modern React development primarily utilizes Functional components due to their simplicity and the introduction of React Hooks.

1. Creating a Basic Functional Component

To implement a functional component, define a JavaScript function that returns JSX (JavaScript XML). The component name must start with a capital letter so React can distinguish it from standard HTML tags.

import React from 'react';

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

export default Greeting;

In this example, the Greeting component returns a simple heading element.

2. Passing Data with Props

Props (short for “properties”) are read-only arguments passed into React components. They allow you to pass data from a parent component down to a child component, making the child component dynamic and reusable.

import React from 'react';

function UserProfile(props) {
  return (
    <div>
      <h2>User: {props.name}</h2>
      <p>Role: {props.role}</p>
    </div>
  );
}

export default UserProfile;

To use this component and pass props to it:

<UserProfile name="Alice" role="Developer" />

3. Adding State with the useState Hook

While props allow you to pass data into a component, state allows a component to manage and update its own internal data. To implement state in a functional component, use the useState Hook.

import React, { useState } from 'react';

function Counter() {
  // Declare a state variable named "count" and a function to update it
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

export default Counter;

In this implementation, clicking the button triggers setCount, which updates the state of count and causes React to re-render the component with the new value.

4. Nesting and Rendering Components

You implement a complete React user interface by nesting components inside a root component (usually named App).

import React from 'react';
import Greeting from './Greeting';
import UserProfile from './UserProfile';
import Counter from './Counter';

function App() {
  return (
    <div>
      <Greeting />
      <UserProfile name="Bob" role="Designer" />
      <Counter />
    </div>
  );
}

export default App;

In this structure, the App component acts as the container that composes the Greeting, UserProfile, and Counter components into a single, cohesive user interface.