React Components and Props

In this second article of our React for Beginners series, we will dive into the fundamental building blocks of React applications: components and props. We will learn how to create reusable UI elements, pass data between components, and handle events using props.

What are React Components?

Components are the building blocks of a React application. They are self-contained, reusable pieces of UI with their own state, behavior, and appearance. Components can be organized hierarchically and combined to create complex user interfaces. React components can be either functional or class components, but since the introduction of hooks, functional components are now the recommended way to create components.

Functional Components

Functional components are simple JavaScript functions that return JSX (JavaScript XML), a syntax extension for JavaScript that allows you to write HTML-like syntax within your JavaScript code. Here's a basic example of a functional component:

import React from 'react';

function Welcome(props) {
  return Hello, {props.name};
}

export default Welcome;

In this example, the `Welcome` component receives a `name` property through its `props` argument and returns an HTML element displaying a greeting message.

Props in React

Props (short for "properties") are used to pass data from parent components to their children. They allow you to create reusable components that can be customized with different data. Props are read-only, which means child components should not modify the props they receive.

Let's create a simple example to demonstrate the usage of props:

import React from 'react';

function Greeting(props) {
  return Hello, {props.name}!;
}

function App() {
  return (
    <div>
      <Greeting name="John" />
      <Greeting name="Jane" />
    </div>
  );
}

export default App;

In this example, the `Greeting` component receives a `name` prop and displays a personalized greeting message. The `App` component uses the `Greeting` component twice, passing different `name` props to create unique messages for each instance.

Handling Events with Props

Props can also be used to pass event handlers from parent components to their children. This allows child components to communicate with their parents and helps to maintain a unidirectional data flow. Here's an example of handling a button click event using props:

import React from 'react';

function Button(props) {
  return <button onClick={props.onClick}>Click me</button>;
}

function App() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <Button onClick={handleClick} />;
}

export default App;

In this example, the `handleClick` function is defined in the `App` component and passed as a prop to the Button component. The Button component assigns the onClick prop to the onClick event handler of the button element. When the button is clicked, the handleClick function is called, and an alert is displayed.

Children Props

In React, components can have child components, which allows you to build complex UI structures. The special `children` prop allows you to pass child elements directly from a parent component without explicitly defining a prop. Here's an example:

import React from 'react';

function Card(props) {
  return (
    <div className="card">
      <h2>{props.title}</h2>
      <div>{props.children}</div>
    </div>
  );
}

function App() {
  return (
    <Card title="My Card">
      <p>This is a paragraph inside the card.</p>
    </Card>
  );
}

export default App;

In this example, the `Card` component has a `title` prop and a `children` prop. The `children` prop allows you to pass any JSX elements as children of the `Card` component, which are then rendered inside the card's content area.

Conclusion

In this article, we've explored the basics of React components and props. We've learned how to create functional components, pass data between components using props, handle events with props, and use the special `children` prop. Understanding components and props is essential for building scalable and maintainable React applications.

Programming 101