Автор этого туториала сосредоточился на анимации. Он использовал хуки библиотеки React, её Context API, а также TypeScript и LESS. В конце вы найдёте ссылки на игру, её код и демо анимаций. Подробности рассказываем под катом, пока у нас начинается курс по Frontend-разработке.
Эта статья - экстракт четырёхлетнего опыта разработки на реакте. В начале карьеры я столкнулся с багом библиотеки react-player, пофиксил его, а дальше предложил и реализовал там рефакторинг. Мейнтейнер даже упомянул моё имя отдельно в readme, за что огромное ему спасибо. Давайте рассмотрим идеи, приготовленные в результате охоты на цели frontend-комьюнити сегодня.
Привет, друзья!
Хочу поделиться с вами заметками о Next.js (надеюсь, кому-нибудь пригодится).
Next.js — это основанный на React фреймворк, предназначенный для разработки веб-приложений, обладающих функционалом, выходящим за рамки SPA, т.е. так называемых одностраничных приложений.
Как известно, основным недостатком SPA являются проблемы с индексацией страниц таких приложений поисковыми роботами, что негативно влияет на SEO.
Впрочем, по моим личным наблюдениям, в последнее время ситуация стала меняться к лучшему, по крайней мере, страницы моего небольшого SPA-PWA-приложения нормально индексируются.
Кроме того, существуют специальные инструменты, такие как react-snap, позволяющие превратить React-SPA в многостраничник путем предварительного рендеринга приложения в статическую разметку. Метаинформацию же можно встраивать в head с помощью таких утилит, как react-helmet. Однако Next.js существенно упрощает процесс разработки многостраничных и гибридных приложений (последнего невозможно добиться с помощью того же react-snap). Он также предоставляет множество других интересных возможностей.
Обратите внимание: данная статья предполагает, что вы обладаете некоторым опытом работы с React. Также обратите внимание, что заметки не сделают вас специалистом по Next.js, но позволят получить о нем исчерпывающее представление.
Заметки состоят из 2 частей. Это часть номер раз.
Если вы используете монорепозиторий, то взаимодействие между клиентом и сервером с общей моделью данных будет проблемой. Без обслуживания дублирование кода приведет к рассинхронизации.
Если модель данных изменяется на серверной части - убедитесь, что клиентский код подхватит эти изменения. Иначе клиентский код сильно пострадает при получении несовместимых данных, либо из-за игнорирования дополнений. А это не то, чего вы хотите.
Давайте рассмотрим стратегии синхронизации клиентского и серверного кода.
Тот самый момент.
«Tomorrow will transform your career». Именно с таким заголовком пришло письмо с приглашением на конференцию. Неплохой заголовок для привлечения внимания. Конечно же, Vercel уже давно не та компания, которой нужно привлекать к себе внимание, тем не менее у них весьма завидное внимание к деталям, не говоря уже о том, что они привносят в наш мир.
Полученные командой Vercel инвестиции в C раунде (в размере $102млн) на продолжение создание веба будущего, поддержка команды google «Аврора» и большое комьюнити позволило выпустить столь крупный релиз всего через 4 месяца после предыдущего, не менее интересного, релиза.
О том, почему этот релиз - тот самый момент и как команда Vercel смогла сделать веб еще быстрее читайте под катом.
Привет, друзья!
В этой статье я покажу вам, с чего начинается React.
Что это означает? Это означает, что мы разработаем мини-версию React, которая сможет выполнять следующий код:
import '../style.scss'
import MyReact from './my-react'
const buttonStyles = {
border: 'none',
outline: 'none',
padding: '0.3rem 0.5rem',
marginLeft: '0.5rem',
backgroundImage: 'linear-gradient(yellow, orange)',
borderRadius: '2px',
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
cursor: 'pointer'
}
/** @jsx MyReact.createElement */
function Counter() {
const [value, setValue] = MyReact.useState(1)
const [count, setCount] = MyReact.useState(1)
return (
<section>
<h1 className='title'>Hello from MyReact!</h1>
<div className='box'>
<input
style='width: 80px; padding: 0.15rem 0.5rem;'
type='number'
value={value}
onInput={(e) => {
setValue(Number(e.target.value))
}}
/>
<button
style={buttonStyles}
onClick={() => {
setCount((count) => count + value)
}}
>
Increment
</button>
</div>
<h2 className='subtitle'>
Count: <span className='count-value'>{count}</span>
</h2>
<ul className='list'>
{['React', 'from', 'scratch'].map((item) => (
<li>{item}</li>
))}
</ul>
</section>
)
}
MyReact.render(<Counter />, document.getElementById('app'))Как вы могли догадаться, наша версия будет называться MyReact.
Скриншот:
При разработке мы будем придерживаться архитектуры исходного кода React. Вместе с тем, следует отметить, что за последние 2 года исходный код React претерпел значительные изменения, поэтому некоторые вещи, которые мы будем рассматривать, помечены в нем как legacy. Несмотря на это, общие принципы и подходы остаются прежними.
Представьте: у вас есть таблица с данными, которые можно редактировать. Как мы это оформим?
Привет, друзья!
Недавно (где-то в конце августа) у MDN появился новый (крутой, по заявлению разработчиков) поиск.
Речь идет об этом виджете на главной странице:
Основной код виджета находится здесь, а все остальное, кроме данных для поиска, можно найти здесь.
Данные для поиска также найти не сложно — для этого достаточно добавить к https://developer.mozilla.org локаль, например, /ru и /search-index.json:
Код поиска написан на React и TypeScript. Что это означает? Это означает, что мы с вами можем провести его обратную разработку.
Если вам это интересно, прошу следовать за мной.
Пришла осень и созрела очередная версия фреймворка Chorda 3.0. Можно наконец устроиться поудобнее за чашечкой кофе и подвести некоторые итоги
Про сам фреймворк можно почитать здесь, посмотреть там и пощупать тут
В прошлый раз я рассказывал о дизайн-функции, чертежах и построении API компонентов, а в этот раз попробую заинтересовать вас некоторыми очевидными решениями и не очень очевидными следствиями, которые появились во время работы с Chorda.
Год назад моя компания впервые попросила меня провести собеседование для фронтендера. Тогда я и придумал эту задачу на свою злобу дня. Задачка простая, на базовые знания, но, как оказалось, в ней можно сделать много интересных ошибок. Также в ней оказались неочевидные детали, которые могли бы оказаться интересны и опытным разработчикам. Я решил достаточно подробно разобрать задачу в этом посте в педагогических целях. Данный пост нацелен в первую очередь на начинающих реакт разработчиков.
Привет, друзья!
В этой статье я хочу поделиться с вами опытом разработки хука для загрузки дополнительных данных (авось кому-нибудь пригодится).
На самом деле, хуков будет целых 2 штуки:
useLoadMore — для загрузки дополнительных данных при нажатии кнопки "Загрузить еще"useLoadPage — для постраничной загрузки данных (аля пагинация на основе курсора)Первый хук попроще, второй посложнее.
Полагаю, лишним будет говорить, что необходимость в использовании подобных хуков возникает в каждом втором проекте (по крайней мере, в моей сфере деятельности).
По мотивам вопросов из предыдущей статьи мы решили написать вторую часть и рассказать, что удалось сделать еще.
На повестке дня:
• Роутинг хостового приложения (React/Vue Routing внутри Angular)
• Полноценные адаптеры для работы удаленных плагинов
• Использование сервисных модулей в рантайме
Меня зовут Илья, я фронтенд-разработчик в команде BuyerX. Раньше я публиковал статью о том, как мы пришли к использованию монорепозитория в нашем юните и какие проблемы решило его использование. В этот раз хочу поделиться чуть менее радостным опытом и рассказать, как получилось так, что потребовалось почти полтора года, чтобы перевести две кнопки со страницы объявления на React.
Представим, что у нас есть приложение на React, в котором можно читать и писать отзывы. Пользователь открыл список отзывов, пролистал его, нажал кнопку «Написать отзыв». Форма написания отзыва открывается в попапе. Пользователь начинает вводить текст, свой email. Вдруг валидация почты срабатывает с ошибкой, которую разработчики забыли обработать. Результат — белый экран. React просто не смог ничего отрендерить из-за этой ошибки в каком-то попапе.
Первая же мысль — не надо было всё уничтожать, список же был не при делах. Чтобы обработать ошибку в render-фазе в React, необходимо использовать Error Boundaries. Почему именно так нужно обрабатывать ошибки — расскажу под катом.
От переводчика: Этот пост является продолжением поста о реализация паттернов React-компонентов в Ember.js. Автор рассматривает концепцию React-хуков для абстракции логики состояния (stateful logic) и сравнивает ее реализацию с реализацией в Ember. И хотя в экосистеме React эта концепция признана весьма полезной, в Ember.js попытки предложить похожую не нашли особенного отклика. Причина этому - наличие в фреймворке достаточных инструментов для решения этой задачи без использования хуков. О каких инструментах идет речь, вы узнаете из этого материала.
В этой статье мы расскажем, что такое UI KIT, для чего он нужен, и как он сэкономит время и деньги.
В статье мы подойдем к китам, которые сделаны не только дизайнерами, но также переведены в компоненты фронтенд-разработчиками.
Всем привет! Пару месяцев назад у нас возникла задача запилить лендос для нашего онлайн сервиса. Наш стек - Create React App + .Net Core. Погугля немного, мы решили, что хотим запилить лендос на Next JS, но возник вопрос - как это все вместе подружить.
Мы хотели, что бы приложение открывалось по ссылке: yourdomain.com/app, а все остальные ссылки вели бы на лендос.
До HolyJS осталось меньше месяца — пора поведать Хабру, какие именно доклады там будут. Под катом их описания, а тут отметим пару вещей:
— В этот раз шире обычного раскрыта тема производительности. Когда React.memo не ускорит, а замедлит? Почему Solid.JS такой быстрый? Что нужно знать JS-разработчику в современном многоядерном мире?
— Помимо докладов, в программе есть несколько воркшопов, так что будет не только теория со слайдами, но и практическая деятельность.
Описания мы разделили по тематическим блокам, но это деление не строгое, некоторые доклады можно причислить к разным блокам сразу.