React from 0 to Hero: Lesson 2 – Understanding Components, Props, and State

Hi devs
Welcome back to the React from 0 to Hero series! In the first lesson, we covered the basics of React and how to set up your first React app. If you missed it, be sure to check it out before diving into this one.

In this lesson, we’ll explore components, props, and state, which are key building blocks of any React application.

What Are Components?

In React, components are the heart of your app. A component is essentially a reusable piece of code that represents a part of the user interface. You can think of components as the building blocks of a React app. Each component works in isolation and renders its own part of the UI.

There are two main types of components:

• Functional Components: Simple JavaScript functions that return JSX.
• Class Components: ES6 classes that extend React.Component and include additional features like state (though we now commonly use functional components with Hooks).

In this lesson, we'll stick to functional components as they are the most modern and widely used.

Example of a Functional Component:

Here’s a simple functional component:

import React from 'react';

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

export default Greeting;

This component just returns some JSX (the HTML-like syntax), and you can now use <Greeting /> in your app to display this message.

Props (Properties)

Props are used to pass data from one component to another. They make components dynamic by allowing you to customize them based on the data they receive.

Example of Passing Props:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

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

In this example, App passes a prop called name to the Greeting component. When Greeting renders, it uses props.name to display "Hello, John!". You can pass any data via props—strings, numbers, arrays, even functions.

State in React

State allows components to keep track of changing data over time. Unlike props, which are read-only and passed down from parent components, state is managed within the component itself and can be updated.

With functional components, we use the useState Hook to manage state.

Example of State:

import React, { useState } from 'react';

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
    </div>
  );
}

export default Counter;

In this example:

• We declare a state variable count initialized to 0.
• useState(0) returns an array with two elements: the current state value (count) and a function to update it (setCount).
• Every time the button is clicked, the count is increased by one, and React re-renders the component to display the new value.

Combining Props and State

Now, let’s combine props and state in a practical example. We’ll create a simple salary calculator that calculates a user’s salary based on their hourly wage and the number of hours they work.

Salary Calculator Example:

import React, { useState } from 'react';

// Salary calculator component
function SalaryCalculator(props) {
  const [hoursWorked, setHoursWorked] = useState(0);

  const calculateSalary = () => {
    return props.hourlyWage * hoursWorked;
  };

  return (
    <div>
      <h1>Salary Calculator</h1>
      <p>Hourly Wage: ${props.hourlyWage}</p>
      <input
        type="number"
        value={hoursWorked}
        onChange={(e) => setHoursWorked(e.target.value)}
        placeholder="Hours worked"
      />
      <p>Total Salary: ${calculateSalary()}</p>
    </div>
  );
}

// App component
function App() {
  return (
    <div>
      <SalaryCalculator hourlyWage={25} />
    </div>
  );
}

export default App;

In this example:

1. SalaryCalculator takes an hourlyWage as a prop from the parent component.
2. It uses state (hoursWorked) to store the number of hours worked, which is updated when the user inputs a value.
3. The calculateSalary function calculates the total salary based on the hours worked and the hourly wage.

This shows how props and state work together to create a dynamic user interface that updates based on user input.

Conclusion

In this lesson, we covered some core React concepts: components, props, and state. By understanding these building blocks, you’re already well on your way to building powerful, interactive applications with React.

In the next lesson, we’ll go deeper into event handling and explore how to work with forms in React.

What’s Next?

In the upcoming lesson, we'll cover:

• Handling events in React
• Managing form inputs and user interactions