Coding Bootcamp Week 10: Frontend Project, Error Handling, Custom Hooks & Class-Based Components

Frontend development

Photo by Rahul Mishra on Unsplash

Frontend Project ✨

I developed a React application for my frontend project that displays articles from a backend project I completed two weeks ago.

You can take a look at my application here. I must note that since I am currently on a free trial on Render, there might be a delay in the loading of data.

You can check out my GitHub repo for more info.

Error Handling ⚠️

React error handling is important when building a frontend connected to an API as errors can occur during the process. Errors can be either client-side or server-side, and it’s necessary to handle them on the front-end and provide meaningful feedback to the user.

Default routes can be set up in react-router Route components to handle undefined user URLs Error Components can be created to catch and display errors.

import { Route, Switch } from 'react-router-dom';
import { ErrorPage } from './ErrorPage'

function App() {
  return (
    <div>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route component={ErrorPage} />
      </Switch>
    </div>
  );
}

// ErrorPage.jsx
export const ErrorPage = () => {
  return <div>Sorry, this page does not exist.</div>;
}

Error components can be reusable and can receive error messages and codes from the API to provide helpful feedback to the user. Examples of errors to look out for include missing post information, badly formatted request URLs, and unauthorised user access.

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://exampleapi.com/data')
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => setError(error));
  }, []);

  if (error) {
    return <ErrorComponent error={error} />;
  }

  return <div>{data && data.message}</div>;
}

function ErrorComponent({ error }) {
  return <div>{error.message}</div>;
}

In the above example, ExampleComponent is fetching data from an external API and sets the data state with the result. If there is an error during the API call, it sets the error state with the error object. The ErrorComponent component receives the error object as a prop and displays the error message to the user.

Custom Hooks

Custom React Hooks allow us to extract component logic into reusable functions. A custom hook is a function whose name starts with “use” and may call other hooks within itself.

The rules of hooks must be followed when writing custom hooks. Custom hooks work like components but don’t have a set return value, and can return any data structure.

By extracting logic into hooks, it can be reused by any component and can be called multiple times. Hooks allow for the re-use of stateful logic, while to share state we should use other mechanisms such as Context or a composed component.

Class Based Components

Prior to React version 16.8, functional components could not handle certain features, such as holding values in state or performing side effects, which required the use of class based components.

However, with the introduction of hooks, functional components can now achieve the same goals as class based components. Class based components can still be used and are often found in legacy projects.

import React from 'react';

class Greeting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: props.name
    };
  }

  render() {
    return (
      <div>
        <h1>Hello, {this.state.name}!</h1>
      </div>
    );
  }
}

export default Greeting;

In this example, we have created a Greeting component that extends the React.Component class. The component has a constructor that initializes the component's state with a name property based on the name prop that was passed to the component. The render method returns JSX that displays the name property in a heading.

It is generally recommended to use functional components with hooks for new projects and to update existing class-based components to use hooks if possible.

Hooks offer a simpler and more intuitive way of managing state and lifecycle in React components, and they also encourage a more functional programming style which can make code easier to reason about and test.

Emotional check 🤖

Having now completed both my backend and frontend projects, I find myself reflecting on the journey thus far and wonder whether it is appropriate to call myself a ‘developer’ now. The challenges posed by these projects were stimulating and engaging, almost akin to playing a game with a concrete goal in mind. The process of translating my ideas into finished products has been immensely satisfying, and has boosted my confidence.

The next phase of the bootcamp involves a three-week team project where I will have the opportunity to collaborate with four to six other developers. I am excited for this new challenge, as it will allow me to further hone my skills and gain valuable experience working within a team.

As my bootcamp draws to a close, I also have CV, interview, and tech test preparation to attend to. It is a bittersweet feeling, as I have learned so much over the course of these past three months. I am grateful for the skills and confidence that this program has instilled in me, and am looking forward to the opportunities that lie ahead.

Leap through time ⏲

• Week 1: Command line, Git & GitHub, JavaScript Basics & Introduction to HTML/CSS
• Week 2: Node.js, NPM, Test Driven Development, Pair Programming & Closure
• Week 3: Recursion, Object Oriented Programming, Data Structures — Stacks & Queues
• Week 4: Review day, Asynchronous Callbacks, Internet & Promises
• Week 5: HTTP, Express, Model-View-Controller (MVC) Pattern & SQL
• Week 6: Node Postgres, Supertest & Error Handling with Express
• Week 7: Backend Project, Async Await & CICD
• Week 8: DOM, React — Components, State & Hooks
• Week 9: API Calls, React — Router, Context & Optimistic Rendering
• Week 10: 👀