# 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:

```typescript
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

```typescript
<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.

```typescript
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 `BookCard`s.&#x20;

#### BookCard.tsx

This is the individual "book" that you see in the library.&#x20;

Notice the type definition:

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

This is how we define custom types in Typescript.

Then notice&#x20;

```typescript
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&#x20;

```typescript
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:

{% embed url="<https://www.w3schools.com/css/>" %}