Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/notacat1/books-mapping
This React app displays books with authors and reviews, fetching data asynchronously from a mock API. It demonstrates React, TypeScript, and core component and state management principles.
https://github.com/notacat1/books-mapping
css html react redux typescript
Last synced: 28 days ago
JSON representation
This React app displays books with authors and reviews, fetching data asynchronously from a mock API. It demonstrates React, TypeScript, and core component and state management principles.
- Host: GitHub
- URL: https://github.com/notacat1/books-mapping
- Owner: NotACat1
- Created: 2024-08-20T09:10:41.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-08-20T15:05:39.000Z (3 months ago)
- Last Synced: 2024-09-26T19:22:25.219Z (about 1 month ago)
- Topics: css, html, react, redux, typescript
- Language: TypeScript
- Homepage: https://codesandbox.io/p/github/NotACat1/books-mapping
- Size: 546 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Проект: Книжные Рецензии
## Описание
Этот проект представляет собой React-приложение, которое отображает список книг, включая их авторов и рецензии пользователей. Данные о книгах, авторах и рецензиях загружаются асинхронно с использованием фиктивного API, имитирующего задержки сети. Приложение демонстрирует работу с React, TypeScript и основными принципами работы с компонентами и состояниями.
## Функционал
- **Отображение списка книг:** Приложение загружает список книг и отображает их названия, описания, авторов и рецензии.
- **Асинхронная загрузка данных:** Данные о книгах, пользователях и рецензиях загружаются асинхронно, что имитирует реальную работу с внешними API.
- **Типизация с помощью TypeScript:** Использование интерфейсов для описания типов данных и предотвращения ошибок на этапе разработки.
## Структура проекта
```plaintext
src/
├── lib/
│ ├── types.ts # Определение интерфейсов для книг, рецензий и пользователей.
│ └── api.ts # Асинхронные функции для получения данных о книгах, пользователях и рецензиях.
├── components/
│ ├── App.tsx # Главный компонент, который загружает данные и управляет состоянием.
│ └── Card.tsx # Компонент для отображения информации о книге.
└── index.tsx # Входная точка приложения.
```
## Установка и запуск
### Предварительные требования
- [Node.js](https://nodejs.org/en/download/package-manager) (версия 14.x или выше)
- [npm](https://nodejs.org/en/download/package-manager) или [yarn](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable)
### Установка зависимостей
```bash
npm install
# или
yarn install
```
### Запуск проекта
Для запуска проекта в режиме разработки используйте команду:
```bash
npm start
# или
yarn start
```
Приложение будет доступно по адресу: `http://localhost:3000`.
### Сборка проекта
Для сборки проекта используйте команду:
```bash
npm run build
# или
yarn build
```
Собранная версия будет находиться в папке `build`.
## Используемые технологии
- **React**: Библиотека для построения пользовательских интерфейсов.
- **TypeScript**: Язык программирования, расширяющий JavaScript с поддержкой статической типизации.
- **CSS**: Стилизация приложения.
## Разработка
### Основные интерфейсы
- **`Book`**: Описывает объект книги. Включает `id`, `name`, `description`, `authorId`, `reviewIds`.
- **`User`**: Описывает объект пользователя. Включает `id`, `name`.
- **`Review`**: Описывает объект рецензии. Включает `id`, `userId`, `text`.
- **`BookInformation`**: Описывает объект книги с полной информацией об авторе и рецензиях.
- **`ReviewInformation`**: Описывает объект рецензии с полной информацией о пользователе.
### Асинхронные функции
- **`getBooks()`**: Возвращает список книг.
- **`getUsers()`**: Возвращает список пользователей.
- **`getReviews()`**: Возвращает список рецензий.
## Примеры использования
### Отображение списка книг
Компонент `App` загружает книги с помощью функции `getBooks()` и отображает их, используя компонент `Card` для каждого элемента списка.
```tsx
import { useEffect, useState } from "react";
import { getBooks } from "./lib/api";
import Card from "./components/Card";
const App = () => {
const [books, setBooks] = useState([]);
useEffect(() => {
getBooks().then((fetchedBooks) => setBooks(fetchedBooks));
}, []);
return (
Мои книги:
{books.map((book) => (
))}
);
};
export default App;
```
### Отображение книги и рецензий
Компонент `Card` принимает объект `BookInformation` и отображает название книги, имя автора, описание и список рецензий.
```tsx
import { FC } from "react";
import { BookInformation } from "../lib/types";
const Card: FC<{ book: BookInformation }> = ({ book }) => (
{book.name}
Автор: {book.author.name}
Описание: {book.description}
Отзывы: {book.reviews.map((review) => (
{review.text} - {review.user.name}
))}
);
export default Card;
```
## Контрибьюции
Если вы хотите предложить улучшения или обнаружили ошибки, пожалуйста, создайте Pull Request или Issue в этом репозитории.
---
Спасибо за использование этого проекта!