# Создание

Я предлагаю по шагам создать одностраничное приложение, с минимумом функций, которое после логина в VK и подтверждения прав доступа к фото, будет выдавать топ ваших "залайканных" фото в порядке убывания. Схематично, приложение можно представить следующим образом:

![app preview](https://3842968617-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvLmy8zv6fVL10WKBbo%2F-LvLmz1YS_tUOICnhzwj%2F-LvLnQaJ7iEGS2XB6Ths%2Fapp-preview-2.jpg?generation=1575561840975431\&alt=media)

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

Redux - приложение это:

* состояние (store) приложения в одном месте;
* однонаправленный поток данных: случился action -> редьюсер по команде "фас" отработал и вернул новое состояние -> компонент(ы) обновились;

Redux вдохновлен [Flux](https://facebook.github.io/flux/docs/overview.html#content) методологией и языком программирования [Elm](http://elm-lang.org/)

Под капотом, Redux использует старую фичу реакта - **context**, которая обрела вторую жизнь в версии реакта 16.3 - "[New context API](https://reactjs.org/docs/context.html)".

Есть старый [context](https://reactjs.org/docs/legacy-context.html), который использует Redux, и есть новое Context API, не путайте.

## Файлы и папки:

Изначально наше приложение в файловом менеджере должно выглядеть так (создайте недостающие директории в src):

```
+-- src
|   +-- actions
|   +-- components
|   +-- containers
|   +-- reducers
|   +-- utils
+-- файлы-от-create-react-app
+-- ...
```

Для обучения мы будем использовать очень распространенный подход организации файлов: деление на контейнеры и компоненты + экшены и редьюсеры в отдельных директориях.

Есть и другие подходы, мне нравится [композиция по фичам/страницам](https://jaysoo.ca/2016/02/28/organizing-redux-application/) (EN).