[Из песочницы] Частые трудности работы с React.js

Привет, Хабр! Представляю вашему вниманию перевод статьи Samer Buna «React.js Frequently Faced Problems».
Не паникуйте. Вы правы: существуют мириады веб-технологий, архитектур и фреймворков, и множество разрабатывается прямо сейчас. Помните: каждый, кто стал профессиональным веб-разработчиком начинал как и вы. Они изучали языки, библиотеки по одному, раз за разом, пока не прокачали свои навыки и механизмы работы

Веб-разработка сейчас как первый поход в супермаркет. На прилавках сотни товаров, которыми хочется овладеть. Растерявшись, очень легко испугаться огромному выбору. Ошибкой будет пытаться изучить все сразу, будто бы вам нужно везде быть компетентным.

На самом деле, если вы сконцентрируетесь на одной вещи, например на создании сайта на простейшем HTML/CSS/JavaScript без библиотек, а потом добавите фреймворк по типу React’а, ваш путь от новичка до профессионала пройдет гораздо удобнее и приятнее.
И правда, новичкам бывает сложно разобраться с простыми вещами, на которые опытный разработчик даже не обращает внимание. Эта статья призвана разобрать популярные ошибки и затруднения, с которыми сталкиваются большинство изучающих React.
Читать дальше →

Советы по стилю. Как написать читаемый React-код

Когда разработчик проводит code review, ему редко хватает времени вникнуть в каждую строку: приходится быстро продумывать различные ситуации, в которых этот код может не работать. При анализе существует несколько моментов, на которые стоит обращать внимание, чтобы быстро понять, как именно код работает. Подсмотрели у Nirmalya Ghosh несколько приемов, как сделать javascript-код изящнее при создании компонентов с помощью библиотеки React. Хотя у нас есть свои особенности разработки в ЕФС, о которых вы можете прочитать в этой статье, некоторые из описанных под катом приемов мы находим интересными. Читаем и обсуждаем в комментариях!


Читать дальше →

Разрабатываем React-компоненты многократного использования

В прошлом году мы рассказывали, как устроен фронтенд в Программе «Единая фронтальная система», о библиотеке элементов и нашем подходе к переиспользованию UI компонентов. Сегодня предлагаем сравнить несколько подходов к разработке React-компонентов, спасибо Cory House за отличный материал!
Читать дальше →

[Из песочницы] Как начать разрабатывать универсальные приложения с библиотекой Next.js

We don’t need no traffic building,
We don’t need no SEO,
No link exchanges in your network,
Spammers! leave us all alone.

Anna Filina

Немного истории


В далеком 2013 году Spike Brehm из Airbnb опубликовал программную статью, в которой проанализировал недостатки SPA-приложений (Single Page Application), и в качестве альтернативы предложил модель изоморфных веб-приложений. Сейчас чаще используется термин универсальные веб-приложение (см. дискуссию).

В универсальном веб-приложении каждая страница может формироваться как веб-сервером, так и средствами JavaScript на стороне веб-браузера. При этом, исходный код программ, которые выполняются веб-сервером и веб-браузером должен быть единым (универсальным), чтобы исключить несогласованность и повышение затрат на разработку.
Читать дальше →

Книга «React и Redux: функциональная веб-разработка»

image Привет, Хаброжители! В декабре мы издали книгу Алекса Бэнкса и Евы Порселло, цель которой — научить писать эффективные пользовательские интерфейсы при помощи React и систематизация новых технологий, позволяющая сразу же приступить к работе с React. Чтение книги не предполагает никаких предварительных знаний React. Все основы библиотеки будут представлены с самого начала. Сейчас мы рассмотрим раздел «Управление состоянием React»

До сих пор свойства использовались только для обработки данных в компонентах React. Свойства имеют неизменяемый характер. После отображения свойства компонента не изменяются. Чтобы изменить пользовательский интерфейс, понадобится другой механизм, способный заново отобразить дерево компонента с новыми свойствами. Состояние React является его неотъемлемой частью, предназначенной для управления данными, которые будут изменяться внутри компонента. Когда состояние приложения меняется, пользовательский интерфейс отображается заново, чтобы отразить эти нововведения.
Читать дальше →

23 Шортика по ReactJS – короткие видео-уроки не только для новичков

image Весь прошлый год я проводил длинные уроки по часу, полтора, где мы изучали React на практике, делали маленькие и большие приложения, всегда делали это с нуля и в прямом эфире. Я всегда транслировал эти сессии парного программирования и основную пользу они приносили именно напарнику и тем, кто кодил с нами в прямом эфире и задавал вопросы. Всё же практика в изучении технологий, наиболее важна. Но выяснилось, что смотреть такие уроки невыносимо тяжело, час, полтора времени у экрана, постоянное повторение одного и того же, выискивание изюма знаний из длинных «нудных» реплик автора, а зачастую и с эхом в записи, по причине плохого микрофона или медленного интернета, это очень тяжело. Но тем не менее, большой процент разработчиков, опираясь на наши еженедельные сессии парного программирования, изучили новый для себя React и успешно выполняют сложные задачи больших проектов. Но смотреть их скучно. Что делать? Так появились шортики. Я собрал весь изюм из прошлых уроков, часто задаваемых вопросов на практике и дыр у новичков в собеседованиях и превратил их в 3х-4х минутные ролики. Принцип шортиков: пример кода, не больше 5 минут, заранее набранный код, не банальный контент, подтверждение вопроса практикой. Кто я такой? Вецель Евгений, создатель ...Далее...

[Из песочницы] Отзыв на трудоустройство в компанию Soshace

В декабре 2017 интервьюировался в компанию Soshace на позицию Full-Stack Web Developer (JavaScript, remote work). На тот момент, мне не удалось найти каких-то отзывов о прохождении собеседования в эту компанию, поэтому решил заполнить пробел.
Читать дальше →

Как сделать типовые задачи в web приложении на React JS

Как сделать простые типовые, часто встречающиеся задачи в web приложении на React JS

При написании web приложений, интерфейса часто приходится решать типовые задачи по управлению элементами на форме, скрывать, делать не доступными, фильтрации, поиски, сортировки и др. Изучая React JS я начал подготавливать библиотеку подобных решений, её и представлю ниже. Как это работает человеку, изучающему React будет понятно на примерах, которые выложены на GitHub.
Читать дальше →

[Из песочницы] Первый взгляд на react-native

Если вы фронтенд разработчик, да еще и с опытом работы react + redux, то вам определенно стоит обратить внимание на такой интересный инструмент как react-native. Он позволяет разрабатывать кроссплатформенные приложения под ios и android. React-native находится в стадии активного развития и выпускает обновления каждый месяц.
Читать дальше →

Горячая перезагрузка компонентов в React

У меня есть два любимых запроса в гугле:
— Что будет, если в унитаз поезда на полном ходу бросить лом?
— Что будет, если в реакту по полном ходу заменить компонент?

И если с первым вопросом все более менее понятно, то со вторым вопросом все не так просто — тут же вылезает Webpack-dev-server, Hot Module Replacement, и React-Hot-Loader.

И все бы хорошо, но эта гремечая просто не работает, спотыкаясь на первом же сложном коде, HOC, композиции, декораторе и нативных arrow функциях.

В общем признаем — третья версия Reac-hot-loader немного не удалась.


Читать дальше →


Последние посты