Понимание работы процессов приходит с изучением механизмов, которые приводят в движение мелкие части большого пазла. Если представить, что Вам дали задачу объяснить, что такое React за полчаса, скорее всего, Вы бы выбрали один из двух вариантов:
пересказать все то, что изложено на первой странице официальной документации reactjs.org
Я работаю программистом 12 лет. Последние 2 года в мобильной разработке, а до этого php со всей своей экосистемой, фронт-энд - по мере необходимости.
И проблема конфликта между красотой кода и быстротой реализации новых фич давно меня занимала. Раньше были разговоры и даже холивары на эту тему. Однако сегодня поднимать этот вопрос уже моветон.
И вот конкретный пример.
Для мобильной разработки пользуюсь таким замечательным продуктом как Android Studio. И решил давеча отключить ненужные плагины в настройках. Снял галочки напротив плагинов которые для меня не нужны, IDE не предупредила ни о каких возможных проблемах.
В этой статье я опишу структурированный подход к использованию MobX, который может помочь упростить процесс разработки. Здесь не будет описываться код, только описание подхода к использованию. На код будут даваться ссылки. И я очень прошу вас посмотреть на примеры, которые я прикладываю. В них можно будет наглядно увидеть все плюсы описываемой архитектуры.
Также важно будет упомянуть, что для полного понимания описанного в статье, нужно быть знакомым с паттернами Observable/Observer, MVVM и DI.
Пандемия, осеннее обострение, зима близко и QR коды на каждом шагу, роботы наступают, рутина работы затягивает. Хочешь покушать покажи картинку. Скучную и квадратную, для робота, не для человека. Только единицы могут ее читать, и только избранные рисовать. Вон на прошлой неделе как хабр qr кодом бомбануло!
Идея
Представьте: у вас есть таблица с данными, которые можно редактировать. Как мы это оформим?
В начале создадим наш проект через бойлерплейт утилиту npx create-react-app
В компоненте app.js получим список космических кораблей и положим их в хранилище redux (позднее будет понятно, почему именно туда):
// app.jsx
const App = () => {
const dispatch = useDispatch();
useEffect(() => {
const getNews = async () => {
const {data} = await axios({
method: `get`,
url: `http://swapi.dev/api/vehicles`
})
dispatch(setStarships(data.results))
}
getNews();
}, [])
return (
<div className="App">
<Table />
</div>
);
}Построим простую таблицу:
// table.jsx
const Table = () =>Читать полностью »
И снова привет — год назад я написал на Хабр о своём клиенте для этой площадки, который я разрабатывал в качестве проекта для оттачивания навыков программирования. Теперь мой Хабр посетило больше 30 тысяч человек, а я за прошедший год полностью обновил дизайн, прикрутил авторизацию, увеличил скорость приложения и оптимизировал клиент для разных viewport'ов.
Попробовать новый клиент можно по этой ссылке — habra.vercel.app, а если интересно, как я такую вещь сделал и что планируется сделать в будущем, то прошу под кат.
В начале июня я посетил конференцию разработчиков .debug, на которой у моей компании был свой стенд. Смысл стенда заключался в том, чтобы создать ситуацию «Измени моё мнение»: мы представляли какую-нибудь радикальную идею, предлагали людям обсудить её с нами, а потом показывали им, что интересного мы делаем.
Мы решили взять такую идею:
Моим первым оппонентом стал этот молодой парень справа, создающий приложения на нативном React.
Если серьёзно, то React — это хорошая библиотека. Она важна для веб-разработки, потому что в ней используются декларативные и реактивные шаблоны, а такой сдвиг парадигмы в момент её создания был нужен всем. В те времена (6-7 лет назад) возникали проблемы с движками рендеринга и реактивностью, но React довольно неплохо их решил.
Читать полностью »
Тема, конечно, не нова, и немало на этот счет уже сказано и написано. Но все же поделюсь и своим взглядом на этот счет, т.к. мое осознание данного факта формировалось скорее независимо и на основании собственного опыта, ценностей и взглядов, и возможно (надеюсь) в нем читатель найдет для себя что-то свежее или полезное.
Хочу рассказать о пяти простых React-хуках, которые пригодятся в любом проекте. Причём, полезность этих хуков не зависит от того, в каком именно приложении их будут использовать. Описывая каждый из них, я рассказываю о его реализации и привожу пример его использования в клиентском коде.
Уже долгое время я хотел обновить свой веб-сайт, но я не дизайнер, поэтому знал, что мои попытки усовершенствования уже имеющегося выльются в сумбурную мешанину.
Я искал новую должность React-разработчика и сильно хотел отточить свои навыки, поэтому подумал, что лучше всего будет создать новый сайт на React.
Что касается дизайна… то почему бы не отдать дань уважения одной из самых значимых операционных систем моей юности: Windows 9x. И почему бы ради забавы не сделать его таким, чтобы он умещался на дискете?
Читать полностью »
