Я уже некоторое время работаю над вышеуказанными технологиями. Я обнаружил, что иногда становится утомительно настраивать их все и начинать собственно кодирование для создания приложения. Итак, здесь я покажу процесс с минимумом головной боли.
React прошел долгий путь, когда мне пришлось начать с npm init, затем настроить webpack с его соответствующими peerDependencies и, наконец, найти подходящую версию babel для поддержки все они с реактивной версией.
Теперь с помощью приложения create-react-app усилия сократились, а интерфейс командной строки улучшился, чтобы иметь все обновленные зависимости и правильно загружаться, чтобы запустить ваш базовый шаблон для запуска в браузере.
На момент написания я использовал следующую версию, в будущем все изменится, и, надеюсь, совместимая версия также будет работать:
Установить приложение create-response-app глобально
Приложение Create React лучше размещать в глобальном масштабе, мы могли бы создать несколько проектов React.
Создание нашего первого проекта React
Здесь все довольно просто, чтобы иметь проект реакции по умолчанию, нам нужно написать следующую команду:
Это создаст проект на JavaScript, в котором поддерживается сценарий ES6. Но мы хотим иметь typeScript в качестве языка сценариев для разработки нашего приложения, для чего мы добавляем дополнительную опцию при создании шаблона.
Итак, мы создаем наш первый проект React Project с TypeScript с помощью указанной выше команды. Он загрузит все ваши модули npm, все, что нам нужно сделать, это сесть и расслабиться ...
Прежде чем мы начнем запускать наш проект, давайте убедимся, что наш проект построен только на TypeScript.
Итак, мы переходим в папку проекта и открываем ее в редакторе. Я предпочитаю использовать VS Code для разработки TypeScript, но подойдет любой редактор.
Обратите внимание на файл, который находится в папке / src на следующем изображении:
В нашей папке ./src у нас есть несколько базовых файлов: .css, .ts и .tsx. И можно сказать, что проект настроен на TypeScript.
Давайте запустим проект, чтобы проверить, правильно ли настроен шаблон.
И у нас есть готовый проект React TypeScript, но в папке ./src есть файл .css, и нам нужны таблицы стилей Sass в проекте… ed
Интеграция Sass в наш проект
Есть разные способы интеграции и использования в проекте React. Но я предпочитаю хранить таблицу стилей отдельно от пакета.
Начнем с зависимостей, нам нужен компилятор / интерпретатор таблицы стилей для преобразования нашего файла SASS в читаемый браузером CSS для этого нам понадобится node-sass.
Здесь мы внесем некоторые изменения в свойство «script» файла package.json, чтобы преобразовать файл SASS в CSS перед тем, как babel начнет транскомпилировать файлы typeScript в один файл пакета. Обратите внимание на изменения скриптов ниже:
сборка: css
Здесь node-sass берет файлы SASS из папки ./src/styles/sass и преобразует их в один CSS в выходной файл ./src/styles/css. По умолчанию имя файла CSS будет index.css.
смотреть: css
Здесь запускается node-sass для транспиляции существующего кода SASS точно так же, как build: css, но как только это будет сделано, он будет наблюдать SASS для любых изменений по сравнению с предыдущим состоянием, и если происходят какие-либо изменения, транспилятор автоматически преобразует новые изменения в файл CSS.
начало: js
Здесь сценарий, имеющий response-scripts-ts, создаст сервер разработки на локальном компьютере и запустит на нем приложение реакции после того, как файлы TypeScript будут перенесены в один файл JavaScript. следуя правилам, указанным в tsconfig.json. И приложение будет размещено локально, это можно увидеть в браузере.
Начало
Официальная команда npm run-script не может запускать несколько сценариев, поэтому, если мы хотим запустить несколько сценариев, это немного избыточно. npm-run-all может обрабатывать несколько узловых команд, что упрощает процесс. Здесь мы хотим, чтобы файл CSS был создан до того, как начнется сборка JavaScript.
И остальная команда остается без изменений.
История на этом не заканчивается ...
Нам нужно изменить расположение файла внутри папки ./src, чтобы node-sass мог читать файл SASS.
index.scss
Это корневой файл для всех импортируемых файлов SASS, откуда node-sass подбирает стили и преобразует их в файл CSS.
index.tsx
Здесь это корневой файл для всего приложения для импорта стилей, которые предоставляет CSS-файл classPath, чтобы после транспиляции пакетный JavaScript подхватил CSS-файл во время работы на сервере.
Использование Material UI в нашем приложении React
Для добавления Material UI в наше приложение React потребуются следующие зависимости, чтобы проект мог их использовать.
Ядро содержит все стили и дизайн, чтобы они выглядели как материал.
Значки будут иметь набор значков, доступных из материала, который можно использовать в нашем React Проект, и это необязательно.
Кроме того, в Material используется стиль Roboto Font-Family, который по умолчанию недоступен ни в одном браузере.
Для этого мы можем использовать следующий CDN, чтобы сделать его доступным, пока мы запускаем наш приложение в браузере.
Теперь я знаю, что есть люди, которые скептически относятся к CDN, думая, есть ли в браузере пользователя какой-то брандмауэр или приложение запускается в интрасети, не подключенной к CDN. Для таких, как я, можно использовать шрифт.
1. Загрузите файлы шрифтов Roboto из Google Fonts.
2. Добавьте его в желаемое место в вашем проекте.
Мне нравится хранить файлы шрифтов в папке шрифтов в папке стилей
3. Создайте файл _font.scss в папке scss и добавьте следующий шрифт.
4. Внесите следующие изменения в свои файлы scss, чтобы использовать семейство шрифтов Roboto, и убедитесь, что вы удалили Roboto CDN, если пытались его использовать.
Вы можете получить весь проект здесь:
Https://github.com/abhrabhattacharyya/medium-react-material-ts-app
Приведенный выше пример предназначен для понимания того, как подготовить базовые панели котлов для начала работы над проектом разработки приложения React.
Если вы сочтете это полезным, пожалуйста, похлопайте в ладоши, искренняя обратная связь очень важна ...
