React Unveiled #3 - Props, States & Events...

React, a powerful JS library for building UIs, works on three concepts: props, state, and event handling. These elements work together to create interactive applications. This blog goes into each concept, providing a solid foundation for your React development journey.

Props: Passing Data Between Components

Props, short for properties, act as a mechanism to pass data from parent components to their children. They serve as a one-way communication channel, ensuring parent components remain in control of the data that children receive.

Passing Props:

To pass props to a child component, we use attributes within the opening JSX tag of the child component. These attributes correspond to prop names in the parent component.

// Parent Component (App.js)
function App() {
  const name = "Alice";
  return (
    <div>
      <Greeting name={name} />
    </div>
  );
}

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

Here anove, the App component passes the name prop to the Greeting component, which uses the {} to embed the prop value into the greeting message.

Props as Function Arguments:

In functional components, props can be received as function arguments, similar to traditional functions.

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

States

State, on the other hand, is a for managing data within a component itself. State is mutable, meaning it can be updated throughout the component's lifecycle. This enables components to react to user interactions and maintain dynamic internal data.

Creating State:

State is created using the useState introduced in functional components. It returns an array containing the current state value and a function to update it.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Initial state is 0

  const handleClick = () => {
    setCount(count + 1); // Update state using setCount
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

Here, the Counter component uses the useState hook to create state for the count variable. The handleClick function is triggered on button click and updates the count state using the setCount function.

Event Handling: Responding to User Interactions

Events, such as clicks, key presses, or form submissions, are a vital part of interactive interfaces. React provides an efficient way to handle events within components using the onClick, onChange, and other event handlers attached to JSX elements.

function InputField() {
  const [text, setText] = useState(''); // State for input value

  const handleChange = (event) => {
    setText(event.target.value); // Update state on input change
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
    </div>
  );
}

Here, the InputField component manages the input value using state. The onChange event handler captures changes in the input field and updates the text state with the new value.

Conclusion

Props, state, and event handling are fundamental building blocks in React. By effectively utilizing these concepts, one can construct dynamic and responsive React apps. As you advance in your React development journey, you'll encounter more advanced techniques that build upon these core foundations.

In the upcoming blogs, we will explore another type of component. Stay tuned for a deep dive into the world of React components!