Список крутых ресурсов, созданных с помощью React

В поисках идеального инструмента для веб-разработки вы найдете React среди самых рекомендуемых JS-фреймворков. Проверяя его появление по всему Интернету, вы видите, что на его основе построены известные веб-продукты, такие как Facebook и Instagram. Удивительно, но существует более 2 000 000 веб-сайтов, использующих React.

Нет лучшего способа узнать, насколько крут этот фреймворк, чем просмотреть его представителей — веб-сайты, созданные с помощью React.

Лучшие веб-сайты React и то, как они удовлетворяют потребности миллионов пользователей

Теперь пришло время взглянуть на настоящие веб-продукты, созданные на основе библиотеки React. Вы даже можете использовать некоторые из них ежедневно!

Итак, какие названия веб-сайтов React кажутся вам знакомыми?

Facebook

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

Чтобы улучшить Facebook.com, команда использовала комбинацию библиотеки React и Relay — клиента GraphQL для React. Инженеры реализовали принцип «как можно меньше, как можно раньше».

Процесс загрузки страницы включает в себя три этапа:

• Когда вы обновляете страницу Facebook, ключевые элементы или скелет веб-страницы загружаются немедленно.
• После этого содержимое веб-страницы отображается, и мы получаем обновленную информацию (например, ленту новостей или список онлайн-контактов).
• На этапе 3 пользователь может взаимодействовать с веб-страницей, нажимать кнопки «Мне нравится» и «Поделиться», писать сообщения и т. д. и получать немедленный ответ с веб-сайта.

Uber

Единороги — фанаты React! Просто взгляните на веб-сайт Uber: с общей посещаемостью в 50 миллионов человек, занимая первое место в рейтинге наземного транспорта, этот веб-сайт должен обеспечивать невероятно высокий пользовательский опыт. Реакция играет здесь важную роль.

Команда инженеров Uber использовала функции React с самого момента создания веб-сайта. С его помощью команда создала множество библиотек с открытым исходным кодом (вы можете использовать их в своем проекте!). Наиболее впечатляющими являются инструменты для визуализации карт.

Кроме того, Team Uber создала Base Web — дизайн-систему, предоставляющую повторно используемые компоненты для разработки пользовательского интерфейса. Он построен на основе React и позволяет создавать независимые от устройств пользовательские интерфейсы. Команда говорит, что надежность, доступность и настройка являются ее основными функциями и поощряют использование системы для любого веб-проекта.

Netflix

Теперь компания потокового видео Netflix является лидером в отрасли с выручкой более 20 миллиардов долларов в 2019 году. Компания прилагает титанические усилия, чтобы предоставить клиентам ожидаемый уровень обслуживания и качества. Но как все это началось?

В 2015 году команда использовала библиотеку React для редизайна пользовательского интерфейса.

Такие стартапы, как Uber и Netflix, использовали React для разработки высококачественного пользовательского интерфейса и… достигли невиданных высот. С 2015 года веб-сайт Netflix претерпел множество изменений и обновлений, но React остается основным инструментом для фронтенд-разработки. Высокопроизводительные телевизионные пользовательские интерфейсы привлекают и завоевывают сердца пользователей. Простой, ориентированный на пользователя интерфейс упрощает авторизацию и вход в систему, а интуитивно понятный веб-дизайн и удобная фильтрация помогают посетителям найти то, что им нужно. Эти и многие другие функции на базе React позволили Netflix взорвать нишу потокового видео.

Airbnb

Эта всемирно известная платформа по аренде жилья для отпуска также использует React во внешнем интерфейсе. Вы когда-нибудь замечали, как быстро и хорошо загружаются элементы веб-страницы на экране? Разделено на несколько блоков, контент обновляется органично, без задержек и ошибок.

Леланд Ричардсон, один из инженеров Airbnb, описывает преимущества React двумя простыми фразами:

«Повторное использование/портативность: компоненты React чрезвычайно многоразовые.

Возможность рефакторинга: React делает ваш код очень простым для рефакторинга и итерации».

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

Тем временем инженеры Airbnb вносят свой вклад в экосистему React. Например, они представили полезную библиотеку React Sketch.app для нужд разработчиков и дизайнеров.

Outlook.com

А вот и еще один лидер рынка, который использовал потенциал React для своего программного веб-продукта. В 2017 году Microsoft представила Microsoft Outlook — инструмент для управления личной информацией. Он включает в себя компоненты электронной почты, календаря, контактов и задач. Продукт доступен в веб- и мобильной версиях. Здесь мы обращаем особое внимание на веб-сайт.

В своем блоге Microsoft сообщает нам о «…внедрении более гибкой среды веб-разработки, которая обеспечивает обновленную функцию поиска, более свежий вид с современным стилем общения и новый дизайн, позволяющий вам быстрее просматривать, читать и прикреплять файлы и фотографии. ”

Угадайте, о какой структуре идет речь? Да, это Реакт.

Dropbox

Dropbox, служба размещения файлов, рассказывает нам другую историю. Их история об успешном, но сложном переходе с CoffeeScript на выигрышную комбинацию Typescript и React.

Еще в 2012 году решение было глючным. Многочисленные инженеры-программисты внесли свой вклад в кодовую базу. Однако лишь некоторые из них знали о том, что происходит внутри сайта. Команда выбрала Typescript а позже, в 2016 году, начал редизайн с библиотекой React. Веб-сайт, созданный с помощью React и Typescript, показал отличные результаты в производительности.

Вы когда-нибудь замечали, как быстро вы можете получить доступ к предварительному просмотру любого документа в Dropbox? Собирая данные файла, React анализирует количество и размер страниц, строит скелет и визуализирует предварительный просмотр, когда пользователь прокручивает страницу вниз. Команда Dropbox использовала сочетание React JS, других инструментов JS и нескольких методов оптимизации, чтобы создать «гладкую работу во всех поддерживаемых браузерах».

Codecademy

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

Веб-сайт ориентирован на пользователя и обладает высокой производительностью. Но что еще получает Codecademy от React как одного из ведущих инструментов разработки?

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

Skyscanner

Это следующий продукт в нашем списке лучших веб-сайтов React.

Skyscanner станет вашим спасением, если вы планируете поездку с ограниченным бюджетом.

Skyscanner — это мощный веб-движок, полный актуальной информации о дешевых рейсах по всему миру. Дорогие рейсы тоже здесь — просто зайди и посмотри.

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

В 2019 году веб-сайт Skyscanner претерпел масштабный редизайн. Команда инженеров создала Backpack — целую дизайн-систему. Он основан на компонентах React. Основная цель Backpack — создать согласованный, безупречный интерфейс для всех пользователей. Независимо от того, с какой платформы люди заходят на Skyscanner, дизайн пользовательского интерфейса/UX и внешний вид бренда безупречны.

Trello

Почти десять лет веб-система управления задачами работала на платформе Backbone JS и Coffeescript. В 2009 году это был относительно мощный технологический стек. Но время летит, как и инструменты JS. Поэтому команда решила перейти на более динамичный стек.

Перед командой разработчиков стояли две важные задачи.

Архитектуру, построенную на Backbone JS, было сложно поддерживать, и она ограничивала возможности Trello;

Процедура кэширования была неясной и трудной для понимания.

React и Typescript были выбраны в качестве основных инструментов для решения проблем восстания. Позже к отряду присоединился GraphQL. В результате мы можем наслаждаться простотой использования веб-сайта Trello, его хорошо продуманными компонентами и фантастической отзывчивостью.

Приложения на основе React или что еще можно создать с помощью React?

Как вы, возможно, уже заметили, выше мы упомянули такие слова, как «кроссплатформенный» и «независимый от устройства». Эти прилагательные точно описывают суть React: инструмент может превратить любую идею стартапа в жизнеспособный программный продукт для любого устройства, любой платформы. Вы можете использовать его как для разработки веб-сайтов, так и для создания веб-приложений:

Одностраничные приложения (SPA)

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

Прогрессивные веб-приложения (PWA)

Прогрессивное веб-приложение, или PWA, — это веб-сайт, который выглядит и работает так же, как родное мобильное приложение. Без каких-либо установок пользователь может просто получить доступ к веб-сайту и наслаждаться собственным опытом.

Twitter Lite — одно из крупнейших и наиболее успешных PWA, написанных на React. У инженеров Twitter была разумная цель: создать высокопроизводительный продукт, который хорошо работает даже при слабом соединении. Они выполнили миссию, и React им очень помог.

Если вы планируете стать мобильным в будущем, React будет удобен. Благодаря многократно используемой кодовой базе это может значительно сократить время разработки. Создайте веб-сайт React сейчас и повторно используйте часть кода при создании кроссплатформенного мобильного приложения в React Native. При этом вы можете сэкономить время, усилия и деньги.

Подумайте о том, чтобы смешать фреймворк пользовательского интерфейса React с Node.js на серверной части. MERN, комбинация MongoDB, Express.js, ReactJS и Node.js может стать идеальным выбором для проекта любой сложности. Многие бренды использовали этот набор технологий в своих веб-продуктах.

Лучшие веб-сайты React: толчок к движению вперед

Выбирая лучший инструмент для разработки веб-сайтов, вам на ум может прийти фреймворк React. Фреймворк, созданный инженерами Facebook, зарекомендовал себя и завоевал внимание сильных брендов и молодых стартапов.

React — отличный выбор для таких продуктов, как:

1. Веб-сайты социальных сетей, такие как Facebook;
2. Приложения на основе местоположения, такие как Uber и его продукты;
3. Платформы P2P, такие как Airbnb;
4. Продукты потокового видео, такие как Netflix;
5. Системы управления задачами, такие как Trello;
6. Системы обмена файлами, такие как Dropbox;
7. Веб-сайты для управления личной информацией, такие как Outlook.com;
8. Образовательные онлайн-платформы, такие как Codecademy;
9. Веб-движки, которые извлекают информацию из других онлайн-каналов, таких как Skyscanner и т. д.

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

Создайте свое приложение с нуля или перепишите существующее решение — React в любом случае пригодится. Действуйте как лидеры и станьте лидером.