Front End Libraries Projects - Random Quote Machine- Which library should I use?

JavaScript
1

Tell us what’s happening:

I feel like I’ve been thrown into the deep end with this project and I am drowning. I worked through all of the challenges fairly easily and then was just told to build this random quote machine. I have never done any coding outside of these fCC courses, so I am clueless to all resources, including codepen. Through googling and watching videos, I have gotten this far, but I am so lost.

Am I supposed to use only one library? Like React OR jQuery? Or can I combine them? I started with React because I found a helpful video, but he hard codes only 5 quotes into his JS. I want to challenge myself to use an API, so I found one and got it to log to the console, but had to use jQuery to do it. Most of the help articles I can find are still above my head in understanding.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

Challenge Information:

Front End Development Libraries Projects - Build a Random Quote Machine

2

Use fetch and a useEffect for the initial load and an event handler for getting the new quote.

Example 
import React, { useState, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";

const App = () => {
  const [post, setPost] = useState({});

  const getPost = () => {
    const randomPostId = Math.floor(Math.random() * 99) + 1;
    fetch(`https://jsonplaceholder.typicode.com/posts/${randomPostId}`)
      .then((data) => data.json())
      .then((json) => setPost(json));
  };

  useEffect(() => {
    getPost();
  }, []);

  return (
    <section>
      <h2>{post.title || "Loading"}</h2>
      <p>{post.body || "Loading"}</p>
      <button onClick={getPost}>Get new post</button>
    </section>
  );
};

const root = createRoot(document.getElementById("root"));
root.render(<App />);