Установка Redux для разработки веб-приложений на React JS включает несколько шагов.
Подготовка проекта и среды разработки
Распакуйте архив с материалами проекта (ссылка на архив в описании). Вы увидите четыре файла, два из которых являются папками. Откройте текстовый редактор (например, Atom). Для корректной работы необходим Node.js (ссылка на загрузку в описании). Установка Node.js интуитивно понятна.
Установка Node.js модулей
После установки Node.js, откройте терминал (или командную строку в Windows), перейдите в папку проекта и выполните команду npm install. Эта команда установит все модули, перечисленные в package.json. После завершения установки появится папка node_modules, содержащая необходимые модули для React и Redux.
Структура проекта
- package.json: Файл, связывающий проект с необходимыми файлами. Содержит информацию об основном файле проекта (index.js), версии и зависимостях.
- webpack.config.js: Файл конфигурации Webpack. Webpack создает локальный сервер для работы с JavaScript в режиме реального времени, обновляя страницу браузера при изменении кода. Он также трансформирует код с использованием Babel и Sass.
- src/index.html: Файл, содержащий контейнер с id fieldToShow, в который будет выводиться содержимое приложения. Этот файл не требует изменений.
- src/js/index.js: Основной файл JavaScript, содержащий базовый код React с выводом текста и импортом react и react-dom.
Запуск локального сервера
Установите Webpack командой npm install —save-dev webpack. Затем запустите сервер командой npm run start. После успешной компиляции (compiled successfully) перейдите по адресу localhost:3000 в браузере. Изменения в index.js будут автоматически отображаться в браузере после сохранения файла.
В этом уроке произведена установка Redux и настройка проекта. В последующих уроках будет показано написание кода на Redux.