Going through the Files

React is based on JavaScript, which you may not be familiar with. However, you probably have some coding experience already, so do your best in reading the code. For this part of the assignment, we will not be writing code for the most part. The coding part will come at the very end of the assignment into next week.

Typescript

Our repository is based on TypeScript, which is based off of vanilla JavaScript. You might notice that in JavaScript syntax, it's much like Python where there are no types. However, having o types often leads to user error. Enforcing typing, meaning that constraining values to certain types like String, Objects, Lists, Integers, etc help make sure that your system is cleaner.

Files

Let's take a look a the different files in the folder

node_modules/

You've seen this before! Recall what this does

public/

This is a folder where all your publically served images should go. If you want to include

index.tsx (or index.js)

index.html is usually the entrypoint for classic websites. index.tsx is the entrypoint for React apps. An entrypoint is where the runtime first reads anything, so you can think of this as the "top of your code"

App.tsx

This is usually named App, but sometimes people call it something else. It doesn't mean much, but just make sure that your index.tsx has this line:

root.render(
  <React.StrictMode>
    <App /> // this has 
  </React.StrictMode>
);

This will make sure that the App instance is included in index. App represents the core file that contains the core structure of your frontend interface. This is sort of the "homepage."

Notice that App.tsx contains a line

<BooksGallery />

The homepage then can contain other React Components, which is the terminology for each structure that's attached to the homepage. If you wanted to add a navbar, for instance, you can make a NavBar.tsx file and add a line <NavBar /> line on the home page.

BooksGallery.tsx

Here's where this particular component called BooksGallery is contained. This is the overall container that acts like the "bookshelf" on our home page. This is a container that holds many book objects.

return (
        <div className="gallery">
            {books.map((book) => (
                <BookCard key={book._id} {...book} />
            ))}
        </div>
    );

Each book that the page gets is mapped (remember how Python map works?) to a BookCard component. This file then returns what's basically HTML containing a list of BookCards.

BookCard.tsx

This is the individual "book" that you see in the library.

Notice the type definition:

type Book = {
    _id: string;
    title: string;
    author: string;
};

This is how we define custom types in Typescript.

Then notice

const BookCard: React.FC<Book> = ({ _id, title, author })

You might notice these passed from BooksGallery.tsx when creating new BookCards. We call these props, which are parameters that are passed between components. To pass information from the Gallery to Card, you need to use props.

Then look at

return (
        <div className="card">
            <img src="https://dictionary.cambridge.org/us/images/thumb/book_noun_001_01679.jpg?version=5.0.388" alt="Book Cover" />
            <div className="card-info">
                <h3>{title}</h3>
                <p>{author}</p>
                <button className='button' onClick={handleBookmark}>{isBookmarked ? 'Unbookmark' : 'Bookmark'}</button>
            </div>
        </div>
    );

This is where the "meat" of the content is located. This is how the cards are rendered on the screen and where the image is attached.

*.css

CSS, or cascading style sheets, are the main way that your pages are styled. Is the page green or blue? What font are we using? How much space is there between each component? CSS is where the aesthetics of a web page design comes in. Look at this guide for more:

CSS Tutorial