Ответы пользователя Александр Талалаев по тегу «React»

Возможно ли получить тип пропсов у child?

Александр Талалаев @neuotq

Прокрастинация

Немного не ясно что вы хотите, вот это получать?

type ReturnElementProps<T> = T extends React.ReactElement<infer P> ? P : never;

type FormItemProps<
  C extends React.ReactElement,
  P extends ReturnElementProps<C>
> = {
  getValueFromEvent: (...args: Parameters<P["onChange"]>) => void;
  children: C;
};

const FormItem = <
  C extends React.ReactElement,
  P extends ReturnElementProps<C>
>(
  props: FormItemProps<C, P>
) => {
  // из пропсов вашего компонента берём дочерний элемент
  const { children } = props;
  // из пропсов дочернего берем onChange
  const { onChange } = children.props;
  //тест
  console.log("Child onChange cb", onChange.toString());
  return children;
};

export default function App() {
  return (
    <div className="App">      
      <FormItem getValueFromEvent={(event) => event}>
        <input onChange={(e) => console.log("Children e", e.target.value)} />
      </FormItem>
    </div>
  );
}

Ответ написан 04 мая

4 комментария

Как передать значение свойства в ::before класса динамически?

Александр Талалаев @neuotq

Прокрастинация

В целом если такое происходит повод избавиться от псевдоэлемента, в подобных случаях почти всегда это можно сделать заменив его на настоящий с теми же свойствами.
В свойстве style нельзя обращаться к псевдоэлементам, поэтому для интерактивности в схожем стиле можно использовать styled components:
Где-то в ваших стилях:

.testClass {
  font-size: 1.5em;
  text-align: center;
  color: #bf4f74;
}

.testClass::before {
  content: 'QQ';
  position: absolute;
  top: 10px;
}

В компоненте:

// ... 
const [textColour, setTextColour] = useState('blue');
const TestElement = styled.h1`  
  &:before {
    color: ${textColour}
  }
`;

 return (
    <>  
  <button
          onClick={() =>
            setTextColour((color) => (color === 'black' ? 'red' : 'black'))
          }
        >
          Change color of :before
        </button>   
      <Title TestElement="testClass"> HELLO </Title>
    </>
  );

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

Ответ написан 31 мая 2023

4 комментария

Внесение данных в input react из внешнего подключаемого скрипта?

Александр Талалаев @neuotq

Прокрастинация

В целом нужен код. Но если человеческим языком:
Нов реакте принято не трогать значения напрямую через обращение к DOM элементам. У вас есть определенное состояние, привязанные переменные, разные мутаторы, слушатели событий и тп.
Поэтому когда вы в ручную ставите значение через input.value вы, скорее всего, нарушаете логику работы вашего приложения. И при фокусе внутренняя логика реакта срабатывает, сверяет текущее состояние приложение(сверяет данные) и приводит в соответствие с ним интерфейс(ваши инпуты).
А так как вы данные не меняли, у вас как бы обнуляется поле.
В целом переставайте думать html элементами. Думайте данными, меняйте данные, подключайте данные. Остальное просто интерфейс, который вы собираете как кирпичики подключая к ним провода с данными. Реакт уже сам берёт на себя обновление непосредственно того что будет уже в браузере отображаться. Ваша задача писать логику как это будет меняться, не трогая(почти всегда) сами эти элементы напрямую.
Поэтому откройте документацию по реакту, посмотрите ролики. Хотя бы базовые основы, там всё просто.

Ответ написан более года назад

1 комментарий

Как правильно обновлять данные react после обращения к api?

Александр Талалаев @neuotq

Прокрастинация

Изменения в UI до прихода данных с сервера - тн оптимистический подход (Optimistic UI updates).
Советую следовать простому правилу: делать оптимистичные обновления в интерфейсе всегда, кроме случаев когда это критично для пользовательских сценариев(очень редко когда и где нужно). В таком случае ваше приложение будет ощущаться намного более отзывчивым, приятным и быстрым. Ошибки и откаты можно сделать потом, после прихода с сервера ответа с ошибкой.
Советую погуглить "Optimistic UI updates", статей на этот счёт в разном контексте огромное число.

Ответ написан более года назад

1 комментарий

Не работают inline routes react/инлайн роуты реакт, как исправить?

Александр Талалаев @neuotq

Прокрастинация

Проверьте верно ли вы сделали настройки вашего веб сервера. Потому как в момент использование приложения, там url строка в браузере динамически подменяется и лишних запросов к вебсерверу (помимо запроса данных ) особо нет. А вот при обновлении, либо прямом заходе по url идёт прямое обращение к нему. И если у вас не верно настроен Apache или nginx (или что там у вас), то не найдя страницу/правила/логику для example.com/login (а у вас там что-то вроде index.html и дальше только папки с асетами и тп) он и вернёт соответствующий результат что ничего не наёдено.

Ответ написан более года назад

3 комментария

Почему отрабатывает роут ошибки при сборке проекта, react-router-dom v6?

Александр Талалаев @neuotq

Прокрастинация

Запускать нужно в веб сервере с соответствующими настройками.
Когда вы разрабатывали приложение и запускали локальный сервер, который брал всё на себя.
А так, допустим вы используете Apache там свои настройки, Nginx свои. Во множестве облачных сервисах нередко всё оптимизировано и почти ничего делать не нужно. Для условного Github Pages нужны свои небольшие манипуляции.
Поэтому.
1. Определитесь с веб сервером/площадкой где вы будете размещать проект
2. Гуглите "Сервер/площадка react router settings" "Сервер/площадка react router deploymnet" и тп.
Для локального у вас на компьютере нужно скачать какой-нибудь веб сервер(условный wamp или альтернативы), создать сайт там и тестировать.

Ответ написан более года назад

Комментировать

Как использовать AOS, если скролл реализован в div элементе на странице?

Александр Талалаев @neuotq

Прокрастинация

Сложно сказать, так нет вашего кода (с допустим моком вызова апи и подгрузки.) но в AOS есть метод AOS.refreshHard который автоматом вызывается в таких случаях. Если у вас по каким-то причинам автоматика не срабатывает, делайте это сами программно.

Ответ написан более года назад

Комментировать

Что изучать первым после JS, TypeScript или React?

Александр Талалаев @neuotq

Прокрастинация

Начни с базовых штук, но усилить можешь любимым языком программирования.
В вашем случае это JS. TypeScript - это тот же JS но обернут некоторыми фичами, а React использует JS(и/или TypeScript) вы будете на нём писать, соответственно не зная языка, делать что-то больше простых реактивных кнопочек будет сложно.
Советую глянуть сюда
https://ru.hexlet.io/webinars (там проскролить чуть ниже к "Бесплатные курсы"), там годные указания и начало базового пути.
Ну и конечно же сюда: https://roadmap.sh/frontend
Крайне не советую тупо учить React, вы быстро упретесь в стеклянный потолок условного "скриптокидди", и ничего толкового в любой продуктовой или крупной компании сделать не сможете, да и не возьмут (впрочем такие встречаются чаще чем хотелось бы, так что как-то пролазят хех).
Не бойтесь объёма, идит шажками.

Ответ написан более года назад

2 комментария

Нормальная ли сложность задачи для джуниора на работе?

Александр Талалаев @neuotq

Прокрастинация

Ключевое отличие джуна от мидла прежде всего в опыте коммерческой разработке. Вполне себе встречаются ситуации что джун может иметь теоретические знание в некоторых моментах и тп выше мидла или даже, о боги, синьйора.
Я, конечно, во многом упрощаю, но почему-то многие воспринимают как джун == ничего незнает только учится, только из-за того, что многие скриптокидди прорываются в компании и фигачать на своем реакте(непонимая вообще как всё и зачем работает).
На самом деле не так. И конечно не значит что джун должен знать всё и тп. Но как минимум общее понимание что и зачем ожидается, как и начальное знание предмета.
А вот из понятных слабостей джуна - отстутвия понятия о коммерческой разработке, её особенностях, понятии о продукте почему делаем это, а не вот ту крутую модную фичу и тп и тд. Те тут значительная часть слабостей лежит даже в сфере тн "софт скилов", а не только прямых хард слкиллов в конкретной технологии(но и они безусловно тоже!).
Ну а с сеньёорами это ещё более важно, там уже соф скиллы ещё важнее.
Поэтому приходит джун, типа знает технологии, но слабо знает что и когда и зачем, поэтому им задачи нужно давать более конкретно, поэтому и ожидается что примерно за полгода-год он станет мидлом и значительную часть решений начнёт принимать самостоятельно, на основе поставленных задач стейкхолдерам/продактом и тимлидом. Грубо говоря, освоится в песочнице)

Ответ написан более трёх лет назад

Комментировать

Нормально ли иметь много React компонентов в небольшом проекте?

Александр Талалаев @neuotq

Прокрастинация

Сразу отмечу что Юрий Бура отличный профессионал своего дела, курс его не изучал, но беглый взгляд показал что поход у него хороший, системный и он старается все же доносить суть. Главная целье его курса научиться пользоваться реактом, понять суть современного подхода к фроентенду в целом.
Далее уже по существу. Нужно погрузится в саму историю и причны появления Реакта. Инженеры в facebook в одно время сильно замучались строить интерфейсы, генерировать всё эту ерунду было сложно, еще проблемы уязвимостей (куча форм, для комментарией, постов, картинко и тп), недобный и громозкий PHP код заставил их задуматься об упрощении. Хотелось писать интерфейс как обычну функцию с параметрами, поэтому они придумали xhp, которые позволил буквально писать формы сразу в php (hack), легко, наглядно. Быстро видно что происходит, меньше ошибок, и легко использовать код формы (вместе с всей ее логикой построения, это и генерация формы на основе данных, и тп) заного много раз. Этот же подход был очень удобен и для других частей интерфейса, меня, списка постов и тп.
И это, с развитием новых концепций, браузеров, технологий и требований к быстроте интерфейса вдохновила их перенести этот концепт на JS, так родился React. Его революционность была в том, что на выходе резко упростились любые манипуляция с интерфейсом на фронтенде, сильно упал порог входа, получили легко читаемый и понятный код для решения практических задач (понятно, что при желании можно и тут засрать, но до этого в принципе большенство интерфейсов на js писалось через большие муки, с кучей неудобного кода, компромисами и тд и тп, а теперь все это взял на себя реакт).
Что мы имеем:
есть какая-либо часть интерфейса, логически независимая от других, с определенной структурой внутри - делаем компонент. Компонент это не только то, что мы обязательно будем использовать повторно (например), но понятная логически обособленная часть интерфейса, у которой может быть своя логика внутри, и своя функция на сайте снаружи.
Ничего страшного если сразу всё не продумал или на определенном этапе что-то идёт не идеально и тп.
Конечно хорошо иметь план на проект и проектировать многие вещи сразу, но рефакторинг, пивоты, изменения - вот реальность жизни.
Так что не волнуйся, первое что сделай измени восприятие самого интерфейса и приложения в целом. Теперь ты делаешь не сайт на html, а приложение с интерфейсом. Вот когда в таком ключе смотреть, то намного легче.

Ответ написан более трёх лет назад

Комментировать

Как грамотно реализовать мультиязычность React и Laravel?

Александр Талалаев @neuotq

Прокрастинация

Главный спорный вопрос который вам стоит решить: где хранить статичный первод (надписи, что не меняются или меняются редко, например название кнопки - Отправить/Submit, те все то, что мы обычно не храним в БД и редко меняем).
Варианта два:
1. Использовать только реакт для этого, тогда берете пакет react-localization, там достаточно простые и понятные принципы, сложностей нет.
Преимущества: фронт полностью отдельно живёт и не зависит от бэкенда, нет дополнительных прослоек, нет привязки к определенному бэекенду и тп

2. Использовать возможности локализации Laravel. Но тут все таки все методы той или иной степени костыльности, либо как минимум добавляющий жесткую привязку фронтенд приложения к текущему стеку бэкенда
Преимущества: можно использовать разные пакеты для интеграции средств редактивования статической локализации в бэкенде.

Лично я всё же склоняюсь к первому варианту, так как люблю писать максимально (желательно полностью) назависимые фронтенд приложения.

Теперь вторая часть вопроса. Уже касаемо динамических переводов (это контент, комментарии, и тп, условно говоря всё что мы храним в бд, или храними информацию о них в бд).
Здесь я советую положится на Laravel, берёте пакет от spatie laravel-translatable, он позволяет быстро строить удобные интерфейсы редактирования/чтения переводов в БД, пишете простое API и ри инициализации react приложения получаете данные нужные вам локализации, либо даже отправляете все сразу (они хранятся в json поле mysql/ваше БД, даже доп преобразований особо не потребуется).
Но вариант с отправкой только нужной мне нравится больше, смена локали событие редкое, а вот экономия на размере переданных данных будет существенная.

Ну, а далее уже вешаешь всякие кеширования тп, чтобы всё летало и готово.

Ответ написан более трёх лет назад

3 комментария

Готов ли react native для продакшена?

Александр Талалаев @neuotq

Прокрастинация

В целом готов.
Вопрос про преимущества странный, универсальный инструмент, те есть возможность держать почти один код для всех платформ, отсюда же вытекают и недостатки не персонального подхода к каждой платформе.
В целом все классно, но только ели ты сам крутишься и живешь в современном JavaScript мире, если нет, то прям сверх смысла нет.
Этот инструмент создан в том числе и для доступа к огромного сообщества js разработчиков к мобильным платформам, поэтому если ты Swift разработчик, то все ок, сиди на Swift, остальное уже для общего образования, или уже из реальной жесткой необходимости.
Короче говоря если ты вообще с нуля, то изначально тебе нужно влиться в современный JavaScript(Babel, ES6+ и тд), а уже затем реакт и компашка.
Если же ты уже в этом варишься, можешь с уверенностью начинать использовать.

Ответ написан более трёх лет назад

1 комментарий

Войдите на сайт