9 руководств по React, которые выдержали испытание временем

Ссылка на оригинал - https://frontarm.com/james-k-nelson/9-react-resources/, автор публикации - James K Nelson

React заслуживает своей репутации за стабильность? Давайте узнаем, исследуя, как девять классических статей о React соответствуют последней версии React.

Время от времени мир React может ощущаться как беговая дорожка. С таким количеством новых пакетов, API и шаблонов… Однако вещи более стабильны, чем вы думаете, и у меня есть возможность доказать это! Но прежде чем мы погрузимся, сначала позвольте сделать введение.

Если вы не знаете Марка Эриксона, он является одной из опор сообщества React. Он часами занимается обслуживанием Redux, неустанно отвечает на вопросы сообщества, а также ведет самый полный список ссылок React / Redux на информационной супермагистрали.

Теперь одна из замечательных особенностей React - огромное количество доступных ресурсов. Но это создает свою проблему: как узнать, в какие из них можно потратить время? Примерно год назад Марк любезно согласился выбрать всего несколько избранных из своего списка. А потом ... я покинул список на год. Теперь, год спустя, я проверил, прошли ли они испытание временем.

TL; DR? React до смешного стабилен. Статьи, написанные более 3 лет назад, до сих пор невероятно полезны. Примеры по-прежнему работают без предупреждений - даже с последней версией React! На горизонте есть несколько изменений, но 90% того, что вы узнаете о React, останутся с вами в течение многих лет . И чтобы доказать это, вот 9 ресурсов Марка, упорядоченные от самых новых до самых старых:

9. React методов жизненного цикла - как и когда их использовать

Опубликовано 29 марта 2017 г.

Часто существует множество способов выполнить одно и то же с помощью методов жизненного цикла, что затрудняет выбор подходов. Эта статья Скотта Купола дает краткое изложение того, что делает каждый метод.

Теперь верно, что все примеры из этой статьи по-прежнему работают без предупреждений. Однако за время, прошедшее с момента публикации статьи, команда React объявила, что некоторые методы будут устаревшими в ближайшем будущем:

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

Кроме того, вместо них были добавлены два новых метода жизненного цикла:

  • getDerivedStateFromProps(который может быть использован вместо componentWillReceiveProps)
  • getSnapshotBeforeUpdate(который может быть использован вместо componentWillUpdate)

Чтобы узнать об этих предстоящих изменениях, вам лучше прочитать официальный анонс.

8. Когда использовать React's Ref на DOM-узле в React

Опубликовано 22 марта 2017 г.

Одним из главных нововведений React была виртуальная DOM. Он позволяет вам объявить - «эй, React, это то, что я хочу, чтобы разметка моего компонента выглядела», - а затем React вносит изменения DOM для вас. Но если вам нужно вручную обновить DOM - например, при создании собственного выпадающего компонента - тогда вам нужно будет использовать поддержку React ref. Статья Робина Вируха охватывает один из способов сделать это.

Через год после публикации этой статьи команда React представила React.createRef()API: дополнительный, более простой API для работы с ссылками. Здесь следует отметить, что функциональный API, который вводит Робин, никуда не денется. Он предоставляет больше возможностей, чем новый API, и если вы потратили время на его изучение, эти знания останутся с вами в обозримом будущем.

7. Реквизит против государства

Опубликовано 27 ноября 2016 г.

React был основан на реквизите и состоянии с момента его выпуска в 2013 году . Это вечность в программных годах.

Эта короткая статья Люси Бэйн дает вам отличное объяснение того, что такое реквизит и состояние, как они отличаются, зачем вам нужны оба, и какой из них вы можете использовать для данного фрагмента данных. Это стоит того, чтобы прочитать сейчас, и, вероятно, все равно стоит прочесть через 5 лет.

6. Как сделать AJAX-запросы в React?

Опубликовано 26 ноября 2016 г.

Большинство реальных приложений React должны работать с удаленными данными. И самый простой способ сделать это - сделать запросы AJAX.

В этом руководстве Бартоша Щецинского обсуждается, как получать данные с помощью AJAX и, что более важно, где эти выборки должны происходить.

Единственные API React, которые Bartosz использует в этой статье, это setState()и componentDidMount(). Они были вокруг навсегда, и останутся здесь еще долго. И хотя API-интерфейс приостановки React может предоставить еще один вариант решения этой проблемы, этот ресурс, вероятно, будет актуален, пока действует сам React.

5. Визуальное руководство по состоянию в действии

Опубликовано 19 октября 2016 г.

Если вы совсем не уверены в том, что именно подразумевается под «состоянием», это визуальное руководство Дэйва Седдии дает понять, как день. И, как следует из названия, он прекрасно использует графику, чтобы показать суть.

Дело в том, что это нечто большее, чем просто React; это объяснение концепции, которая применима к любому развитию веб-интерфейса.

4. 5 типов состояний приложений React

Опубликовано 29 августа 2016 г.

Эта статья от Yours Truly разбивает различные типы состояний, которые вы можете хранить в приложении React или вообще в любом приложении Frontend.

Архитектурное состояние будет проблемой до тех пор, пока ИИ не уволит нас с работы программистов, так что это будет актуально на ... вероятно, еще какое-то время. Что из того, что стоит, из 30 самых популярных статей в моем блоге эта получает второе место по времени чтения.

3. Где хранить данные компонента React: состояние, хранилище, статика и это

Опубликовано 13 августа 2016 г.

Один из самых трудных вопросов, с которым вы столкнетесь как разработчик React: «Куда уходит это состояние?». Это происходит в магазине Redux? Или в компонентном состоянии? Или где-то еще?

Этот драгоценный камень Сэма Коркоса отвечает на вопрос, возвращаясь к первым принципам. Он демонстрирует, как компоненты React представляют собой просто JavaScript, и что это означает для того, где вы размещаете свое состояние.

Пока компоненты React определены как классы JavaScript, это будет стоить прочтения. И если вы собираетесь прочитать только одну статью из этого списка, я рекомендую эту.

2. 8 стратегий no-Flux для взаимодействия компонентов React

Опубликовано 21 ноября 2015 г.

По мере роста вашего приложения React вы обнаружите, что компоненты должны взаимодействовать друг с другом. Но есть так много вариантов - реквизиты и обратные вызовы, события и контекст - и это руководство Эндрю Фармера поможет вам выбрать правильный вариант.

Вы, возможно, заметили, что я упомянул «Контекст» , чего вы не ожидаете от статьи 2015 года. Официальный Context API прошел несколько обновлений в недавней истории, и Эндрю постоянно обновлял эту часть статьи. Но остальное осталось почти таким же с 2015 года.

1. Презентационные и контейнерные компоненты

Опубликовано 23 марта 2015 г.

Было совершенно незапланировано, что этот классик Дана Абрамова оказался в поул-позиции этого списка. Но учитывая, насколько это было влиятельным, это вполне заслуженное место.

Теперь, как это происходит, эта статья прошла через некоторые обновления за последние годы. На самом деле, даже имя изменилось - вы все еще можете увидеть оригинальное имя в URL. Но основной урок остался прежним: вы сэкономите много слез, отделив свою бизнес-логику от презентации. А с React естественным способом достижения этого является разделение кода представления на отдельные компоненты.

React смехотворно стабилен

React - одна из самых стабильных библиотек внешнего интерфейса. На самом деле, даже сами документы React использовали 2-летнюю версию React еще несколько месяцев назад.

Но React на распутье. Он начинает меняться снова. Запланированные API, такие как Time Slicing и Suspense, означают, что вы сможете сделать больше с помощью необработанного React. И с меньшей зависимостью от сторонних библиотек, больше чем когда-либо ваша карьера зависит от глубокого понимания самого React.

9 ресурсов, приведенных выше, дают вам отличный обзор многих основ React. Но если вы ищете более практичный подход, мой курс React (без умных слов)проведет вас через процесс создания приложения списка контактов с 55 живыми редактируемыми примерами и упражнениями. Вы можете попробовать это здесь:

Урок 1: приложение в одном файле »

Еще один ресурс, который оставался в курсе на протяжении многих лет, - это мои чит-листы на JavaScript в формате PDF. Они доступны бесплатно - просто войдите с GitHub для доступа:

JavaScript PDF читы »

Прежде чем я уйду, я хочу поблагодарить Марка за то, что он выбрал ресурсы для этого списка и за всю поддержку, которую он оказал сообществу React. Я также хочу сказать спасибо авторам этих статей за создание ресурсов, которые все еще помогают людям долгие годы. И, наконец, спасибо вам за чтение - я не смог бы построить Оружейную стойку без вас!

Не нашли ответ на свой вопрос? Возможно, вы найдете решение проблемы на нашем канале в Youtube! Здесь мы собрали небольшие, но эффективные инструкции. Смотрите и подписывайтесь на наш youtube-канал!

Смотреть на Youtube

Руководства и обзоры

1 Что нужно восстановить?

Видео

MP4, AVI и HD видео хранятся на телефоне и / или по ошибке удаляются вместе с фотографиями и другими медиафайлами.

Контакты

Номера телефонов друзей и знакомых из приложения «Контакты Android», журналы вызовов; Восстановление SIM-карты.

Фото

Удалены файлы JPG / PNG из Галереи Android; фото, загруженные на мобильный, файлы повреждены после восстановления.

Смс и сообщения

Чаты WhatsApp и Facebook, текстовые сообщения в соцсетях, информация на сим-карте

2 Где пропали файлы?

На sd-карте

Фотографии и документы хранятся на SD-картах. Часто на них случайно удаляются файлы

На телефоне

Программы для восстановления не распознают внутреннее хранилище телефона как диск, но есть другие решения.

На USB флешке

Эти небольшие устройства хранения данных часто выходят из строя или на них появляются ошибки чтения.

На HDD или SSD

Несмотря на то, что настольные платформы становятся все менее популярными, проблема потери файлов всегда оставалась.