👨‍💻 React from a Bootcamper's Perspective | Part 3 - ☂️ Hooks

Another motivational quote to get things started:

"No masterpiece was ever created by a lazy artist." — Anonymous

In earlier posts, I discussed the importance of converting different aspects of your React app to Class components. This was necessary for a variety of reasons (allowing updates to state from child components, etc.) until February 2019. We haven't specifically covered these in my Bootcamp and will not be, so I've taken the time to learn them on my own and will be showcasing how they work below.

We'll get back to creating a project next week but this will still follow the common code-along format.

Hooks in Practice - 🏖️ Code Sandbox 🏖️

Earlier, we worked with code that showcased the use of a class in React. You can find that code here: Farm Code

We are now going to convert that code to a function that utilizes hooks by changing the class back and utilizing the import statement for hooks. To begin let's convert our import statement that includes big React and little react.

import React, { useState } from "react";

I removed the Component important and instead imported useState.

We can then convert our class back to a function and remove the constructor and render methods (which are lifecycle methods, which I'll touch on in a later post). The final code for App.js should look like this:

import React, { useState } from "react";
import "./styles.css";
import Farm from "./Farm/Farm";

function App() {

  return (
    <div className="App">
      <h1>Welcome to My Farm</h1>
      <h2>We have the following:</h2>
      <Farm />
    </div>
  );
}

export default App;

Currently, we are not taking advantage of state. State is an object that controls the behavior of a component. We are not manipulating our app currently but let's try to showcase something we can do with state within React.

🐛 Count Bugs 🐛

Let's assume we're a farmer and we want to have a way to count the number of bugs that are on our farm (work with me, please).

So we want to add a button to our farm component to allow the farmer to count all the bugs he sees. To do this, we need to utilize state to render our bug count to the screen. Instead of using a constructor or one of the other methods that I have yet to discuss with you (setState() among others), let's take advantage of hooks.

To do so, we can create variables that will allow us to store the count of the bugs.

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

This definition goes before the return statement in our App function. We utilize useState() and set count to 0 by passing in 0 as our argument. We can then pass down these variables that are in our state to our Farm component by using the following code:

<Farm count={count} setCount={setCount} />

We have made setCount and count available to use as props in our Farm component. Inside Farm, we can use props.count and props.setCount to update the count every time the farmer clicks on the "Add Bug" button.

The code would look something like this:

<button onClick={() => props.setCount(props.count + 1)}>Add Bug</button>
<p>
    <strong>Current bugs: {props.count}</strong>
</p>

We are able to update the state of our count by incrementing it by 1 every time the button is clicked. A refresh will remove that count because it is only stored in state. We then can render the count by calling {props.count}.

The Code Sandbox that utilizes hooks to update state in child components can be found here:

This was a very, very high-level overview of state and Hooks. I recommend reading further and practicing on your own! As an added challenge, see if you can make the count reset once it gets to a certain number!

This has been me, sharing React from a Bootcamper's perspective.

Til next week, when we focus a little more on styling and developing our farm project. ~💠Aaron💠