Создание первого приложения

В этой статье мы поговорим о том, как начать работу с ExtReact. Решив выйти из экосистемы Sencha, вы все ещё можете использовать SenchaCmd для создания папки проекта, файлов конфигурации. В остальном нам поможет штатная утила для создания стартового React приложения: create-react-app. Данная утила работает под всеми распространенными операционными системами (Windows, Linux, MacOS) , она создает: папку проекта с дефолтной структурой файлов и папок, экземпляр веб-сервера, unit тесты.

Проект, созданный с помощью create-react-app скрывает файлы конфигурации сборки, в данном примере они нам не понадобятся. Следующие шаги создадут стартовое приложение, затем мы постепенно будем добавлять небольшие файлы React.

Создание стартового приложения

Приложение create-react-app имеет отличное README, которое описывает установку и использование утилы. Для получения полного руководства рекомендую обратиться к официальной документации. Установите приложение create-react-app используяnpm.

Note: Если у вас нет окружения Node + NPM, обратитесь к этой документации.

Вы можете использовать следующие команды терминала в выбранной вами папке для установки приложения create-react-app и запуска веб сервера:

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

Официальная документация Sencha говорит нам об использовании Yeoman , установим его и generator-ext-react (аналог create-react-app) , далее создадим тестовое приложение и запустим веб сервер. При генерации шаблона укажем, что нам необходимы примеры — опция Include some example code , а так же отдельная директория для проекта, все остальные параметры пропускаем. Из остальных параметров я выбрал лишь material тему приложения.

npm install -g yo @extjs/generator-ext-react
yo @extjs/ext-react
cd my-ext-react-app
npm start

Если данная команда вызывает ошибку Cannot resolve package requirements , вам необходимо аутенфицироваться в официальном npm репозитории Sencha, но до этого необходимо оформить trial , если у вас нет лицензии на данный продукт.

npm login --registry=http://npm.sencha.com --scope=@extjs

Старт приложения начинается с {app-root}/src/index.js , именно там хранится основной RenderDOM, с указанием куда именно рендерить приложение, по умолчанию рендер осуществиться в body, с созданием обычного viewport’a.

Учим приложение загружать стили

На небольших приложениях порой нет смысла писать собственную тему, можно обойтись стилизацией на уровне приложения. По умолчанию стартовое приложение не умеет подключать стили, для этого нам необходимо добавить в {app-root}/package.json:

{
  ...
  "devDependencies": {
    ....
    "style-loader": "^0.13.1",
    "css-loader": "^0.26.1"
  }
}

Устанавливаем devDependencies командой npm install --only=dev , далее идем в {app-root}/webpack.config.js (это по сути аналог app.json) и добавляем правила

....
module.exports = function (env) {
    ....
    return portfinder.getPortPromise().then(port => {
        ....
        return {
            ....
            module: {
                rules: [
                    ....
                    {
                        test: /\.css$/,
                        use: [
                            'style-loader', 
                            'css-loader'
                        ]
                    }
                ]
            }
            ....
        }
    });
};

Теперь мы можем импортировать стили командой import './path/to/file.css'; К слову, использование npm start аналогично использованию sencha app watch --fashion , все изменения в стилях и коде на лету подхватываются браузером с помощью Hot Module Replacement.

Ошибки сборки и сборка проекта

Когда у вас запущен npm start , вы всегда увидите критическую ошибку, например, забыли правильно закрыть тег <h1> . Не критические ошибки будут показаны в консоли браузера.

 

Сборка проекта осуществляется с помощью npm run build , так же можно указывать профили сборки.