Привет! Меня зовут Нияз, frontend тимлид из Казахстана. Это мой первый пост — делюсь скриптами, которые сэкономили неделю работы.
HR-платформа, 8000+ TypeScript файлов, весь текст захардкожен на русском. Бизнес хочет английский и казахский.
<Button>Сохранить</Button>
<span>Привет, {userName}!</span>
const error = "Произошла ошибка";Руками — это неделя копипасты и сотни пропущенных строк. Решил написать скрипты.
Результат
|
Метрика |
Значение |
|
Ключей перевода |
9,823 |
Привет!
Хочу рассказать вам про свою библиотеку solidjs-hook-form,которую я сделал для упрощения работы с множеством форм в SolidJS.
Изначально я столкнулся с такой проблемой: валидация, управление состоянием, много инпутов, boilerplate... Капец, можно запутаться. Особенно когда форма не из двух полей, а с кучей логики. Вот и пришлось мне написать свою либу.
Понимание работы процессов приходит с изучением механизмов, которые приводят в движение мелкие части большого пазла. Если представить, что Вам дали задачу объяснить, что такое React за полчаса, скорее всего, Вы бы выбрали один из двух вариантов:
пересказать все то, что изложено на первой странице официальной документации reactjs.org
Вдохновленный прочитанными статьями на медиуме, я решил написать свою статью и рассказать вам как можно избегать самых распространенных ошибок в вашем React приложении и для чего это нужно делать.
Весь код написан в ES6 стиле, поэтому, что бы повторить его вам нужно использовать Babel в вашем проекте (а еще есть такие кто его не использует?).
Я постарался объяснить как можно подробнее каждую ошибку, поэтому, моя статья больше ориентирована на молодых разработчиков, которые еще находятся в поиске новых знаний. Хотя, как мне кажется, и опытный разработчик может найти для себя пару интересных вещей в этой статье.
Если вам интересно, то добро пожаловать под кат.
Продолжение серии переводов раздела "Продвинутые руководства" (Advanced Guides) официальной документации библиотеки React.js.
Внутренне, React использует несколько продвинутых техник, сводящих к минимуму количество дорогостоящих операций DOM, необходимых для обновления пользовательского интерфейса. Для большинства приложений, использующих React, быстродействие получаемого интерфейса достаточно без дополнительных действий для оптимизации производительности. Тем не менее, есть несколько способов, с помощью которых вы можете ускорить ваше приложение React.
Продолжение серии переводов раздела "Продвинутые руководства" (Advanced Guides) официальной документации библиотеки React.js.
В большинстве случаев, мы рекомендуем использовать контролируемые компоненты для реализации форм. В контролируемом компоненте, данные формы обрабатываются компонентом React. Есть альтернативный вариант — это неконтролируемые компоненты, в которых данные формы обрабатываются самим DOM.
Продолжение серии переводов раздела "Продвинутые руководства" (Advanced Guides) официальной документации библиотеки React.js.
В типовом потоке данных React, свойства (props) — это единственный способ, с помощью которого родители взаимодействуют со своими потомками. Для модификации потомка, вам необходимо заново отобразить (произвести ререндеринг) его с новыми свойствами. Однако, в некоторых случаях, вам понадобится модифицировать потомка непосредственно, вне основного потока. Изменение потомка возможно в случаях если он является экземпляром компонента React или элементом DOM. Для обоих этих случаев React имеет особый способ изменения.
Продолжение серии переводов раздела "Продвинутые руководства" (Advanced Guides) официальной документации библиотеки React.js.
По мере того, как ваше приложение будет расти — вы можете наткнуться на большое количество ошибок, связанных с проверкой типов. Для некоторых приложений, вы можете использовать расширения JavaScript такие как Flow или TypeScript осуществляя проверку типов всего вашего приложения. Но если вы не используете таковые — React предоставляет некоторые встроенные возможности проверки типов.
Этой публикацией я открываю серию переводов раздела "Продвинутые руководства" (Advanced Guides) официальной документации библиотеки React.js.
Фундаментально, JSX является синтаксическим сахаром для функции React.createElement(component, props, ...children).