React intro interactivity

[Nolra]

Код занятия: https://github.com/Nolra/front_course_2023/tree/react-intro-inter

Материал для повторения: https://ru.legacy.reactjs.org/docs/lists-and-keys.html https://ru.legacy.reactjs.org/docs/handling-events.html https://ru.legacy.reactjs.org/docs/forms.html

Домашнее задание: образец (https://nolra.github.io/react_hw/)

Подготовьте макет приложения с помощью create-react-app, который будет называться react_homeworks.

В src создайте директорию components, где будут папки ваших компонентов относящихся к домашним заданиям. 
К каждому компоненту нужно будет создавать файл (ComponentName).jsx и 
(componentName).module.css (стили можно взять в образце по ссылке или написать собственные)

В компоненте App разместите Компонент Tabs, который будет иметь статическую структуру, 
и рендерить список табов, пусть табы имеют названия наших ближайших тем по которым будут заданы домашние работы.

* Примените к этим компонентам стили через создание в их директориях {componentName}.module.css 
и импорт style в jsx файл вашего компонента, стили можно взять в образце приложения или написать собственные. 
Чтобы применить класс к элементу достаточно передать его через <p className={style.myClass}>someText</p>

Junior задача:
Затем разработайте компонент Gallery который содержит очень похожую разметку для двух профилей. 
Извлеките из него компонент Profile и используйте в Gallery

Middle задача: 
Напишите компонент ShoppingCart, со следующей структурой данных:

const initialProducts = [
    {
        id: 0,
        name: 'Baklava',
        count: 1,
    },
    {
        id: 1,
        name: 'Cheese',
        count: 5,
    },
    {
        id: 2,
        name: 'Spaghetti',
        count: 2,
    },
];

Компонент должен давать возможность увеличивать, либо уменьшать количество того или иного товара.

[voidaugust]

https://pashbespaloff.github.io/react-craftworks/ https://github.com/pashbespaloff/react-craftworks

[nedostatoksna]

https://nedostatoksna.github.io/react_homeworks/ https://github.com/nedostatoksna/react_homeworks

[Nolra]

https://pashbespaloff.github.io/react-craftworks/ https://github.com/pashbespaloff/react-craftworks

По поподу папки helpers - в ней должны быть вспомогательные функции, то есть (js файлы) А heading.jsx лучше разместить в отдельной папке ui на одном уровне с папкой components в /src

Также лучше разделить папку Intro на подпапки с отдельными компонентами Например так /Gallery /Profile где profiles.js (не jsx)

/ShoppingCart initialProducts.js (неjsx)

В остальном отлично

[Nolra]

https://nedostatoksna.github.io/react_homeworks/ https://github.com/nedostatoksna/react_homeworks

src/Components/Intro/Components/Buttons Начнем с того, что папка components (c маленькой буквы - с большой только сами компоненты), должна размещаться на верхнем уровне и больше нигде.

Button (не Buttons) лучше разместить в отдельной папке ui, на верхнем уровне в /src

src/Components/Intro/Components/Gallery - здесь нужно вынести данные из компонента (разместить перед вызовом или в отдельном js файле) а так же тебе не нужно рендерить через индекс массива, это нужно делать в переборе! persons.map(person => <>{person.toJSX}</>) Также как ты делаешь это в других местах.

В остальном все отлично, очень милые заготовки для будущих компонентов контента.

[voidaugust]

https://pashbespaloff.github.io/react-craftworks/ https://github.com/pashbespaloff/react-craftworks

По поподу папки helpers - в ней должны быть вспомогательные функции, то есть (js файлы) А heading.jsx лучше разместить в отдельной папке ui на одном уровне с папкой components в /src

Также лучше разделить папку Intro на подпапки с отдельными компонентами Например так /Gallery /Profile где profiles.js (не jsx)

/ShoppingCart initialProducts.js (неjsx)

В остальном отлично

Сделано.

[Nolra]

https://nedostatoksna.github.io/react_homeworks/ https://github.com/nedostatoksna/react_homeworks

и немного верстка в junior съехала

[NastyaKamalova]

https://github.com/NastyaKamalova/react_hw

https://nastyakamalova.github.io/react_hw/