Задать вопрос
olibro

Егор Иванов

Фронтенд разработчик
Ответы пользователя по тегу React

  • Почему ошибка с компиляцией scss?

    olibro
    @olibro
    Фронтенд разработчик
    В вашей конфигурации не хватает правила, которое бы могло применяться только к файлам по шаблону .module.scss. Можно сделать вот так, путем добавления нового объекта:

    const cssModulesLoader = {
    test: /\.module\.s[ac]ss$/i,
    use: [
      options.isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
          modules: {
            localIdentName: options.isDev ? '[path][name]__[local]' : '[hash:base64]',
          },
        },
      },
      'sass-loader',
    ],
  };

  
  return [cssModulesLoader];
}


    cssModulesLoader будет применяться только к файлам, соответствующим шаблону .module.scss. В нем включена опция modules, которая активирует CSS модули. После этого, можно импортировать стили как модули в ваш компонент.

    Подробнее об этом можно почитать здесь:
    https://www.fatalerrors.org/a/webpack-css-to-sass-...
    Ответ написан
    Комментировать
    Комментировать

  • Почему падает локальный сервер?

    olibro
    @olibro
    Фронтенд разработчик
    Браузер не может открыть страницу и пишет такие ошибки стандартно, если открыть страницу "localhost" в браузере.
    Поэтому локальный адрес вашего проекта должен содержать порт — то есть путь, по которому браузер может обратиться к вашему локальному серверу. Например, localhost:3000. Посмотрите информацию в консоли IDE, обычно там указывается адрес, ошибки. и попробуйте снова
    Ответ написан
    Комментировать
    Комментировать

  • Не работает библиотека classnames?

    olibro
    @olibro
    Фронтенд разработчик
    Сделайте проще, библиотека умеет работать с классами динамическим способом. То, что у вас, в документации предлагается как альтернатива.

    1. Импортируйте

    import classNames from 'classnames'

// и внутри компонента напишите объявление переменной:

const iconStylesClass = classNames(styles.selector)


    2. Выделите классы, которые будут зависеть от каких-то условий: по пулевому типу они или будут показываться, или нет. Стандартный класс можно прописать в начале.

    const iconStylesClass = cn(styles.selector, {
    [styles.selector2]: hasItems, 
    [styles.selector3]: foo && bar,
}


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

    const someStyles = cn(props.someStyle, {
    [styles.selector4]: true,
}


    Такой подход более декларативный и избавляет от написания турнирных операторов внутри строк.

    3. После того как определитесь со стилями, вашу переменную уже можно положить в верстку:

    <div className={iconStylesClass}/>

    Подробнее хорошо написано в доке здесь
    Ответ написан
    1 комментарий
    1 комментарий

  • Как правильно делать асинхронные запросы при отрисовке компонента?

    olibro
    @olibro
    Фронтенд разработчик
    Каждый хук (то есть функция) требует вторым аргументом зависимости, поскольку ей важно понимать, какое значение будет содержаться в момент её исполнения. Если зависимость обновилась, то исполнится и функция.
    Как правило, такие ошибки подсвечивает и ESLint, например.

    Но может возникнуть ситуация, когда переменная, указанная в зависимостях, вызовет бесконечный луп, поскольку что-то её меняет извне. В вашем случае, переменная getCity обновляет поле coords в глобальном стейте, это и вызывает ре-рендер. Имеет смысл подумать над порядком вызова данных запросов, например, вызывать только одну функцию (которая будет выполнять два запроса асинхронно), т.е. скрыть эту логику под капотом самого запроса. Например, сначала получаем город (хоть он у нас и дефолтный, Ижевск), затем, если запрос получения города обновил нам координаты и они вообще существуют, выполняем запрос для погоды.

    Чтобы доработать текущую реализацию, можно выполнить вопрос в отдельных хуках, чтобы не зависеть, и разделить логику: город без координат существовать не может и т.п. В то же время, это не вызовет бесконечные циклы.

    useEffect(() => {
        dispatch(getCity(city)) 
    }, [city, dispatch])

    useEffect(() => {
        // если координаты появились/обновились, получаем погоду
        if (coords) {
            dispatch(getWeather(coords))
        }
    },  [dispatch, coords])


    Пробуйте, в сети много материала на эту тему.
    https://medium.com/@andrewmyint/infinite-loop-insi...
    Ответ написан
    1 комментарий
    1 комментарий