# 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/>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wiki.berkie.ee/techops/getting-started-projects/web-demo-project/assignment-3-frontend/going-through-the-files.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.