Если вы хотите начать создавать новое одностраничное приложение в React, но устали настраивать всю среду, включая весь веб-пакет или другую конфигурацию сборщика модулей, вот кое-что для вас.
React позволяет нам настроить всю среду, используя только одну команду, но прежде чем мы доберемся до нее, нам нужно несколько вещей.
- Прежде всего, нам нужен редактор кода, я использую Visual Studio Code, доступный бесплатно по адресу https://code.visualstudio.com/, но вы можете использовать все, что захотите.
- Node.js — чтобы использовать менеджер пакетов, такой как npm или yarn, для установки node.js просто перейдите на https://nodejs.org/en/download/, загрузите установщик и запустите его.
- Как пользователь Visual Studio Code, я могу использовать встроенный терминал, но если вы используете редактор кода без терминала, просто используйте системный cmd по умолчанию.
- В cmd перейдите в папку, в которой вы хотите создать новый проект, и введите:
create-react-app <app name>
.
* Если вы получаете сообщение об ошибке, используйте npm cache clean-force и добавьте путь к папке вашего узла в переменных среды:
1.1. На рабочем столе щелкните правой кнопкой мыши значок Компьютер.
1.2.Выберите «Свойства» в контекстном меню.
1.3. Щелкните ссылку Дополнительные параметры системы.
1.4.Нажмите Переменные среды. …
1.5. В PATH нажмите новый.
- 6. Добавьте путь к папке узла.
После завершения установки в cmd войдите в папку проекта и запустите команду npm start, если на localhost:3000 все в порядке, вы должны увидеть начальную страницу реакции по умолчанию.
На данный момент, если вам не нужен компилятор sass, вы можете создать свое приложение в React, но если вы хотите знать, как добавить компилятор sass, вам следует остаться.
2. Настройте React с помощью SASS/SCSS
В cmd введите «npm install sass-loader node-sass — save-dev», чтобы установить sass в свой проект.
Затем нам нужно получить доступ к файлам конфигурации нашего веб-пакета, просто выполнив эту команду «npm run eject», помните, что это односторонняя операция.
После завершения извлечения мы должны увидеть нашу папку конфигурации.
Найдите файл config/webpack.config.dev.js, скопируйте весь блок правил css, он будет похож на этот, но без sass-loader, который мы должны добавить в наш блок правил scsss, этот веб-пакет будет правильно обрабатывать скомпилированный css после его компиляции. по сксс.
{ test: /\.scss$/, use: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1, }, }, { loader: require.resolve('sass-loader'), }, { loader: require.resolve('postcss-loader'), options: { ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', ], flexbox: 'no-2009', }), ], }, }, ], },
добавьте его перед существующим блоком правил css и измените тестовое значение на test: /\.scss$/,
.
Проделайте ту же процедуру в файле config/webpack.config.prod.js.
Теперь вы можете приступить к созданию своего приложения с полностью настроенной средой разработки.