Ответы пользователя по тегу React
  • Закрытие тега в JSX?

    magerrrr
    @magerrrr
    JS Software Engineer
    Это правило существует, но не у Prettier, а у ESlint.

    Дело в том, что у prettier есть 21 правило, которое можно указать в конфигурационном файле. Эти правила описаны тут. Их так немного, так как у prettier свой узкий круг задач, так сказать своя философия (о ней можно почитать тут).

    То, что интересует Вас у ESlint называется self-closing-comp)

    Документация по добавлению и настройке ESlint тут
    Ответ написан
  • Как в React брать значения из адресной строки и отправлять запрос?

    magerrrr
    @magerrrr
    JS Software Engineer
    Query-string создана для упрощения работы с адресной строкой всех браузеров.

    Использование:

    const queryString = require('query-string');
     
    queryString.parseUrl('https://foo.bar?foo=bar');
    //=> {url: 'https://foo.bar', query: {foo: 'bar'}}
     
    queryString.parseUrl('https://foo.bar?foo=bar#xyz', {parseFragmentIdentifier: true});
    //=> {url: 'https://foo.bar', query: {foo: 'bar'}, fragmentIdentifier: 'xyz'}
    Ответ написан
  • Насколько хорошей практикой считается использование и классового и функционального подходов в одном проекте?

    magerrrr
    @magerrrr
    JS Software Engineer
    С точки зрения React, эти два компонента эквивалентны. В официальной документации React ничего не сказано о планах отказываться от компонентов классов в ближайшем будущем. Поэтому можете не беспокоиться  —  переписывать весь код вам не придётся. Но отвечая на Ваш вопрос, изучив документацию React и Medium, а также поучавствовав в коммерческих проектах, хочу отметить, что хорошей практикой будет поддержка кодовой базы в едином стиле насколько это возможно. Пусть не сразу, пусть постепенно, но переход к функциональным компонентам будет верным. Функциональные компоненты позволяют писать код элегантнee.

    Советую почитать интересную свежую статью, где сравниваются функциональные и классовые компоненты и рассматриваются Хуки.

    Более новые версии React могут начать добавлять в функциональные компоненты возможности несовместимые с классовыми, оставляя последние в невыгодном положении, как это было с первыми до версии 16.8.

    "Мы намерены охватить все возможные варианты использования классов в хуках, но мы всё ещё будем поддерживать классовые компоненты в обозримом будущем. В Facebook десятки тысяч компонентов, написанных в виде классов, и у нас нет абсолютно никаких планов их переписывать. Вместо этого мы начинаем использовать хуки в новом коде параллельно с классами" — документация React
    Ответ написан
  • Как сделать рендер на реакте при первой загрузке?

    magerrrr
    @magerrrr
    JS Software Engineer
    Для этого в React есть хук useEffect (https://ru.reactjs.org/docs/hooks-effect.html)

    Чтобы получить JSON при первой загрузке страницы нужно импортировать хук useEffect. У этого хука (хук = функция) есть 2 обязательных параметра - первый это функция (callback) и второй массив зависимостей (если его оставить пустым, хук сработает всего один раз, как Вам и требуется в задании).

    Предлагаю пример кода ниже:
    С помощью fetch делаем get запрос за данными, сервер вернет данные и после мы из них получаем json с помощью соответствуюего метода и затем выводим в консоль

    import React, { useEffect } from 'react';
    
    const Page = () => {
      useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/todos/1')
          .then(response => response.json())
          .then(json => console.log(json))
      }, []);
    
    export default Page;
    Ответ написан