/oktenreact

Primary LanguageJavaScript

Okten React

Лекції REACT

Завдання

Розбір домашок

Бонусні лекції

hw-5 axios useForm Joi

Реалізувати, використовуючи useForm хук, а також сервіс axios наступне. Всі запити винести в сервісний рівень

1.

Зробити компонент, в якому буде форма, за допомоги якої можливо створити нового юзера постовим запитом на http://jsonplaceholder.typicode.com/users

2.

Зробити компонент, в якому буде форма, за допомоги якої можливо створити новий комментар постовим запитом на http://jsonplaceholder.typicode.com/comments

3.

http://owu.linkpc.net/carsAPI/v1/doc Реалізувати створення, видалення та оновлення машин

hw-6 routing useLocation useParams

Реалізувати 3 маршрути

todos

albums

comments

відображати ті чи інші маршрути можна на будь-якому рівні на ваш вибір.

Control Work

The Movies app

  1. mockup download https://cssauthor.com/pinball-responsive-grid-style-blog-psd/
  2. Movies Database. Register here: https://www.themoviedb.org/documentation/api
  3. to find your api key and token:
  4. API is here: https://developers.themoviedb.org/3/discover/movie-discover
  5. Some API info is here: https://www.themoviedb.org/settings/api
  6. в помощь по визуализации компонентов они есть как для реакта так и для ангулара (не по прямым ссылкам представленным здесь, можете не использовать их если не хотите) Components: stars: https://codepen.io/benjaminreid/pen/vNVwPW https://www.npmjs.com/package/react-star-ratings badge for genres: https://reactstrap.github.io/components/badge/ Концепция общего вида (вид не должен быть такой же! Вы не верстальщики. ЭТО КОНЦЕПЦИЯ размещения элементов. Если конечно сделаете так же , то это будет овер круто) https://dribbble.com/shots/6461891-Media-store-idea-Movies https://dribbble.com/shots/6090855-Raymov-Website-streaming-movie https://dribbble.com/search/movies%20web%20app
  7. по структуре проекта:
  1. основные действия
  • getMovies
  • getGenres
  1. Если вы используете react : в redux store должны лежать список фильмов, жанры (должны быть соответствующие редьюсеры). Если ангулар, то на ваше усмотрение
  2. Components:
  • Header
  • MoviesList (renders MoviesListCards)
  • MoviesListCard (contain all movie information)
  • PosterPreview (movie image)
  • StarsRating
  • MovieInfo (contains label, description, badges)
  • GenreBadge
  • UserInfo (just hardcoded small circle and name)
  1. Containers:
  • MoviesPage основное задание:
  1. пагинация
  2. вторая (следующая) страница с расширеным описанием фильма (подразумевается роутинг). она должна открываться если пользователь кликнул на карточку с фильмом реализовать страницу со списком фильмов, сделать свитчер темной/светлой темы стиля, сделать запросы на серве

hw-8 useMemo useCallback memo

Створити компоненту TestUseMemo в та викликати її в Апп TestUseMemo має пропсу data (довільне занчення та данні) Створити в середині TestUseMemo функцію, з "важкою" логікою (наприклад великий цикл). та мемомізувати її за допомоги useMemo якщо data змінюється

Зробити те саме, але з використанням useCallback

Створити хук useToggle, котрий буде міняти статус компоненти з true на false і навпаки. Сигнатура хука function useToggle(defaultValue)

створити хук useFetch, котрий спроможний робити запит на jsonplaceholder на /users, /posts, /comments в залежності від аргументу. Сигнатура хука function(endpoint)

створити хук function useArray(defaultValue), котрий спроможний маніпулювати станом масива певної копмоненти В середині хука реалізувати методи add(item), remove(id)

hw-9-redux-core

Реалізувати crud операції з автівками з http://owu.linkpc.net/carsAPI/v1/doc використовуючи react redux