> For the complete documentation index, see [llms.txt](https://max-frontend.gitbook.io/redux-course-ru-v2/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://max-frontend.gitbook.io/redux-course-ru-v2/sozdanie.md).

# Создание

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

![app preview](/files/-LvLnQaJ7iEGS2XB6Ths)

Прежде чем описывать структуру, давайте в общих чертах взглянем на 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).