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.
Этот проект представляет собой React-приложение, которое отображает список книг, включая их авторов и рецензии пользователей. Данные о книгах, авторах и рецензиях загружаются асинхронно с использованием фиктивного API, имитирующего задержки сети. Приложение демонстрирует работу с React, TypeScript и основными принципами работы с компонентами и состояниями.
src/
├── lib/
│ ├── types.ts # Определение интерфейсов для книг, рецензий и пользователей.
│ └── api.ts # Асинхронные функции для получения данных о книгах, пользователях и рецензиях.
├── components/
│ ├── App.tsx # Главный компонент, который загружает данные и управляет состоянием.
│ └── Card.tsx # Компонент для отображения информации о книге.
└── index.tsx # Входная точка приложения.
npm install
# или
yarn install
Для запуска проекта в режиме разработки используйте команду:
npm start
# или
yarn start
Приложение будет доступно по адресу: http://localhost:3000
.
Для сборки проекта используйте команду:
npm run build
# или
yarn build
Собранная версия будет находиться в папке build
.
Book
: Описывает объект книги. Включает id
, name
, description
, authorId
, reviewIds
.User
: Описывает объект пользователя. Включает id
, name
.Review
: Описывает объект рецензии. Включает id
, userId
, text
.BookInformation
: Описывает объект книги с полной информацией об авторе и рецензиях.ReviewInformation
: Описывает объект рецензии с полной информацией о пользователе.getBooks()
: Возвращает список книг.getUsers()
: Возвращает список пользователей.getReviews()
: Возвращает список рецензий.Компонент App
загружает книги с помощью функции getBooks()
и отображает их, используя компонент Card
для каждого элемента списка.
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 (
<div>
<h1>Мои книги:</h1>
{books.map((book) => (
<Card key={book.id} book={book} />
))}
</div>
);
};
export default App;
Компонент Card
принимает объект BookInformation
и отображает название книги, имя автора, описание и список рецензий.
import { FC } from "react";
import { BookInformation } from "../lib/types";
const Card: FC<{ book: BookInformation }> = ({ book }) => (
<div>
<h3>{book.name}</h3>
<p><b>Автор</b>: {book.author.name}</p>
<p><b>Описание</b>: {book.description}</p>
<p><b>Отзывы:</b> {book.reviews.map((review) => (
<div key={review.id}>{review.text} - {review.user.name}</div>
))}</p>
</div>
);
export default Card;
Если вы хотите предложить улучшения или обнаружили ошибки, пожалуйста, создайте Pull Request или Issue в этом репозитории.
Спасибо за использование этого проекта!