5.2 Каркасс приложения

Несколько слов о том, где будет находиться наше приложение, а также о том, как будет выглядеть структура проекта.

Для максимального удобства и простоты мы будем разрабатывать проект нашего приложения в онлайн среде Repl. Эта среда довольно похожа на настоящую (например WebStorm) и очень удобна для обучения. Вот начальный проект на React:

Вы можете поизменять код, чтобы посмотреть на результат. Всё очень похоже на CodePen.

Теперь, выбрав среду разработки, самое время перейти к структуре проекта.

В главе FAQ о структуре файлов можно найти несколько разных вариантов. Мы же выберем вариант группирования по типу файлов. Как вы увидите позднее - это очень удобная структура проекта, когда используется библиотека Redux.

В первую очередь давайте определим самую важную директорию под названием components. В ней мы будем располагать все наши пользовательские компоненты. По сути components - это наша библиотека пользовательских компонентов.

Помимо components нам также понадобится какая-то глобальная конфигурация всего приложения. То есть нам необходим такой файл, в котором мы бы могли задавать такие важные параметры как: доменное имя сервера с данными, время ожидания ответа сервера и многие другие. Создадим файл конфигурации приложения и назовём его config.js. Также в качестве примера зададим в нём максимальное время ожидания запроса:

    
  export default {
    responseTimeout: 10000
  }
  

С учетом вышесказанного проект будет выглядеть так:

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