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

React позволяет нам настроить всю среду, используя только одну команду, но прежде чем мы доберемся до нее, нам нужно несколько вещей.

  • Прежде всего, нам нужен редактор кода, я использую Visual Studio Code, доступный бесплатно по адресу https://code.visualstudio.com/, но вы можете использовать все, что захотите.
  • Node.js — чтобы использовать менеджер пакетов, такой как npm или yarn, для установки node.js просто перейдите на https://nodejs.org/en/download/, загрузите установщик и запустите его.
  • Как пользователь Visual Studio Code, я могу использовать встроенный терминал, но если вы используете редактор кода без терминала, просто используйте системный cmd по умолчанию.
  1. В cmd перейдите в папку, в которой вы хотите создать новый проект, и введите: create-react-app <app name>.

* Если вы получаете сообщение об ошибке, используйте npm cache clean-force и добавьте путь к папке вашего узла в переменных среды:

1.1. На рабочем столе щелкните правой кнопкой мыши значок Компьютер.

1.2.Выберите «Свойства» в контекстном меню.

1.3. Щелкните ссылку Дополнительные параметры системы.

1.4.Нажмите Переменные среды. …

1.5. В PATH нажмите новый.

  1. 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.

Теперь вы можете приступить к созданию своего приложения с полностью настроенной средой разработки.