https://github.com/yuriyvyatkin/ra-hw-1.2-class-component

ДЗ №2 к лекции «Компоненты» курса «React» Нетологии
https://github.com/yuriyvyatkin/ra-hw-1.2-class-component

react-class-component

Last synced: 3 months ago
JSON representation

ДЗ №2 к лекции «Компоненты» курса «React» Нетологии

• Host: GitHub
• URL: https://github.com/yuriyvyatkin/ra-hw-1.2-class-component
• Owner: yuriyvyatkin
• Created: 2021-10-23T07:09:57.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-11-01T02:26:59.000Z (almost 4 years ago)
• Last Synced: 2025-01-04T01:38:58.062Z (9 months ago)
• Topics: react-class-component
• Language: CSS
• Homepage: https://yuriyvyatkin.github.io/ra-hw-1.2-class-component/
• Size: 1.01 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Домашнее задание №2 к лекции «Компоненты»

[![Build status](https://ci.appveyor.com/api/projects/status/8pm0bv0v2on98e49?svg=true)](https://ci.appveyor.com/project/yuriyvyatkin/ra-hw-1-2-class-component)

[Ссылка на Github Pages](https://yuriyvyatkin.github.io/ra-hw-1.2-class-component/)

Страница интернет-магазина

===

Необходимо создать React-компонент `ShopItemClass` (class-based компонент), с помощью которого мы могли бы реализовывать представление информации о товарах из нашего каталога на сайте в таком виде (компонент обведён пунктирной линией):

![Внешний вид страницы после реализации компонента](./assets/preview.png)

## Пример использования

```jsx

const item = {

  brand: 'Tiger of Sweden',

  title: 'Leonard coat',

  description: 'Minimalistic coat in cotton-blend',

  descriptionFull: 'Men\'s minimalistic overcoat in cotton-blend. Features a stand-up collar, concealed front closure and single back vent. Slim fit with clean, straight shape. Above-knee length.',

  price: 399,

  currency: '£'

}

// Внутри компонента App

return (

  


    


    

    


      


    

    


      

    

  

)

```


## Описание компонента

Компонент должен иметь один props `item`, в котором он ожидает объект с информацией о товаре со следующими свойствами:

- `brand` — название производителя товара,

- `title` — название товара,

- `description` — краткое описание товара,

- `descriptionFull` — подробное описание товара,

- `price` — цена товара,

- `currency` — валюта товара.

Компонент должен создавать DOM элемент следующей структуры:

```html



  
Tiger of Sweden

  
Leonard coat

  
Minimalistic coat in cotton-blend

  


    Men's minimalistic overcoat in cotton-blend. Features a stand-up collar, concealed front closure and single back vent. Slim fit with clean, straight shape. Above-knee length.

  

  


  


  


    
£399.00

    Добавить в корзину

  



```


Соответственно название производителя необходимо подставить в `h2`, название товара в `h1`, краткое описание в `
`, подробное описание в `div.description`, цену и валюту в `div.price`. При этом символ валюты должен следовать перед ценой, а цена должна быть представлена с двумя числами после запятой.


## Реализация

Реализуйте полноценный проект с помощью create-react-app, не забудьте задействовать prop-types (для item можете использовать либо тип `object`, либо вынести item в класс и использовать `instanceOf`.

Используйте расположенный в данном каталоге css для стилизации.