DEV Community: Mayuresh Surve

🚀 Day 15: Building Tip Calculator with React 🚀

Mayuresh Surve — Tue, 13 Aug 2024 22:48:42 +0000

Building a Tip Calculator with React

Another day, another project! Today, I dove into building a Tip Calculator using the knowledge I've gathered so far in my React learning journey. Although this project was small, it provided a great opportunity to refine my understanding of React’s core concepts, specifically focusing on keeping components pure, efficiently using the Context API, and leveraging reducers for state management.

Keeping Components Pure

One of my primary goals with this project was to maintain pure components. A pure component is a component that renders the same output for the same props and state, without causing any side effects. This predictability makes debugging easier and ensures that my components are more reusable and easier to test.

Here’s one of the example how I kept the BillInput component pure:

function BillInput() {
    const state = useContext(TipCalculatorStateContext);
    const dispatch = useContext(TipCalculatorDispatchContext);

    return (
        <div>
            <label>How much was the bill?</label>
            <input
                type="text"
                placeholder="Bill value"
                value={state.bill}
                onChange={(e) =>
                    dispatch({
                        type: "set_bill",
                        payload: Number(e.target.value),
                    })
                }
            />
        </div>
    );
}

This component is solely responsible for capturing the bill amount and doesn't concern itself with tip calculation or other logic. By doing so, I ensured that BillInput is predictable and reusable in different contexts.

Using the Children Prop Effectively

Another key takeaway from this project was how I used the children prop to pass data between components. The children prop in React allows me to pass any node as a child of a component, which I utilized to keep my components flexible and reusable.

For example, in the SelectPercentage component, I used the children prop to customize the label text:

function SelectPercentage({ children, actionType }) {
    const state = useContext(TipCalculatorStateContext);
    const dispatch = useContext(TipCalculatorDispatchContext);

    const percentage =
        actionType === "set_percentage1"
            ? state.percentage1
            : state.percentage2;

    return (
        <div>
            <label>{children}</label>
            <select
                value={percentage}
                onChange={(e) =>
                    dispatch({
                        type: actionType,
                        payload: Number(e.target.value),
                    })
                }
            >
                <option value="0">Dissatisfied (0%)</option>
                <option value="5">It was okay (5%)</option>
                <option value="10">It was good (10%)</option>
                <option value="20">Absolutely amazing! (20%)</option>
            </select>
        </div>
    );
}

By passing different labels as children, I reused the SelectPercentage component for both the user’s and their friend’s tip percentage inputs. This approach kept the code DRY and made it easier to manage.

Efficient State Management with Context API

Managing multiple pieces of state efficiently can be challenging in a React application, especially as it scales. To tackle this, I utilized the Context API to share state across multiple components without the need to pass props down through every level of the component tree.

Here’s how I set up the Context API:

// Create contexts
const TipCalculatorStateContext = createContext();
const TipCalculatorDispatchContext = createContext();

// Context provider component
function TipCalculatorProvider({ children }) {
    const [state, dispatch] = useReducer(tipCalculatorReducer, {
        bill: "",
        percentage1: 0,
        percentage2: 0,
    });

    return (
        <TipCalculatorStateContext.Provider value={state}>
            <TipCalculatorDispatchContext.Provider value={dispatch}>
                {children}
            </TipCalculatorDispatchContext.Provider>
        </TipCalculatorStateContext.Provider>
    );
}

This setup allowed me to centralize state management and make the state accessible across the entire component tree. The TipCalculatorProvider wraps the TipCalculator component, ensuring that all child components can easily access and update the shared state.

Updating State with Reducer

Finally, I implemented a reducer to manage the state updates. Using a reducer not only made the state transitions more predictable but also allowed me to handle more complex state logic with ease.

Here’s the reducer function:

function tipCalculatorReducer(state, action) {
    switch (action.type) {
        case "set_bill":
            return { ...state, bill: action.payload };
        case "set_percentage1":
            return { ...state, percentage1: action.payload };
        case "set_percentage2":
            return { ...state, percentage2: action.payload };
        case "reset":
            return { bill: "", percentage1: 0, percentage2: 0 };
        default:
            throw new Error(`Unknown action type: ${action.type}`);
    }
}

Each action in the reducer is responsible for updating a specific part of the state, making the code easier to reason about. For instance, the set_bill action updates the bill amount, while the reset action clears all fields.

Conclusion

This project, though small, was a valuable exercise in reinforcing the concepts I've learned. By focusing on pure components, leveraging the children prop, and efficiently managing state with the Context API and a reducer, I was able to create a clean and maintainable React application. As I continue my React learning journey, these foundational skills will undoubtedly play a crucial role in building more complex and scalable applications.

Looking forward to the next challenge!

Stay tuned for more updates, and feel free to follow my progress on GitHub and LinkedIn

Cover Image by Juanjo Jaramillo on Unsplash

🚀 Day 14: Scaling Up with useReducer and Context API 🚀

Mayuresh Surve — Tue, 13 Aug 2024 00:57:37 +0000

Scaling Up with `useReducer` and Context in React

Welcome to Day 14 of my React Learning Journey! Over the past two days, I've dived deep into two powerful concepts in React: the useReducer hook and Context API. Today, I’ll be sharing how I combined these tools to refactor my application, scale it up for better state management, and what benefits this approach brings.

Recap: Where We Started

Previously, I was managing the state in my React application from Day 10 using the useState hook. While useState is straightforward and works well for simple state management, it starts to show its limitations as application grows. I had multiple stateful components and functions for adding, deleting, and toggling items in a list. As the logic became more complex, the code became harder to maintain and debug.

Here’s a quick look at what my code used to look like:

function App() {
    const [items, setItems] = useState([]);

    function handleAddItem(item) {
        setItems((items) => [...items, item]);
    }

    function handleDeleteItem(id) {
        setItems((items) => items.filter((item) => item.id !== id));
    }

    function handleToggleItem(id) {
        setItems((items) =>
            items.map((item) =>
                item.id === id ? { ...item, packed: !item.packed } : item
            )
        );
    }

    // ...
}

This approach worked fine initially but began to show drawbacks as the application grew. I realized it was time to scale up and make the code more robust and maintainable.

Enter `useReducer` and Context

To tackle the growing complexity, I decided to refactor my code using the useReducer hook and Context API. Here's how each of these concepts helped:

useReducer Hook: This hook is perfect for managing more complex state logic. Unlike useState, which is ideal for simple state updates, useReducer centralizes the state management logic in one place—a reducer function. This makes the code more predictable, easier to debug, and better suited for handling complex state transitions.
Context API: React’s Context API allows me to share state across multiple components without prop drilling. This means that instead of passing down state and functions as props through several layers, I can provide them via a context and access them wherever needed.

Refactoring the Application

Here’s what I changed in my application:

Centralized State Management with useReducer:
I replaced the useState hook with useReducer. Instead of having multiple functions handling state changes directly, I now have a single reducer function that takes care of all state transitions.

import itemsReducer from "./ItemsReducer";

function App() {
    const [items, dispatch] = useReducer(itemsReducer, []);

    // Rest of the code...
}

The reducer function (itemsReducer) now handles all state changes based on the action type:

export default function itemsReducer(items, action) {
    switch (action.type) {
        case "add_item":
            return [...items, action.item];
        case "delete_item":
            return items.filter((item) => item.id !== action.id);
        case "toggle_item":
            return items.map((item) =>
                item.id === action.id
                    ? { ...item, packed: !item.packed }
                    : item
            );
        case "clear_items":
            return [];
        default:
            throw new Error("Unknown action type: " + action.type);
    }
}

Using Context to Share State and Dispatch:
I created two contexts: one for the state (ItemsContext) and one for the dispatch function (ItemsDispatchContext). This allows any component in the tree to access the items state or dispatch actions without prop drilling.

//ItemsContext.js
import { createContext } from "react";

export const ItemsContext = createContext(null)
export const ItemsDispatchContext = createContext(null)

//App.js
import { ItemsContext, ItemsDispatchContext } from "./itemsContext";

function App() {
    const [items, dispatch] = useReducer(itemsReducer, []);

    return (
        <ItemsDispatchContext.Provider value={dispatch}>
            <AddItemForm />
            <ItemsContext.Provider value={items}>
                <ItemsList />
                <Footer />
            </ItemsContext.Provider>
        </ItemsDispatchContext.Provider>
    );
}

Now, components like AddItemForm, ItemsList, and Footer can simply use useContext to access the state and dispatch actions:

import { useContext } from "react";
import { ItemsDispatchContext } from "../itemsContext";

function AddItemForm() {
    const dispatch = useContext(ItemsDispatchContext);
    // Dispatch actions directly
}

Benefits of This Approach

Centralized Logic: By using useReducer, all the state logic is centralized in one place (the reducer). This makes the state transitions more predictable and the code easier to test and debug.
Decoupling State from UI: Using Context decouples the state management from the UI components. Components no longer need to pass down props for state management, making them cleaner and more focused on rendering UI.
Scalability: As the application grows, adding more complex state transitions is easier with useReducer. The reducer can handle intricate logic without cluttering the component code.
Ease of Maintenance: This refactoring makes the code more modular and easier to maintain. Future changes can be made in isolation without affecting unrelated parts of the code.

Answering Common Questions

Why not stick with useState?
useState is great for simple cases, but as your app grows, managing state across multiple components with useState can become unwieldy. useReducer and Context provide a more scalable solution.
Isn’t useReducer overkill?
Not really! For apps with complex state logic, useReducer simplifies and centralizes state transitions, making the codebase cleaner and more manageable.
How does Context help?
Context eliminates the need for prop drilling, allowing state and dispatch functions to be shared across components efficiently. This results in cleaner and more modular components.

Conclusion

Refactoring my React application to use useReducer and Context has been a significant step forward. This approach not only made the code cleaner and more maintainable but also set the stage for scaling up the application with more complex state management needs.

I’m excited to continue this journey and explore more ways to improve my React applications. Stay tuned for more updates as I dive deeper into advanced React concepts!

Stay tuned for more updates, and feel free to follow my progress on GitHub and LinkedIn.

Cover Image by Ferenc Almasi on Unsplash

🚀 Day 13: Context API in React 🚀

Mayuresh Surve — Sun, 11 Aug 2024 23:26:27 +0000

Diving into React Context: Passing Data from Parent to Child Components

Welcome to Day 13 of my React learning adventure! Today, I took a deep dive into the React Context API, an essential tool for managing global data and passing it through the component tree without the hassle of prop drilling. In this post, I’ll share what I learned about Context, why it’s so powerful, and walk you through a hands-on example that helped me grasp the concept.

What is React Context?

React Context is a feature that allows data to be shared across components without needing to pass props explicitly through every level of the component tree. This is especially useful when you have data that multiple components need to access, like themes, user information, or language settings.

Why Context Matters

As we will start working on more complex React projects, we will encounter a common issue: prop drilling. Prop drilling happens when you pass data through several layers of components, even though many of those components don’t need to use the data themselves—they’re just passing it along to deeper components.

This is where Context comes in. By using Context, we can avoid prop drilling entirely. I learned that Context is perfect for managing global data that needs to be accessed by many components at different levels of the tree.

Setting Up Context: A Hands-On Example

To really understand how Context works, I decided to implement it in a simple project where I needed to pass theme data (light or dark mode) from a parent component to multiple child components.

Step 1: Creating the Context

First, I created a Context object for the theme:

import { createContext } from "react";

// Create a context with 'light' as the default value
const ThemeContext = createContext("light");

export default ThemeContext;

This step was pretty straightforward. The createContext function generates a context object that I could use to share the theme value across components.

Step 2: Providing Context in the Parent Component

Next, I set up a parent component (App) to provide the theme value to its children:

import React, { useState } from "react";
import ThemeContext from "./ThemeContext";
import ThemedButton from "./ThemedButton";

function App() {
    const [theme, setTheme] = useState("light");

    const toggleTheme = () => {
        setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
    };

    return (
        <ThemeContext.Provider value={theme}>
            <div>
                <h1>Current Theme: {theme}</h1>
                <button onClick={toggleTheme}>Toggle Theme</button>
                <ThemedButton />
            </div>
        </ThemeContext.Provider>
    );
}

export default App;

In this component, the ThemeContext.Provider wraps the part of the component tree that needs access to the theme data. By using the value prop on the Provider, I could control the data that’s shared with child components.

Step 3: Consuming Context in a Child Component

The next step was to create a child component (ThemedButton) that consumes the theme data:

import React, { useContext } from "react";
import ThemeContext from "./ThemeContext";

function ThemedButton() {
    const theme = useContext(ThemeContext);

    return (
        <button style={{ backgroundColor: theme === "light" ? "#fff" : "#333", color: theme === "light" ? "#000" : "#fff" }}>
            I am a {theme} themed button
        </button>
    );
}

export default ThemedButton;

Here, I used the useContext hook to access the current theme value directly in the ThemedButton component. This allowed me to dynamically style the button based on whether the theme was set to "light" or "dark."

Step 4: Putting It All Together

Finally, I tested the implementation by running the app. The App component controls the theme, and the ThemedButton component changes its appearance accordingly. The toggle button allows me to switch between light and dark themes seamlessly.

Key Takeaways

Today’s exploration of React Context has been incredibly enlightening. Here’s what I took away from the experience:

Context Simplifies Global Data Sharing: I realized how much cleaner and more maintainable my code became by using Context to avoid prop drilling. Instead of passing props down multiple levels, I could simply wrap my components in a Provider and consume the context value wherever needed.
useContext is Powerful and Intuitive: The useContext hook made it incredibly easy to access context values in any component.
Context is Ideal for Specific Use Cases: While Context is great for certain scenarios, like theming or managing user authentication state, I also learned that it’s not a replacement for all prop passing. It’s important to use Context judiciously to keep my React apps performant and manageable.

I’m excited to keep building on this knowledge as I continue my React journey. Next, I’m looking forward to exploring even more advanced concepts and seeing how Context can be applied in larger, more complex applications.
Onward to more React adventures!

Stay tuned for more updates, and feel free to follow my progress on GitHub and LinkedIn

Cover image by Lautaro Andreani on Unsplash

🚀 Day 12: Enhancing State Management using useReducer in React 🚀

Mayuresh Surve — Sun, 11 Aug 2024 00:05:29 +0000

Exploring `useReducer` in React: Enhancing State Management

Welcome to Day 12 of my React learning journey! Today, I immersed myself in the useReducer hook, discovering how it serves as a powerful alternative to useState, particularly for managing more complex state logic in React applications. I decided to refactor the code for my project, 'PackPal' (which I started on Day 10), to integrate useReducer. Here’s what I learned from the process, the benefits I noticed, and how it compares to useState.

Understanding `useReducer`

The useReducer hook caught my attention because it’s tailored for situations where state transitions involve multiple sub-values or when the next state depends heavily on the previous one. I found the basic syntax to be:

const [state, dispatch] = useReducer(reducer, initialState);

reducer: A function that determines how the state changes based on an action.
initialState: The starting state value.
state: The current state value.
dispatch: A function to send actions to the reducer.

Why I Chose to Explore `useReducer`

While useState has been my go-to for straightforward state updates, I realized that useReducer offers more control and structure, which is especially valuable for complex state logic. I noticed that it centralizes state management within a reducer function, making the code cleaner and easier to maintain.

Comparing `useState` and `useReducer`

Here’s what I observed during the comparison:

Code Size: Initially, useState felt more concise since I didn’t have to write a reducer or dispatch actions. However, as I refactored more of my code, I noticed that useReducer actually reduced code duplication, especially when several event handlers needed to modify state in similar ways.

Readability: I found useState easy to read for simple updates. But when the updates became more complex, the component started feeling bloated. useReducer helped me by separating the update logic (how state changes) from the event handlers (what happens), which made the code more organized.

Debugging: Tracking down bugs in state updates was sometimes tricky with useState. With useReducer, I could log every action and state update, making it much easier to pinpoint issues.

Testing: Since reducers are pure functions, I realized I could test them in isolation, outside of the component. This was particularly useful for complex state logic, as it allowed me to assert that a reducer produced the correct state for given inputs.

Writing Reducers Well

I learned some key points about writing reducers:

Reducers Must Be Pure: This means they return the same output for the same input without causing side effects, which is crucial since reducers run during rendering.
Each Action Describes a Single User Interaction: Even if an action leads to multiple state changes, encapsulating it in a single action made my code easier to debug and understand.

Refactoring with `useReducer`

Here’s a breakdown of how I refactored my code to use useReducer, replacing useState:

1. Initializing State with `useReducer`

Initially, I managed a list of items using useState:

const [items, setItems] = useState([]);

I refactored this to use useReducer:

const [items, dispatch] = useReducer(itemsReducer, []);

Here, items holds the current state, and dispatch triggers actions that update the state.

2. Handling Actions with `dispatch`

With useReducer, I learned to handle state updates by sending actions to the reducer via the dispatch function. Here’s how I approached it:

Previously, I used useState:

function handleAddItem(item) {
    setItems((items) => [...items, item]);
}

function handleDeleteItem(id) {
    setItems((items) => items.filter((item) => item.id !== id));
}

function handleToggleItem(id) {
    setItems((items) =>
    items.map((item) =>
        item.id === id ? { ...item, packed: !item.packed } : item
    )
);
}

function handleClearList() {
    const confirm = window.confirm(
        "Are you sure you want to clear the list?"
    );

    if (confirm) setItems([]);
}

With useReducer, I switched to:

function handleAddItem(item) {
    dispatch({ type: "add_item", item });
}

function handleDeleteItem(id) {
    dispatch({ type: "delete_item", id });
}

function handleToggleItem(id) {
    dispatch({ type: "toggle_item", id });
}

function handleClearList() {
    const confirm = window.confirm(
        "Are you sure you want to clear the list?"
    );

    if (confirm) dispatch({ type: "clear_items" });
}

3. The Reducer Function

Here’s how my itemsReducer function ended up looking, handling all state transitions based on the dispatched actions:

function itemsReducer(state, action) {
    switch (action.type) {
        case "add_item":
            return [...state, action.item];
        case "delete_item":
            return state.filter((item) => item.id !== action.id);
        case "toggle_item":
            return state.map((item) =>
                item.id === action.id
                    ? { ...item, packed: !item.packed }
                    : item
            );
        case "clear_items":
            return [];
        default:
            throw new Error(`Unknown action type: ${action.type}`);
    }
}

Conclusion

Refactoring my code to use useReducer made my state management more organized and maintainable. While useReducer required more setup than useState, the benefits became clear when dealing with complex state logic. This experience showed me how introducing more structure with useReducer could potentially help avoid bugs and make the code easier to test and debug.

You can find the full code here. I’m excited to keep learning and share more insights as I continue to explore React!

Stay updated with my progress by following my LinkedIn.

https://www.linkedin.com/in/mayuresh-surve/

🚀 Day 11: React Fragments and Composition vs Inheritance in React 🚀

Mayuresh Surve — Fri, 09 Aug 2024 22:14:00 +0000

Today, I explored two fundamental and interrelated concepts in React: Composition vs Inheritance and React Fragments. These concepts are crucial for building efficient, clean, and maintainable React applications. Here’s what I learned:

Component Composition vs Inheritance

In traditional object-oriented programming, inheritance is often used to extend and reuse code. However, in React, composition is preferred over inheritance. This means building complex UIs by combining smaller, reusable components rather than relying on hierarchical inheritance structures.

Component Composition

Composition in React is about assembling components to create more complex interfaces. By composing components, you can build UIs that are flexible, maintainable, and easy to extend. For instance, a Card component can be composed with other components like Header, Body, and Footer to create a full-featured card UI:

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

function App() {
  return (
    <Card>
      <h2>Title</h2>
      <p>This is some text inside the card.</p>
    </Card>
  );
}

Children and Props

React provides a powerful way to pass data and elements between components using props and the special children prop. Props allow components to be configured and reused with different data, while children lets you nest elements inside a component:

function Wrapper({ children }) {
  return <div className="wrapper">{children}</div>;
}

function App() {
  return (
    <Wrapper>
      <h1>Hello, World!</h1>
      <p>This is inside the wrapper component.</p>
    </Wrapper>
  );
}

Containment and Specialization

Containment is a pattern where a component (like a modal or a layout) contains other components. Specialization is when a generic component is extended or customized to create a more specific version, such as creating PrimaryButton and SecondaryButton components from a base Button component.

function Button({ children, className, ...props }) {
  return (
    <button className={`button ${className}`} {...props}>
      {children}
    </button>
  );
}

function PrimaryButton(props) {
  return <Button className="primary-button" {...props} />;
}

function SecondaryButton(props) {
  return <Button className="secondary-button" {...props} />;
}

function App() {
  return (
    <div>
      <PrimaryButton onClick={() => alert("Primary Button Clicked!")}>
        Primary Button
      </PrimaryButton>
      <SecondaryButton onClick={() => alert("Secondary Button Clicked!")}>
        Secondary Button
      </SecondaryButton>
    </div>
  );
}

Avoiding Inheritance in React

React encourages avoiding inheritance because it can lead to more complex and less flexible code. Instead, composition allows you to reuse code without the constraints of a strict inheritance hierarchy, making your components more modular and easier to manage.

React Fragments

Next, I delved into React Fragments, which are used to group multiple elements without adding extra nodes to the DOM. This helps keep the DOM structure clean and avoids unnecessary wrappers.

Using React Fragments

Fragments allow you to return multiple elements from a component without creating an additional parent element:

function FragmentExample() {
  return (
    <React.Fragment>
      <h1>Title</h1>
      <p>This is a paragraph.</p>
    </React.Fragment>
  );
}

Avoiding Unnecessary Wrapping Elements

Using unnecessary wrapper elements can clutter the DOM. Fragments help prevent this by grouping elements without adding extra nodes:

function NoFragmentExample() {
  return (
    <div>
      <h1>Title</h1>
      <p>This is a paragraph.</p>
    </div>
  );
}

function FragmentExample() {
  return (
    <>
      <h1>Title</h1>
      <p>This is a paragraph.</p>
    </>
  );
}

Short Syntax for Fragments

React provides a shorthand for fragments using empty tags (<> and </>), making the code cleaner and more concise:

function ShortSyntaxExample() {
  return (
    <>
      <h1>Title</h1>
      <p>This is a paragraph.</p>
    </>
  );
}

When to Use Fragments

Use fragments whenever you need to group multiple sibling elements without adding extra DOM nodes. They are particularly useful when returning lists or mapping over an array to generate elements.

Key Takeaways

Composition is more flexible and maintainable than inheritance in React.
Fragments help keep the DOM clean by avoiding unnecessary wrapper elements.

Conclusion

Today's learning journey deepened my understanding of how React encourages building applications using composition and how to maintain a clean DOM with fragments. These skills are essential for creating scalable and maintainable applications, and I’m excited to continue applying them in my projects.

Stay tuned for more updates as I continue my React learning journey!

Stay updated with my progress by following my LinkedIn and GitHub for detailed posts and code samples.

🚀 Day 10: Packing List App 🚀

Mayuresh Surve — Fri, 09 Aug 2024 02:20:28 +0000

Building a Packing List App 🧳

Today marks day 10 of my React learning journey, and I’m thrilled to share the hands-on project I developed: a dynamic packing list application! This project was a fantastic way to deepen my understanding of state management, component interaction, and styling in React. Let’s dive into the key takeaways and highlights of my experience.

Key Learnings:

1️⃣ State Management: I got a solid grasp of managing state in React using the useState hook, which I used to keep track of the items to be packed, their quantities, and whether they were packed or not.

2️⃣ Component Interaction: I explored how to efficiently pass state and functions as props between components, ensuring smooth interaction across the application.

3️⃣ Dynamic UI Rendering: The project involved conditional rendering to display different components and messages based on the current state of the packing list, making the app responsive to user actions.

Hands-on Practice:

Item Addition & Tracking: I implemented a form to add items to the packing list, specifying both the item name and quantity. Each item can then be checked off as it's packed, dynamically updating the list.
Progress Tracking: I added a progress bar to visually represent the percentage of items packed, providing instant feedback as users prepare for their trip.
Sorting & Filtering: The app allows users to sort the packing list based on various criteria, such as the order of input, packed status, or item name, giving them control over how they manage their list.

Conclusion

This project was an excellent exercise in understanding and implementing React state management and component interaction. It allowed me to create a practical application while reinforcing core React concepts. I’m excited to apply these learnings to more complex scenarios and continue my journey in mastering React!

Stay tuned for more updates on my learning journey! 🚀

Stay updated with my progress by following my LinkedIn and GitHub for detailed posts and code samples.

🚀 Day 9: Dynamic Date Calculator 🚀

Mayuresh Surve — Thu, 08 Aug 2024 01:55:07 +0000

Building a Dynamic Date Calculator 🗓️

Today, I embarked on an exciting project to deepen my understanding of state management, component interaction, and conditional rendering in React. The project goal was to create a dynamic date calculator that adjusts dates based on user input. Here are the key takeaways and highlights of my learning experience:

Key Learnings:

1️⃣ State Management: Learned how to manage multiple states for step, count, and date using React's useState hook.

2️⃣ Component Interaction: Explored passing state and functions as props to child components for effective interaction.

3️⃣ Conditional Rendering: Implemented dynamic messages that reflect the number of days from or before today.

Hands-on Practice:

• Dynamic Date Calculation: Created a function to add days to the current date and update the display based on user input.
• Interactive UI: Built an intuitive interface with buttons to increment/decrement the count and step values.
• Conditional Messages: Displayed contextual messages that change based on the count, showing future or past dates.

Project Breakdown:

App Component

The App component serves as the root and wraps the Counter component.

import "./App.css";
import { useState } from "react";

function App() {
  return (
    <div className="container">
      <Counter />
    </div>
  );
}

Counter Component

Manages the core logic for counting days and updating the date.

function Counter() {
  const [step, setStep] = useState(1);
  const [count, setCount] = useState(0);
  const [date, setDate] = useState(new Date());

  const addDaysToDate = (date, days) => {
    const result = new Date(date);
    result.setDate(result.getDate() + days);
    return result;
  };

  const incrementCount = () => {
    setCount((s) => s + step);
    setDate(addDaysToDate(new Date(), count + step));
  };

  const decrementCount = () => {
    setCount((s) => s - step);
    setDate(addDaysToDate(new Date(), count - step));
  };

  const incrementStep = () => {
    setStep((s) => s + 1);
  };

  const decrementStep = () => {
    setStep((s) => s - 1);
  };

  return (
    <>
      <Title date={date.toDateString()} count={count} />
      <Step
        step={step}
        incrementStep={incrementStep}
        decrementStep={decrementStep}
      />
      <Count
        count={count}
        incrementCount={incrementCount}
        decrementCount={decrementCount}
      />
    </>
  );
}

Title Component

Displays the current date with a dynamic message based on the count.

function Title({ date, count }) {
  let message;
  if (count < 0) {
    message = `${Math.abs(count)} days before today was ${date}`;
  } else if (count > 0) {
    message = `${count} days from today is ${date}`;
  } else {
    message = `Today is ${date}`;
  }
  return <h1>{message}</h1>;
}

Step Component

Handles the step value adjustment.

function Step({ step, incrementStep, decrementStep }) {
  return (
    <div>
      <p>Step: {step}</p>
      <button onClick={incrementStep}>+</button>
      <button onClick={decrementStep}>-</button>
    </div>
  );
}

Count Component

Manages the count value adjustment.

function Count({ count, incrementCount, decrementCount }) {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>+</button>
      <button onClick={decrementCount}>-</button>
    </div>
  );
}

You can view working of the project here:

Imgur: The magic of the Internet

Discover the magic of the internet at Imgur, a community powered entertainment destination. Lift your spirits with funny jokes, trending memes, entertaining gifs, inspiring stories, viral videos, and so much more from users.

imgur.com

Conclusion

This project was an excellent exercise in understanding and implementing React state management and component interaction. It allowed me to create a practical application while reinforcing core React concepts. I'm excited to apply these learnings to more complex scenarios and continue my journey in mastering React!

Stay tuned for more updates on my learning journey! 🚀

Stay updated with my progress by following my LinkedIn and GitHub for detailed posts and code samples.

🚀 Day 8: Preserving and Resetting State 🚀

Mayuresh Surve — Tue, 06 Aug 2024 20:50:20 +0000

Welcome to Day 8 of my React Learning Journey! Today, I dived deeper into the state in React and how it is tied to a position in the render tree. This understanding is crucial for effectively managing component state and behavior in a React application. Here’s what I learned:

State and Render Tree

React builds render trees for the component structure in your UI. When you give a component state, the state doesn't live inside the component; instead, it is held inside React. React associates each piece of state it’s holding with the correct component by where that component sits in the render tree.

Example: Counter Component

In the example below, a Counter component is rendered in two different positions within the App component. Each instance of the Counter maintains its own state independently.

import { useState } from 'react';

export default function App() {
  const counter = <Counter />;
  return (
    <div>
      {counter}
      {counter}
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

Each Counter component operates independently because they are rendered at different positions in the tree, even though they are the same JSX tag.

Isolated State

Each component on the screen has fully isolated state. For example, if you render two Counter components side by side, each will have its own independent state.

import { useState } from 'react';

export default function App() {
  return (
    <div>
      <Counter />
      <Counter />
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

When one counter is updated, only the state for that specific component is updated:

State Persistence and Destruction

React will keep the state around for as long as you render the same component at the same position in the tree. If you remove a component, its state is destroyed. When the same component is rendered again, its state is initialized from scratch.

import { useState } from 'react';

export default function App() {
  const [showB, setShowB] = useState(true);
  return (
    <div>
      <Counter />
      {showB && <Counter />} 
      <label>
        <input
          type="checkbox"
          checked={showB}
          onChange={e => setShowB(e.target.checked)}
        />
        Render the second counter
      </label>
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

When you stop rendering the second counter, its state disappears. When you render it again, it starts from its initial state.

Preserving State with Keys

To ensure a component maintains its state even when its position in the tree changes, you can use keys. Keys make React distinguish between different instances of the same component.

import { useState } from 'react';

export default function Scoreboard() {
  const [isPlayerA, setIsPlayerA] = useState(true);
  return (
    <div>
      {isPlayerA ? (
        <Counter key="Taylor" person="Taylor" />
      ) : (
        <Counter key="Sarah" person="Sarah" />
      )}
      <button onClick={() => setIsPlayerA(!isPlayerA)}>
        Next player!
      </button>
    </div>
  );
}

function Counter({ person }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{person}'s score: {score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

Here, switching between Taylor and Sarah does not preserve the state because they have different keys.

Conclusion

Today's learning session deepened my understanding of how React handles state in relation to the render tree. This knowledge is fundamental for managing component states efficiently and understanding the lifecycle of React components. As I continue my React learning journey, I look forward to applying these concepts to build more interactive and dynamic applications.

Stay tuned for more updates as I dive deeper into React!

Stay updated with my progress by following my LinkedIn and GitHub for detailed posts and code samples.

🚀 Day 7: Pizza Restaurant Menu Project 🚀

Mayuresh Surve — Mon, 05 Aug 2024 14:20:53 +0000

This week marked the beginning of my React learning journey. Here's a recap of the concepts I covered and how I applied them in my first project—a pizza restaurant menu.

Day 1: Introduction to React

Key Concepts: Learned about React's history, component-based architecture, and benefits such as reusability and performance.
Setup: Installed Node.js, npm, and set up my first React project using Create React App.

Day 2: JavaScript Essentials

Key Concepts: Focused on JavaScript fundamentals crucial for React, including destructuring, the rest and spread operators, arrow functions, and promises.
Application: Used destructuring and arrow functions in my components for cleaner and more readable code.

Day 3: JSX and Components

Key Concepts: Explored JSX syntax and the differences between functional and class components.
Application: Used JSX extensively to define the structure of my pizza menu components.

Day 4: Props and State Management

Key Concepts: Learned to pass data between components with props and manage state in both functional and class components using useState.
Application: Passed pizza data as props to components and used useState for managing dynamic data, like open and closed status in the footer.

Day 5: List and Conditional Rendering

Key Concepts: Mastered list rendering using map() and conditional rendering with the && operator, ternary operators, and multiple returns.
Application: Rendered the list of pizzas using map() and displayed messages conditionally based on the menu's status.

Day 6: Pure Components and UI Trees

Key Concepts: Understood the importance of pure components for predictable outputs and efficient rendering. Grasped how React structures UIs as trees for optimized updates.
Application: Ensured my components were pure by avoiding side effects and structured my UI as a hierarchical tree for efficient rendering.

🚀 Day 7 Project: Pizza Restaurant Menu

You can find the complete code for the project on my GitHub

How I Applied What I Learned:

JSX and Components: Created a component-based structure with Header, Menu, Pizza, and Footer components.
Props and State Management: Passed data between components using props and controlled rendering with state.
List Rendering: Used map() to iterate over pizza data and render the list dynamically.
Conditional Rendering: Displayed different messages based on the availability of pizzas and the restaurant's open status.
Pure Components: Maintained component purity by keeping all side effects outside of render logic.

Conclusion

This project was a practical application of the concepts I've learned in my first week with React. It reinforced the importance of component architecture, state management, and rendering strategies in building interactive UIs. I'm excited to continue building on this foundation in the coming weeks!

Stay updated with my progress by following my LinkedIn and GitHub for detailed posts and code samples.

🚀 Day 6: Pure Component and UI as a Tree 🚀

Mayuresh Surve — Sun, 04 Aug 2024 18:05:56 +0000

On Day 6 of my React learning journey, I explored two key concepts from the React documentation: Keeping Components Pure and Understanding Your UI as a Tree. These concepts are fundamental in writing efficient, maintainable, and scalable React applications. Let's dive into what I learned.

1. Keeping Components Pure

What Are Pure Components?

In React, a pure component is a component that returns the same output for the same set of inputs. It does not attempt to change or rely on anything outside its scope, making it predictable and easy to manage. This behavior is similar to pure functions in functional programming, where the function does not cause any side effects and does not alter its input data.

Principles of Pure Components

No Side Effects: Pure components avoid operations like modifying the DOM or global variables, making them easier to debug.
Consistency: Given the same props, a pure component will always render the same output, ensuring consistency across renders.
Ease of Testing: Because pure components are deterministic, they are easier to test and reason about.

Example

Consider a TemperatureConverter component that takes temperature in Celsius and converts it to Fahrenheit:

function TemperatureConverter({ celsius }) {
    const toFahrenheit = (celsius) => (celsius * 9) / 5 + 32;
    const fahrenheit = toFahrenheit(celsius);

    return (
        <p>
            {celsius}°C is {fahrenheit.toFixed(1)}°F
        </p>
    );
}

function App() {
    return (
        <div>
            <TemperatureConverter celsius={0} />
            <TemperatureConverter celsius={100} />
        </div>
    );
}

Explanation:

Pure Function: toFahrenheit is a pure function used within the TemperatureConverter to ensure that the conversion is consistent and predictable.
Static Output: The TemperatureConverter always outputs the same result for the same celsius input, making it a pure component.

Impure Component Example

let clickCount = 0; // This global variable causes impurity

function ClickCounter() {
    // This side effect makes the component impure
    document.title = `Clicked ${clickCount} times`;

    return (
        <button onClick={() => clickCount++}>Clicked {clickCount} times</button>
    );
}

Why Is This Component Impure?

Global State Modification:
The clickCount variable is defined outside the component. This makes it part of the global state, which can be accessed and modified by other components or functions, leading to unpredictable behavior.
Side Effects:
The component directly modifies the document.title each time it renders. This is a side effect because it changes the environment outside the component, which violates the principle of keeping components pure.
Non-Deterministic Output:
The component’s output changes based on the clickCount variable, which is not directly tied to its props or state. This makes the component's behavior unpredictable as it relies on external factors.

How to Make It Pure

To make this component pure, manage the state internally using React’s useState hook and avoid direct side effects in the component body:

import { useState, useEffect } from "react";

function ClickCounter() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `Clicked ${count} times`;
    }, [count]);

    return (
        <button onClick={() => setCount(count + 1)}>
            Clicked {count} times
        </button>
    );
}

Improvements:

Local State Management:
- Using useState ensures that the state (count) is encapsulated within the component, making it easier to manage and understand.
Controlled Side Effects:
- The useEffect hook is used to handle side effects, such as updating the document.title. This hook only runs when the count changes, ensuring predictable behavior.
Deterministic Behavior:
- The component’s output depends solely on its internal state, making it consistent and reliable across renders.

Benefits:

Optimized Rendering: React can optimize pure components by reducing unnecessary re-renders.
Better Performance: Pure components contribute to a faster and more efficient application.

For more details, explore the React documentation on keeping components pure.

2. Understanding Your UI as a Tree

Concept of UI as a Tree

React applications are built as component trees. Each React component is a node in this tree, forming a hierarchical structure. This tree model is crucial for React's rendering performance and helps manage complex UIs efficiently.

Key Aspects of UI as a Tree

Component Hierarchy: The UI is structured in a hierarchical tree where parent components can pass data to child components.
Efficient Updates: React updates the UI tree by only re-rendering components that have changed, thanks to its reconciliation algorithm.
Declarative Structure: The tree model allows developers to describe what the UI should look like for a particular state, and React handles the rest.

Example

Here's a simple app that displays a tree of categories and items:

function Category({ name, items }) {
    return (
        <div>
            <h3>{name}</h3>
            <ul>
                {items.map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>
        </div>
    );
}

function App() {
    const data = [
        { name: "Fruits", items: ["Apple", "Banana", "Orange"] },
        { name: "Vegetables", items: ["Carrot", "Broccoli", "Spinach"] },
    ];

    return (
        <div>
            <h1>Categories</h1>
            {data.map((category, index) => (
                <Category
                    key={index}
                    name={category.name}
                    items={category.items}
                />
            ))}
        </div>
    );
}

Explanation:

Tree Structure: The App component is the root of the tree, with Category components as its children.
Dynamic Rendering: Each Category component dynamically renders a list of items, showcasing how React handles hierarchical data.

Benefits:

Clear Structure: The tree structure simplifies the UI design and makes it easy to visualize data flow.
Optimized Rendering: React efficiently updates the UI tree, minimizing unnecessary DOM updates.

For further insights, refer to the React documentation on understanding UI as a tree.

Conclusion

Grasping the concepts of pure components and UI as a tree is essential for developing efficient and robust React applications. Pure components help maintain consistency and optimize rendering, while understanding the UI as a tree aids in managing component hierarchies and efficient updates.

These principles not only improve the performance and scalability of your applications but also enhance the development experience by making the codebase more organized and maintainable.

For a deeper dive, check out the links provided for the official React documentation on these topics. Happy coding!

Feel free to connect with me on LinkedIn to stay updated on my latest projects and insights!

🚀 Day 5: List Rendering and Conditional Rendering in React🚀

Mayuresh Surve — Sat, 03 Aug 2024 17:37:33 +0000

Welcome to Day 5 of my React Learning Journey! Today, I delved into some fundamental concepts of React that are crucial for building dynamic and interactive applications: rendering lists and various techniques for conditional rendering. These concepts are essential for managing how components are displayed based on data and user interactions. Here’s what I learned:

Rendering Lists

In React, rendering lists involves iterating over an array of data and creating components for each item in the array. This is commonly done using the JavaScript map method. Here's an example using a list of pizza items:

Given below is the list of pizzas:

const pizzaData = [
    {
        name: "Focaccia",
        ingredients: "Bread with Italian olive oil and rosemary",
        price: 6,
        photoName: "https://imgur.com/C3Ca4BS.png",
        soldOut: false,
    },
    {
        name: "Pizza Margherita",
        ingredients: "Tomato and mozzarella",
        price: 10,
        photoName: "https://imgur.com/lipmW8F.png",
        soldOut: false,
    },
    {
        name: "Pizza Spinaci",
        ingredients: "Tomato, mozzarella, spinach, and ricotta cheese",
        price: 12,
        photoName: "https://imgur.com/APdaPZR.png",
        soldOut: false,
    },
    {
        name: "Pizza Funghi",
        ingredients: "Tomato, mozzarella, mushrooms, and onion",
        price: 12,
        photoName: "https://imgur.com/dPpvWzM.png",
        soldOut: false,
    },
    {
        name: "Pizza Salamino",
        ingredients: "Tomato, mozzarella, and pepperoni",
        price: 15,
        photoName: "https://imgur.com/9dtZJNE.png",
        soldOut: true,
    },
    {
        name: "Pizza Prosciutto",
        ingredients: "Tomato, mozzarella, ham, arugula, and burrata cheese",
        price: 18,
        photoName: "https://imgur.com/jii9M6S.png",
    },
];

Pizza component is written as follows:

function Pizza({ pizzaObj }) {
    return (
        <li className="pizza">
            <img src={pizzaObj.photoName} alt={pizzaObj.name} />
            <div>
                <h3>{pizzaObj.name}</h3>
                <p>{pizzaObj.ingredients}</p>
                <span>{pizzaObj.price}</span>
            </div>
        </li>
    );
}

We can render list using map array function as:

<ul className="pizzas">
    {pizzas.map((pizza) => (
        <Pizza pizzaObj={pizza} key={pizza.name} />
    ))}
</ul>

Key Points

Iteration: The map method is used to iterate over the pizzaData array, creating a Pizza component for each pizza object.
Props: Each pizza object is passed to the Pizza component via props for rendering.
Unique Keys: A unique key prop is provided to each Pizza component, which is crucial for helping React identify and manage components efficiently during re-renders.

Conditional Rendering Techniques

Conditional rendering in React allows you to dynamically display elements based on certain conditions. Today, I explored several common techniques for conditional rendering:

1. Conditional Rendering with `&&` Operator

The && operator is used for conditional rendering when you want to display an element only if a certain condition is true.

Example: Footer Component

function Footer() {
    const hour = new Date().getHours();
    const openHour = 10;
    const closeHour = 22;
    const isOpen = hour >= openHour && hour <= closeHour;

    return (
        <footer className="footer">
            {isOpen && (
                <p>
                    We're happy to welcome you between {openHour}:00 and{" "}
                    {closeHour}:00.
                </p>
            )}
        </footer>
    );
}

This example uses the && operator to conditionally render a message if the current time is within operating hours.

Example: Menu Component

function Menu() {
    const pizzas = [];

    return (
        <>
            <h1>Our Menu</h1>

            {pizzas.length > 0 && (
                <ul className="pizzas">
                    {pizzas.map((pizza) => (
                        <Pizza pizzaObj={pizza} key={pizza.name} />
                    ))}
                </ul>
            )}
        </>
    );
}

In this example, the list of pizzas is rendered only if there are items in the pizzas array.

2. Conditional Rendering with Ternary Operator

The ternary operator is useful when you have two possible outcomes based on a condition.

Example: Menu Component

function Menu() {
    const pizzas = [];

    return (
        <>
            <h1>Our Menu</h1>

            {pizzas.length > 0 ? (
                <ul className="pizzas">
                    {pizzas.map((pizza) => (
                        <Pizza pizzaObj={pizza} key={pizza.name} />
                    ))}
                </ul>
            ) : (
                <p>
                    We're still working on our menu. Please come back later :)
                </p>
            )}
        </>
    );
}

This example uses the ternary operator to decide whether to render the pizza list or a message indicating that the menu is being prepared.

Example: Footer Component

function Footer() {
    const hour = new Date().getHours();
    const openHour = 10;
    const closeHour = 22;
    const isOpen = hour >= openHour && hour <= closeHour;
    console.log(isOpen);

    return (
        <footer className="footer">
            {isOpen ? (
                <p>
                    We're open from {openHour}:00 to {closeHour}:00. Come visit
                    us or order online.
                </p>
            ) : (
                <p>
                    We're happy to welcome you between {openHour}:00 and{" "}
                    {closeHour}:00.
                </p>
            )}
        </footer>
    );
}

In this example, the ternary operator is used to render different messages depending on whether the restaurant is open.

3. Conditional Rendering with Multiple Returns

Using multiple return statements allows you to exit a component early based on a condition.

Example: Footer Component

function Footer() {
    const hour = new Date().getHours();
    const openHour = 13;
    const closeHour = 22;
    const isOpen = hour >= openHour && hour <= closeHour;
    console.log(isOpen);

    if (!isOpen) {
        return <h1>CLOSED</h1>;
    }

    return (
        <footer className="footer">
            <p>
                We're open from {openHour}:00 to {closeHour}:00. Come visit us
                or order online.
            </p>
        </footer>
    );
}

Here, if the restaurant is closed, the function returns early with a CLOSED message, otherwise, it continues to render the open hours message.

Example: Pizza Component

function Pizza({ pizzaObj }) {
    if (pizzaObj.soldOut) {
        return null;
    }

    return (
        <li className="pizza">
            <img src={pizzaObj.photoName} alt={pizzaObj.name} />
            <div>
                <h3>{pizzaObj.name}</h3>
                <p>{pizzaObj.ingredients}</p>
                <span>{pizzaObj.price}</span>
            </div>
        </li>
    );
}

In this example, if a pizza is sold out, the component returns null, which means nothing is rendered for that pizza.

Key Takeaways

Efficiency: Conditional rendering allows for efficient rendering of components, ensuring only the necessary elements are displayed based on the current state or data.
Flexibility: Each technique provides different levels of flexibility and readability, making it easier to choose the most appropriate method for your specific use case.

Conclusion

Today’s learning journey has equipped me with the skills to manage list rendering and conditional rendering effectively in React. These techniques form the backbone of creating interactive and data-driven user interfaces. I look forward to applying these concepts as I continue my React learning journey.

Stay tuned for more updates as I dive deeper into React!

Check out my GitHub for code samples and projects.
Connect with me on LinkedIn to stay updated on my latest projects and insights!

🚀 Day 4: Props and States 🚀

Mayuresh Surve — Fri, 02 Aug 2024 19:01:32 +0000

On Day 4 of my React Learning Journey, I focused on learning how to pass data to components using props and understanding how to define prop types and default props. Also, understanding how to manage state in class components and functional components using the useState hook. Here's a summary of what I learned:

1. Understanding Props

What are Props?

Props, short for "properties," are a mechanism for passing data from parent components to child components in React. They are read-only, meaning they cannot be modified by the child component. Props help create dynamic and reusable components by allowing you to pass different data to the same component.

Pass props to the child component

In the traditional way, props are passed to child components using the props object. Here's how it looks:

function Avatar(props) {
    return (
        <div className="user-info">
            <div className="avatar">
                <img src={props.photo} alt="Profile" />
            </div>
            <div className="user-details">
                <h3 className="user-name">{props.name}</h3>
                <p className="user-email">{props.email}</p>
            </div>
        </div>
    );
}

In this example, the Avatar component receives props and accesses them using props.propertyName.

Read props inside the child component

To make the code cleaner and more readable, we can destructure the props object directly in the function signature:

function Avatar({ name, email, photo }) {
    return (
        <div className="user-info">
            <div className="avatar">
                <img src={photo} alt="Profile" />
            </div>
            <div className="user-details">
                <h3 className="user-name">{name}</h3>
                <p className="user-email">{email}</p>
            </div>
        </div>
    );
}

By destructuring the props object, we can access the properties directly without using the props keyword.

Forwarding Props with the JSX Spread Syntax

Props can also be forwarded using the JSX spread syntax, which allows us to pass all the properties of an object as props to a component:

function Profile(props) {
    return (
        <>
            ...

            <Avatar {...props} />
        </>
    );
}

In this example, all the properties of props are passed to the Avatar component using {...props}.

Assigning Default Props

We can define default values for props by using the defaultProps property on a component. This is useful when a prop might not be provided:

  Avatar.defaultProps = {
    name: "Abby Ken",
};

  function Avatar({name="Abby Ken"}) {
    //...
  }

In this case, if no name prop is passed to the Avatar component, it will default to "Abby Ken."

Defining Prop Types

Using the prop-types library, you can specify the expected data types for props. This helps catch bugs and ensures that components receive the correct types of data:

  import PropTypes from "prop-types";

  Avatar.propTypes = {
    name: PropTypes.string.isRequired,
    email: PropTypes.string.isRequired,
    photo: PropTypes.string,
  };

Here, name and email are required string props, while photo is an optional string prop.

2. Managing State

Managing State in Class Components

In class components, state is managed using a constructor and the setState method. Let's break down a simple counter component using class syntax:

1. Initializing State

State is initialized in the constructor of the class component. You set the initial state value by assigning an object to this.state.

class CounterClass extends Component {
  constructor(props) {
    super(props);
    // Declare default state value
    this.state = {
      count: 0,
    };
  }
  ...
}

2. Changing State

To update the state, use the setState method, which takes an object or a function that returns an object. This method schedules an update to the component's state and tells React to re-render the component with the updated state.

increment = () => {
    // Use setState to change state
    this.setState((prevState) => ({
        count: prevState.count + 1,
    }));
};

decrement = () => {
    this.setState((prevState) => ({
        count: prevState.count - 1,
    }));
};

3. Using State in JSX

You can use the state value in your JSX by referencing this.state.propertyName.

render() {
  return (
    <div>
      <h2>Count: {this.state.count}</h2>
      <button onClick={this.increment}>Increment</button>
      <button onClick={this.decrement}>Decrement</button>
    </div>
  );
}

Full Class Component Example:

// src/CounterClass.js

import React, { Component } from "react";

class CounterClass extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0,
        };
    }

    increment = () => {
        this.setState((prevState) => ({
            count: prevState.count + 1,
        }));
    };

    decrement = () => {
        this.setState((prevState) => ({
            count: prevState.count - 1,
        }));
    };

    render() {
        return (
            <div>
                <h2>Count: {this.state.count}</h2>
                <button onClick={this.increment}>Increment</button>
                <button onClick={this.decrement}>Decrement</button>
            </div>
        );
    }
}

export default CounterClass;

useState Hook in Functional Components

With functional components, state management is simplified using the useState hook. Here's how to break down the implementation of a functional counter component:

1. Declaring State

Use the useState hook to declare state in a functional component. This hook returns an array with two elements: the current state value and a function to update it.

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

2. Changing State

To change the state, call the state updater function returned by useState.

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

const decrement = () => {
    setCount((prevCount) => prevCount - 1);
};

3. Using State in JSX

Use the state variable directly in your JSX.

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

Full Functional Component Example:

// src/CounterFunction.js

import React, { useState } from "react";

function CounterFunction() {
    const [count, setCount] = useState(0);

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

    const decrement = () => {
        setCount((prevCount) => prevCount - 1);
    };

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

export default CounterFunction;

Usage in App.js:

// src/App.js

import React from "react";
import CounterFunction from "./CounterFunction";
import CounterClass from "./CounterClass";

function App() {
    return (
        <div>
            <CounterClass />
            <CounterFunction />
        </div>
    );
}

export default App;

Key Takeaways

Props are used to pass data from a parent component to a child component. They are read-only and can be forwarded using the JSX spread syntax.
State is managed in class components using setState and in functional components using the useState hook.
The useState hook returns a state variable and a function to update it, enabling easier state handling in functional components.

Check out my GitHub for code samples and projects.
Connect with me on LinkedIn to stay updated on my latest projects and insights!

DEV Community: Mayuresh Surve

🚀 Day 15: Building Tip Calculator with React 🚀

Building a Tip Calculator with React

Keeping Components Pure

Using the Children Prop Effectively

Efficient State Management with Context API

Updating State with Reducer

Conclusion

🚀 Day 14: Scaling Up with useReducer and Context API 🚀

Scaling Up with useReducer and Context in React

Recap: Where We Started

Enter useReducer and Context

Refactoring the Application

Benefits of This Approach

Answering Common Questions

Conclusion

🚀 Day 13: Context API in React 🚀

Diving into React Context: Passing Data from Parent to Child Components

What is React Context?

Why Context Matters

Setting Up Context: A Hands-On Example

Step 1: Creating the Context

Step 2: Providing Context in the Parent Component

Step 3: Consuming Context in a Child Component

Step 4: Putting It All Together

Key Takeaways

Cover image by Lautaro Andreani on Unsplash

🚀 Day 12: Enhancing State Management using useReducer in React 🚀

Exploring useReducer in React: Enhancing State Management

Understanding useReducer

Why I Chose to Explore useReducer

Comparing useState and useReducer

Writing Reducers Well

Refactoring with useReducer

1. Initializing State with useReducer

2. Handling Actions with dispatch

3. The Reducer Function

Conclusion

🚀 Day 11: React Fragments and Composition vs Inheritance in React 🚀

Component Composition vs Inheritance

Component Composition

Children and Props

Containment and Specialization

Avoiding Inheritance in React

React Fragments

Using React Fragments

Avoiding Unnecessary Wrapping Elements

Short Syntax for Fragments

When to Use Fragments

Key Takeaways

Conclusion

🚀 Day 10: Packing List App 🚀

Building a Packing List App 🧳

Key Learnings:

Hands-on Practice:

Conclusion

🚀 Day 9: Dynamic Date Calculator 🚀

Building a Dynamic Date Calculator 🗓️

Key Learnings:

Hands-on Practice:

Project Breakdown:

App Component

Counter Component

Title Component

Step Component

Count Component

Imgur: The magic of the Internet

Conclusion

🚀 Day 8: Preserving and Resetting State 🚀

State and Render Tree

Example: Counter Component

Isolated State

State Persistence and Destruction

Preserving State with Keys

Conclusion

🚀 Day 7: Pizza Restaurant Menu Project 🚀

Day 1: Introduction to React

Day 2: JavaScript Essentials

Day 3: JSX and Components

Day 4: Props and State Management

Scaling Up with `useReducer` and Context in React

Enter `useReducer` and Context

Exploring `useReducer` in React: Enhancing State Management

Understanding `useReducer`

Why I Chose to Explore `useReducer`

Comparing `useState` and `useReducer`

Refactoring with `useReducer`

1. Initializing State with `useReducer`

2. Handling Actions with `dispatch`

1. Conditional Rendering with `&&` Operator