The BootCamper's Journey: Week 8

Hello good people, once again you get your weekly fix of the Bootcamper's journey!

This week picked up right off from where we left off and it wasn't shy about it either.

useEffect

We went straight into React Advanced (last week was React Basics) and the first thing that we touched on was the Effect hook!

The Effect hook simply allows you to tell React that a component must do something after rendering. React will store the information (or the "effect") in your function and will only call it after the DOM updates. It's very versatile in the way you want things to render.

For example, there are instances where you would like to load a component only on the page's first load by simply passing an empty array as a second argument.

You can also use it to render whatever you want with a dependency.

Imagine you have a page where you can enter a random number and the corresponding Pokémon's name and sprite shows on the page. As you can see below, we used useEffect and passed as arguments the function and the ID that's been passed down as a prop.

By setting the dependency as the ID, we can ensure that this component only renders when an ID has been given.

import { useState, useEffect } from "react";

function PokemonViewer({ id }) {
      const [pokemon, setPokemon] = useState("");

      async function getPokemon() {
            let response = await fetch(
                  `https://pokeapi.co/api/v2/pokemon/${id}/`
            );
            let data = await response.json();
            setPokemon(data);
      }

      useEffect(getPokemon, [id]);

      return (
            <div className="pokemon-viewer">
                  <p>This is the Pokémon you searched for!</p>
                  <h1>{pokemon.name}</h1>
                  <img src={pokemon.sprites.front_default}/>
            </div>
      );
}

export default PokemonViewer;

useReducer

We swiftly moved on right into useReducer.

The useReducer hook is an alternative to useState and it's preferable to employ useReducer when dealing with "complex state logic that involves multiple sub-values or when the next state depends on the previous one", as mentioned in the official documentation.

Testing with React

One of the more important topics that the boot camp really pushes for is TDD, Test-Driven Development. Naturally, as good developers, we had to learn how to test within React!

We got really familiar with some parts of the React Testing Library, using render, fireEvent along with jest to ensure that the components we were making were doing exactly what we expected.

import { render, fireEvent } from "@testing-library/react";
import React from "react";
import AddItem from "./index.js";

const testProps = {
      addToList: jest.fn(),
      buttonText: "Add To List",
};

test(`Given the prop of the function handleClick, when clicked, the button should call the handleclick function`, () => {
      const { getByText } = render(<AddItem {...testProps} />);
      const renderedButton = getByText("Add To List");
      fireEvent.click(renderedButton);
      expect(testProps.addToList).toHaveBeenCalled();
});

I tested something here, given by the title I'm assuming I was testing the handleClick function, the whole week was a blur!

React Routers

My jaw dropped to the ground when we were introduced to React Router and how EASY it was to link different pages to a button or connect pages to a certain path. Once again, I see how React is so popular and so in demand, and why I believe learning to use it at a proficient level will only benefit me in the long term.

Hackathon Friday

And then, as usual, came Hackathon Friday and we were tasked to put together all the things we learnt. We were able to put together an MVP (minimum viable product) that showed a football player's statistics when searched for - using all the hooks that we learnt prior.

My final thoughts

I'm really enjoying the boot camp and things are really settling into my mind. I'm excited (and slightly nervous) to start the next week where we will be focusing on building a project for a whole week, but it's an opportunity to implement what we've learnt via development, and what's better for a beginner developer trying to learn?

If there are any future bootcampers (specifically the School of Code bootcampers) reading this blog at week 8, just know that all of us felt the way you currently feel at the end of week 8 - it is the most information that we have absorbed throughout the boot camp thus far and our brains were working overtime.

Take it easy and take opportunities to implement what you've learnt and everything will slowly, but surely, fall into place.

And that was week 8 in a nutshell!

If you're still reading, thank you so much, I hope to use this blog to post and share my journey and the useful knowledge I gain throughout my journey! I would love to connect with other developers to see what they're learning and learn from them - you can connect with me on:

Twitter: codewithmohamed

Github: codewithmohamed

Instagram: codewithmohamed

Youtube: Code with Mohamed

LinkedIn: Mohamed Mohamud

Email: mohamedcodes92@gmail.com