React is a popular JavaScript library for building user interfaces. It makes creating interactive and dynamic web applications easier by breaking the UI into reusable components. In this blog, we'll explore the core concepts of React: Components, Props, and State by providing examples to help you understand how they work together.

Components: The Building Blocks of React

What are Components?

Components are the fundamental building blocks of a React application. Think of them as Lego blocks you can use to build your UI. Each component is a self-contained UI piece that you can reuse and combine with other components to create complex interfaces.

React component typically consists of both JavaScript logic and UI. This combination is one of the key features that makes React powerful and efficient for building complex user interfaces.

Example of a Component

In this example:

We define a functional component called Title.

The component returns a simple HTML heading element (<h1>) with the text “Dented Code”.

Props: Passing Data to Components

What are Props?

Props (short for properties) are a way to pass data from parent component to child components. They are like parameters for functions, allowing you to customise the behaviour and appearance of an element. Props are immutable, meaning they cannot be changed by the component that receives them. They allow you to use the same logic but display different UIs by passing different data to the component. React Props are like function arguments in JavaScript and attributes in HTML.

Example of Using Props

Let's create an InputField component that can be customised with different types, IDs, and placeholders using props:

To see how this component can be reused with different props, let's create a Form component:

In this example:

• The InputField component is used twice in the Form component.

• Each InputField instance is customised with different props (type, id, and placeholder).

Why Use Props?

Props allow you to create flexible and reusable components. By passing different data to the same component, you can render different UIs without duplicating code. This makes your application more maintainable and scalable.

State: Managing Dynamic Data

What is State?

State is a way to manage dynamic data in a React component. While props are used to pass data from parent to child components, the state is used to handle data that can change over time within a component based on user action. Every time the state of the object changes,React re-render the component of the browser. To use the useState , we first need to import it into our component.

import { useState } from "react";

Syntax for State //const [state, setState] = useState(IntialState);

Example 1 of Using State:

Let's create a simple component that allows users to update a name:

In this example:

• We use the useState hook to declare a state variable called name and a function setName to update it.

• The component displays the current value of name and a button to update the name.

• When the button is clicked, the setName function updates the state, causing the component to re-render with the new name value.

Example 2 of Using State:

Let's create a simple counter component that allows users to increment and decrement a count value:

In this example:

• We use the useState hook to declare a state variable called counterNumber and a function setCounterNumber is used to update the counterNumber state.

• The component displays the current count and two buttons to increment and decrement the count.

• The onClick handlers for the buttons update the state, which causes the component to re-render with the new value.

• When the buttons are clicked, the setCount function updates the state, causing the component to re-render with the new count value.

Conclusion

In this blog, we've covered the basics of React components, props, and state. Components are the building blocks of your UI, props allow you to pass data between components, and state lets you manage dynamic data within a component. By understanding these core concepts, you can start building interactive and reusable UI components with React.