DEV Community: Roberto Marungo

Exploring the Power of State in React: A Beginner's Guide

Roberto Marungo — Wed, 05 Jul 2023 06:21:10 +0000

Introduction:

When it comes to building interactive web applications, React is an excellent choice. And at the heart of React lies the concept of "state." In this blog post, we'll embark on a journey to understand the significance of state in React and how it enables dynamic and responsive user interfaces. Whether you're new to React or looking to solidify your understanding, this beginner's guide will help you grasp the fundamentals of state in a fun and simple way.

What is State?

In the context of React, state represents the data that can change within a component. It's like a container where you can store and manage information that affects how your component looks or behaves. Imagine a button component that tracks the number of times it has been clicked. The count value is an example of state, as it can change over time.

Using State in Functional Components:

React's functional components, coupled with hooks, provide a simple and elegant way to utilize state. The most commonly used hook for managing state is the useState hook. Let's dive into an example to see how it works:

import React, { useState } from 'react';

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

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

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

In the example above, we import the useState hook from the 'react' library. We declare a count variable and its corresponding setter function, setCount, using array restructuring. The initial value of count is set to 0 using useState(0). When the button is clicked, the increment function is called, updating the state using setCount and causing a re-render of the component.

Class Components and State:

Before hooks were introduced in React, class components were the primary way of managing state. While hooks are now the recommended approach, it's still essential to understand how state works in class components. Here's an example:

import React, { Component } from 'react';

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

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

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

In the class component above, we define the initial state within the constructor using this.state. To update the state, we call this.setState, passing in an object with the new state values. React automatically merges the new state with the existing state and re-renders the component.

The Magic of State:

State is the key to building dynamic and interactive React applications. It enables components to respond to user interactions, update the user interface, and reflect the latest data. With state, you can create form inputs, toggle elements, manage user authentication, and more.

Conclusion:

State is a fundamental concept in React that empowers developers to build responsive and engaging user interfaces. Whether you're using functional components with hooks or class components, understanding how to leverage state is essential for developing React applications. Armed with this knowledge, you're ready to embark on your journey to create dynamic and interactive web applications with React. Happy coding!

The Find , Filter and Reduce Methods

Roberto Marungo — Mon, 15 May 2023 04:40:20 +0000

These are 3 methods will help you iterate through an array

Find
Filter
Reduce

In JavaScript we often come by many arrays in programing and we may need to iterate through them. Perhaps we want to find one specific name or filter out some names in an array. Sometime we want to reduce multiple values to just a single value. That is where these Array methods come in.

The Array

We will be using this array through out the code examples so feel free to reference back to it.

const dogs =[
    {name: 'Dora', breed: 'beagle', weight: 32},
    {name : 'Bella', breed: 'poodle', weight: 26},
    {name: 'Waffles', breed: 'beagle', weight: 35},
    {name: 'Prince', breed: 'maltese', weight: 21}
];

The Find Method

In this Example we are calling the find method on the Array of dogs and storing the results in a variable called bellaThePoodle. The find methods takes a callback function as its argument. It then iterates through the array each time passing each element in the array to the call back function. Once the condition in the function is met it returns the first element that returns true. In the example we are looking for dog.name to equal Bella. It then returns the second element in the array which meets the condition. If the condition is not met it returns undefined. It does not mutate the array.

const bellaThePoodle = dogs.find(function(dog) { 
return dog.name === 'Bella';
});

console.log(bellaThePoodle);

{name : 'Bella', breed: 'poodle', weight: 26}

The Filter Method

Have you ever been on website shopping for clothes and use a filter to only show a certain size or color. Well this is where the filter methods shines. In the example below we call the filter method on the dogs array to filter out the beagles. We then return every element that meets the condition in the callback function to the beagles variable. It returns an array of objects that contain a beagle as a breed.

The find method takes a callback function as an argument. It then iterates through the array passing each element to the callback function and returns every element that meets the callback condition.

const beagles = dogs.filter(function(dog) { 
return dog.breed === 'beagle';
});

console.log(beagles);

[
{name: 'Dora', breed: 'beagle', weight: 32},
{name: 'Waffles', breed: 'beagle', weight: 35}
]

The Reduce method

You ever had a pocket full of change and wish it could count itself and give you back the total value? Well the Reduce method is here to help. It takes multiple values in an array and reduces it to one value. In the example bellow we call the reduce method on the dogs array. It takes two arguments a callback function and an Accumulator. Whats is an a Accumulator? Well it can be a number of things it can be a variable that holds the starting value like 0 or an empty array or object that stores the value every time we iterate through the array. It hold the current value as we continue to add all the values. The reduce method then iterates through the array passing each element in the array along with the Accumulator. In the example we are taking the weight in every element of the dogs array and adding it to the Accumulator. When all the values have been added it returns the Accumulator. In the Example it Returns the total weight of all the Dogs in the Array.

const totalDogWeight = dog.reduce(function(totalWeight, dog) { 
return totalWeight + dog.weight 
}, 0);

console.log(`Total Dog Weight: ${totalDogWeight}`);

Total Dog Weight: 114

In Conclusion

There are many array methods that will help shorten your code and make coding an application less time consuming. It takes the pressure of having to program all the functionality of your application from scratch. I hope this helps some one on their journey to Software Development as many other articles have help me through my own Journey.

My Journey into Software Development

Roberto Marungo — Sat, 16 Apr 2022 01:37:54 +0000

My journey began in the 6th grade in the year 2000 there was an after-school program that summer that allowed those students without a computer at home to learn how to utilize computers. The instructor hosting this class was a computer science major who previously worked in the field of computers and technology for a while and decided to instead teach kids math in elementary schools. This is when I first learn what HTML was. Writing a few lines in the Netscape browser. I was amazed at what a few lines of code could do like bring pages with information to life by formatting text and images to give us something so cool.

Fast forward to the year 2014 where again after a hard long life, I stumbled into programming in the form of a book written by Barry Burd (Java for Dummies) I fell in love with the language by reading books and watching tutorials on YouTube by a channel named mybringback (Travis). I also stumbled into the Team-Treehouse website where I wrote my first application for android with the help of their Android development track, later monetizing it and making a cool 5 grand. I was astonished how such a simple app could generate over 100k downloads and bring back so much revenue I used the money towards a new laptop to help continue on my journey.

I am now enrolled in FlatIron Bootcamp it is very challenging and demanding but I have learned a lot in the last few weeks that will help in my pursuit of a software developer job. I am currently learning JavaScript and other technologies like HTML, CSS, and Ruby to form what is known as a FullStack Web Developer. After completion of this program, I plan to develop open-source software and as well work for a technology company that has great values and goals.