Одной из самых важных библиотек JavaScript, которые я когда-либо изучал за свою карьеру программиста, без сомнения, является React.js или сокращенно React. Фреймворк веб-приложений, разработанный Facebook (да, тот самый Facebook), в первую очередь известен как полезный инструмент для веб-разработчиков, особенно для разработчиков интерфейсов, для разделения многих функций, которые входят в типичное веб-приложение. на более мелкие части для большего удобства.
Во многих отношениях React для JavaScript является тем же, чем Ruby on Rails для Ruby: фреймворк, который легко настроить (у него даже есть собственные «rails new» в «create-react-app»), поставляется с множеством крутых готовых игрушек, которые помогут любому начать разработку (например, файлы index.css и app.css, которые гарантируют, что вы не будете смотреть на еще одну скучную HTML-страницу после загрузки приложения), и обеспечивает достаточную гибкость для разработчиков для создания потенциально красивых приложений и достижения подвигов, которые они иначе не могли бы достичь с помощью ванильного JavaScript или Ruby. У React также есть собственная библиотека для предоставления нескольких маршрутов к тому, что в противном случае было бы полностью одностраничным приложением — React Router, который похож на маршрутизацию в Rails, где файл route.rb может обеспечить доступ ко всем маршрутам RESTful.
Тем не менее, подход React к манипулированию DOM и обработке событий сильно отличается от подхода оригинального рецепта JavaScript — он обрабатывает всю свою визуализацию и функциональность с использованием компонентов, более мелких частей, которые играют отдельную роль в общем внешнем виде. большее приложение и может содержать события, которые подталкивают их к этой цели. Компоненты — это, по сути, кусочки головоломки, которые при правильном соединении создают большую картину, и эта большая картина — приложение в целом.
Но давайте посмотрим на простое приложение React, чтобы понять, о чем я говорю. Я хочу создать простую платформу для социальных сетей, которая позволит пользователю просматривать каждый существующий там пост. Я также хочу, чтобы при нажатии на имя пользователя это имя появлялось в верхней части списка сообщений, заключенных в тег h2. Что касается серверной части, мне нужна только одна модель: post. Где я планирую получать эти посты? Что ж, мы могли бы сгенерировать API с помощью Rails (как я показываю здесь), но на этот раз вместо этого мы создадим файл db.json со всеми нашими сообщениями. Пост содержит имя пользователя, опубликовавшего его, а также его содержание.
Убедитесь, что вы используете другой порт для серверной части, чтобы ваш интерфейс и серверная часть не работали на одном и том же порту.
Со стороны внешнего интерфейса наше дерево приложений выглядит следующим образом: App → PostContainer → Post. Давайте удостоверимся, что к нашему компоненту PostContainer можно получить доступ в нашем файле App.js.
Затем в нашем компоненте PostContainer извлеките данные поста с помощью componentDidMount(). Сюда же мы поместим наш обработчик кликов. Ниже, при создании нашего компонента Post, передайте идентификатор реквизита, onClick (который будет обработчиком кликов в нашем компоненте PostContainer) и сам объект сообщения, который дает нам доступ к пользователю и содержимому сообщения. Эти реквизиты (а также реквизиты в целом) могут передаваться только от родительского компонента к дочернему компоненту. Это не может идти наоборот.
В нашем компоненте Post убедитесь, что свойство onClick, которое мы передали, применяется к HTML, соответствующему имени пользователя сообщения, чтобы состояние внутреннего текста тега h2 менялось в зависимости от того, какой пользователь щелкнул.
Посмотрим на готовый продукт. Мы хотим убедиться, что все сообщения были правильно отображены и что наш обработчик кликов работает должным образом.
У меня есть все посты. Теперь, чтобы нажать на всех пользователей там.
Хорошо, милая. Наше приложение Mugtome готово к работе.
Я определенно вижу потенциал React, когда дело доходит до создания небольших платформ социальных сетей, которые извлекают выгоду из многозадачности больших сайтов (YouTube, например, содержит панель навигации, панель поиска, значок, который ведет вас на ваш канал, и список рекомендуемых видео для просмотра при запуске, в том числе на момент написания этой статьи), а не только такие маленькие, как наш Mugtome. Если бы мы сделали его немного больше, мы могли бы добавить профили для пользователей с их собственными аватарами и другой информацией, список друзей пользователя и, возможно, даже форму, которая принимает имя пользователя и пароль, если у нас есть время для этого. Все эти функции, вероятно, будут обрабатываться отдельными компонентами.
Благодаря своей уникальной компонентной структуре, а также гибкости и общему удобству для разработчиков, React вселяет в меня уверенность, что его изучение сделает меня на один шаг ближе к созданию действительно профессиональных веб-приложений. Вы можете сделать с ним еще один Facebook, как я только что сделал (ну, вроде того).
