Exploring the React Application

Get acquainted with a simple React application designed to load a list of books.

We'll cover the following

In this lesson we'll lay the groundwork for connecting a brand-new React application to an existing GraphQL API. Rather than building a new GraphQL server, we'll rely on an existing one that contains placeholder data.

The Books application

Let's start by familiarizing ourselves with our example React application, using the GraphQL explorer. This application contains some basic components that, when run, render a simple list of books. We'll add Apollo Client to this application to fetch data from a GraphQL API. Then, we'll use that data to populate a list of books.

Note: This application was created using the create-next-app command.

The index file

Let’s start at the beginning of every create-next-app, with the index file. This application’s index file is at pages/index.tsx.

Note: The index.tsx file has the .tsx extension because it's a TypeScript file. This file also contains JSX.

Here’s the content in that index file.

Press + to interact
import Books, { Book } from "components/Books";
const books: Book[] = [
  {
    id: "1",
    title: "The Apollo Handbook",
  },
];
function App() {
  return (
    <Books books={books} />
  );
}
export default App;

Now let's move on to the more interesting parts—the Books component and the Book type.

The Books component

In the App.tsx file, we define an array of books structured to meet the criteria for the TypeScript Typechecker. Each book contains an id and a title property. This list is then passed to the Books component, which handles it as described in our components/Books/index.tsx file.

Press + to interact
export type Book = {
  id: string;
  title: string;
};
function Books({ books }: { books: Book[] }) {
  return (
    <ul>
      {books.map((book) => (
        <li key={book.id}>{book.title}</li>
      ))}
    </ul>
  );
}
export default Books;

This component takes the list of books and outputs the id and title for each book. This is standard React.

Running the Books application

Click “Run” in the code widget below to see our Books application in action.

import Books, { Book } from "components/Books";

const books: Book[] = [
  {
    id: "1",
    title: "The Apollo Handbook",
  },
];

function App() {
  return (
    <div className="my-4 mx-auto px-4">
      <Books books={books} />
    </div>
  );
}

export default App;
A simple React application