9-я неделя завершена и прошла учебный курс по кодированию DevelopMe — осталось не так много! С учетом того, что новые технологии внедряются в смесь слева, справа и по центру, было полезно использовать этот блог в качестве мини-сессии по пересмотру на выходных. Это также дает мне повод приостановить просмотр Netflix и продолжить обучение, пока мой мозг хочет взять творческий отпуск.

Что такое React?

React был разработан Facebook и выпущен в 2013 году. Он был создан, чтобы обеспечить потребность в высокопроизводительном пользовательском интерфейсе, и в настоящее время является одной из самых популярных библиотек в мобильной разработке.

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

Изучаем реакцию

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

Разобраться с макетом и перемещаться по библиотеке оказалось проще, чем писать PHP на Laravel. Однако написание JSX, конечно же, было для меня совершенно новым. JSX — это расширение синтаксиса для JavaScript, и хотя React не требует его использования, он имеет хорошую структуру и позволяет React отображать более полезные сообщения об ошибках.

Что мне понравилось в React, так это то, как быстро он настраивается, как только вы запускаете эти две команды, вы отключаетесь:

npm install create-react-app

запуск нпм

Затем ваш браузер покажет вам светящийся логотип React, который представляет вашу страницу верхнего уровня App.js, и все готово! Особенно интересна функция горячей перезагрузки — как только вы вносите изменения, браузер автоматически обновляется.

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

Мы потратили большую часть этой недели на создание компонентов и подкомпонентов, для этого мы сразу же следовали правилам JSX и вонзили свои зубы в следующее:

Использование и передача props

Как обрабатываются события

Изменение состояния и его использование

Чтобы пользователь мог перемещаться между различными компонентами в нашем приложении, мы узнали о React Router. Это библиотека для создания маршрутов и изменения того, что отображается в зависимости от того, что выбрано, и URL-адреса.

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

React Router также имеет доступ к API истории, который представляет собой объект, содержащий данные о том, куда пользователь ранее переходил в браузере. Затем это может повлиять на то, что отображается пользователю.

Затем мы развернули наше приложение React на GitHub, которое затем позаботилось о хостинге.

Развертывание не сработало для меня так, как я надеялся, однако мне становится все более и более комфортно учиться на том, что идет не так!

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