Core React Concepts: Components, Hooks, and Fetch API Explained

This lesson focuses on essential React concepts you'll use while building the app. You'll explore components, functions, hooks like useState, and how to fetch data from external APIs like JokeAPI, all in a practical and beginner-friendly way.

Components

In React, components are the building blocks of the application’s UI. A component is an independent, reusable piece of the interface – for example, a button, a header, or a quote display could each be component. There are two main types of components in React:

• Functional Components: These are written as JavaScript functions. They receive input data via props and return JSX (which is React’s syntax for describing UI, similar to HTML). Functional components are simple and powerful, especially with the addition of Hooks in React, which allow them to manage state and side effects.
• Class Components: These are an older style of React component defined using ES6 classes. Class components can hold state and have lifecycle methods. In modern React development, you will primarily use functional components with Hooks (as we do in this project), but it’s useful to know class components exist for older codebases.

For our project, we will have at least an App component (our main component) that contains all our UI logic.

useState and useEffect Hooks

Hooks are special functions that let functional components use React features like state and lifecycle. Here are two essential hooks we will use:

• useState: This hook lets us add state to a functional component. State is data that changes over time (or in response to user actions) and influences what the component displays. When we call useState, we specify an initial value and React returns an array with two elements: the current state value and a function to update that value.
• useEffect: This hook allows us to run side effects in a functional component. A side effect is any operation that interacts with the outside world or something that is not a plain calculation of the UI. Common examples are data fetching, timers, or manual DOM manipulations. With useEffect, we tell React to run a function after rendering (and optionally after specific state or prop changes).

How they work together: We will use useState to store the quote data (text and author), and useEffect to fetch new data at the right times. On the initial load, useEffect (with empty dependencies) will run a fetch call once, get a quote from the API, and then use the state updater from useState to set the quote state.

This state update triggers React to re-render the component, and now the UI will show the fetched quote. We will also have a button that, when clicked, triggers another fetch (possibly via a separate function) and updates state with a new quote – causing the component to render the new quote.

Fetch API (updated for DummyJSON + Type.fit)

Here’s the thing: your app only needs a clean, reliable way to pull a quote over HTTPS and map it to a consistent shape. We’ll use the Fetch API with async/await, check response.ok, and normalize different payloads to { text, by }.

APIs we use

Primary: https://dummyjson.com/quotes/random → returns

Fallback: https://type.fit/api/quotes → returns an array

Why two sources? If one is slow, blocked, or rate-limited, your UI still works. No CORS headaches, no API keys.

How Fetch works (quick refresher)

• fetch(url) returns a Promise with a Response.
• Always check response.ok and then parse JSON with await response.json().
• Wrap in try/catch for readable error handling.