Functional Components

Understanding Functional Components in React with Real Examples

React is a JavaScript library for building user interfaces, and one of its core concepts is the component-based architecture. Components are reusable, self-contained pieces of code that define how a part of the UI should appear and behave. In React, components can be either class components or functional components.

Functional components are simpler and more concise than class components. They are just JavaScript functions that take props as an argument and return React elements to describe what should be rendered on the screen. In this article, we'll explore the basics of functional components and provide real-world examples to help you understand their usage.

Basics of Functional Components

Let's start with a simple example of a functional component. Consider a basic "HelloWorld" component that takes a name prop and displays a greeting:

// HelloWorld.js
import React from 'react';

const HelloWorld = (props) => {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
};

export default HelloWorld;

In this example, HelloWorld is a functional component that receives a prop (name) and returns a React element containing a greeting. The component is then exported for use in other parts of the application.

Stateless Functional Components

Functional components are also known as stateless functional components because they don't have their own internal state. They rely solely on the props passed to them. Let's extend our example with another functional component that displays a message based on the time of day:

// GreetingMessage.js
import React from 'react';

const GreetingMessage = ({ timeOfDay }) => {
  let message;

  if (timeOfDay === 'morning') {
    message = 'Good morning!';
  } else if (timeOfDay === 'afternoon') {
    message = 'Good afternoon!';
  } else {
    message = 'Good evening!';
  }

  return <p>{message}</p>;
};

export default GreetingMessage;

Now, we can use both components together in a parent component or a React application:

// App.js
import React from 'react';
import HelloWorld from './HelloWorld';
import GreetingMessage from './GreetingMessage';

const App = () => {
  return (
    <div>
      <HelloWorld name="Alice" />
      <GreetingMessage timeOfDay="morning" />
    </div>
  );
};

export default App;

Hooks in Functional Components

With the introduction of React Hooks, functional components gained the ability to manage state and side effects. One commonly used hook is useState. Let's create a simple counter component using useState:

// Counter.js
import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

// App.js
import React from 'react';
import Counter from './Counter';

const App = () => {
  return (
    <div>
      <HelloWorld name="Bob" />
      <Counter />
    </div>
  );
};

export default App;