Что такое React? Учебник о том, как начать

Возьмите React за половину времени

Научитесь создавать готовые для отрасли приложения React с практической практикой и живые проекты.

React для Front-End разработчиков

Введение в разработку веб-приложений lopment

Веб-приложения — это программное обеспечение, разработанное для отображения веб-страниц в браузере. Самый простой технический стек — это JavaScript, HTML, CSS. Вот краткое описание того, как используются эти три технологии:

Базовый стек технологий веб-приложения:

• HTML
  • DOM — объектная модель документа
  • Для структуры веб-страницы
• CSS
  • Для стилизации
• JavaScript
  • Для программирования
  • Захват данных с сервера, обработка входных данных, создание выходных данных
  • Веб-страницы обслуживаются сервером, а затем изменяются браузером с помощью JavaScript.

Эти технологические стеки, которые разработчики используют для создания веб-приложений, часто называют Web Frameworks или Web Application Frameworks . React.js — это современный фреймворк для JavaScript. Добавление React в базовый стек HTML/CSS/JavaScript значительно упрощает создание более надежных пользовательских интерфейсов.

При разработке веб-приложений вы, разработчик, должны беспокоиться о:

• совместимость с браузером
• расширения
• Скорость
• Безопасность
• Веб-протоколы — HTTP
• Правила архитектуры браузера

В вашем веб-приложении у вас также будут уровни, которые описаны ниже.

Уровни веб-приложений

Для этого краткого обзора мы просто предположим трехуровневую архитектуру: браузер, движок, база данных..

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

Нативные приложения

Самый простой пример нативных приложений, который можно понять, когда вы новичок в разработке программного обеспечения, — это мобильные приложения для вашего мобильного телефона. Мобильные приложения — это те, которые вы используете на своем телефоне каждый день, например Instagram или Spotify. Мобильные приложения бывают двух стилей разработки:

• Native

  • Native созданы для одной конкретной операционной системы. (ОС)

• Гибрид

  • Создан для работы где угодно

Что такое разработка собственных приложений?

Для сокращения: разработка собственных приложений обычно создает приложения для Телефоны iPhone или Android.

Разработка собственных приложений — это создание программ, которые работают на определенных устройствах и платформах. Вы можете создавать собственные приложения для настольных компьютеров, смарт-телевизоров и всевозможных гаджетов. Смартфоны — самые популярные платформы для разработки мобильных приложений. Компании создают операционные системы для разработчиков для создания приложений для своих устройств — это дает разработчикам доступ к инструментам и функциям на этом устройстве — например, к камере на телефоне. В частности, две самые популярные мобильные ОС:

• Android от Google
• iOS от Apple

Нативные мобильные приложения не запускаются в браузере — в отличие от веб-приложений, созданных для браузеры. Как пользователь, вы загружаете собственные мобильные приложения из специализированных магазинов, таких как Apple App Store или Google Play.

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

Преимущества разработки нативных приложений

• Использование функций и инструментов устройства

  • Пример: камера вашего телефона

• Быстрее

  • Нативные приложения оптимизированы для этой конкретной операционной системы, этого конкретного устройства..

• Совместимые

  • Нативные приложения созданы с учетом требований безопасности и программирования нативных операционная система в виду. Таким образом, нативные приложения с меньшей вероятностью сломаются, когда производитель ОС выпустит обновление — потому что, по-видимому, нативные разработчики опирались на спецификации и сильные стороны этой операционной системы.

• Secure

  • Может использовать встроенные функции безопасности для проверки того, что пользователь вошел в систему, например Face ID на iPhone.
  • Нативные приложения часто могут получить доступ к методу двухфакторной аутентификации устройства, например, к отправке кода на телефон и его автозаполнению в приложении.

Гибридные приложения

Гибридные приложения созданы для работы везде. Гибридные приложения работают как веб-приложения, так и как собственные мобильные приложения. Гибридные приложения разработаны для совместимости с различными браузерами и операционными системами.

Вы создаете гибридные приложения с использованием веб-технологий: HTML, CSS и JavaScript, но разработчик должен быть очень осторожен при выборе технического стека. более того. Многие функции из разных библиотек кода или инструментов работают только с определенными браузерами или операционными системами.

Универсальность платформы React делает его фаворитом для решения этих проблем.

Гибридные приложения являются :

• Portable
• Простая разработка
• Работает в разных браузерах, операционных системах

Каковы недостатки гибридных приложений?

• Снижение скорости

  • Нативные приложения оптимизированы для этой конкретной операционной системы. Гибридные приложения должны быть разработаны для работы везде.

• Ограниченный технический инструментарий

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

• Дублирование/усложнение кода

  • Некоторые вещи в вашем приложении должны быть написаны для обработки различных случаев в браузерах и в собственных операционных системах.

• Потеря мощных функций

  • В вашем смартфоне есть отличные функции, такие как камера. На моем iPhone есть живые фотографии, фильтры и панорама. Создавая гибридное приложение, вы должны немного упростить дизайн, чтобы обеспечить его повсеместную совместимость.

React Tutorial — пошаговое руководство

Здесь мы продемонстрируем простой компонент React, чтобы вы начали изучать React..

Примечание о Developer ToolChains:

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

Для этого 101 мы собираемся добавить React как простой тег скрипта на HTML-страницу. . Реагировать как простой тег скрипта пропускает много сложной информации о цепочке инструментов.

Реагировать как тег скрипта

Вот 101, который нужно создать кнопку с использованием React.

1. Добавьте заголовок в HTML
   • Читаемость — огромная часть хорошего кода, поэтому вставляйте заголовок!

1. Добавить контейнер DOM на веб-страницу HTML внутри тела
   • Добавить теги
   • Внутри тела добавьте

   • Примечание. В HTML может быть несколько контейнеров DOM.
     • Контейнеры DOM действуют независимо от других контейнеров, но обычно для приложений, ориентированных на React, существует только одна DOM. conta iner
     • Контейнеры пусты: React заменяет существующий контент внутри контейнеров DOM.

1. Теги сценария

   • Добавьте 3 тега сценария после контейнера DOM, прямо перед конечный тег
   • Эти теги загружают React, затем загружают код компонента.

2. Создание компонента React в JavaScript

   • Код JavaScript определяет компонент React
   • В разделе JavaScript нашей кодовой базы введите следующий код:

1. Код, который вы ввели:

   • Создает новый элемент React.
   • Создает класс называется ClickButton , который расширяет React.Component.
   • Кнопка Click инициализирует переменную состояния с именем «clicked» на false

2. Теперь у нас есть структура, определенная в HTML, пустой корневой узел HTML click_button_container готов для того, чтобы что-то его заполнить.. У нас также есть класс ClickButton в JavaScript, определяющий логику нашего компонента кнопки. Следующим шагом является включение логики render () ClickButton в click_button_container .

   • Добавьте этот код в конец файла JavaScript, который отобразит логику ClickButton в click_button_container .

1. Теперь вы можете увидеть «кнопку щелчка» с правой стороны. продолжайте и щелкните по нему и посмотрите, что произойдет.

Вы создали React составная часть! Поздравляю! О React можно узнать гораздо больше. Ниже приведены некоторые объяснения синтаксиса созданного вами кода.

React Syntax

Там гораздо больше о синтаксисе React на странице React, но давайте рассмотрим самые основные основы только что созданной кнопки:

• React основан на компонентах
• Элементы
• Render () метод
  • Компонент с отслеживанием состояния

На основе компонентов

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

Примеры компонентов React:

• Кнопка, которую мы только что создали

Что делают компоненты React?

• Принимает реквизиты
  • Свойства, параметры, передаваемые в компонент
• Возвращает отображение
  • Иерархия представлений
  • Через render () метод

Элементы

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

Из нашего примера кода показано, как React взаимодействует, создавая элемент в JavaScript, создавая корневой узел DOM. в HTML и с помощью метода render () поместить логику элемента для отображения на веб-странице.

Что такое рендеринг?

Метод render () возвращает описание того, что отображать на экране. Render () возвращает элемент React — помните, что элемент React — это упрощенное описание того, что нужно использовать для render ().

Компонент с отслеживанием состояния

Как браузер узнает, когда нужно повторить рендеринг страницы? При изменении состояния компонента. Компонент поддерживает данные внутреннего состояния ( this.state ), как показано в нашем примере класса ClickButton , где this.state = {нажал: false} .

Когда this.state изменяется, метод render () повторно вызывается, и визуализированная разметка обновляется последняя информация. В нашем примере, когда this.state.clicked изменяется на True , кнопка исчезает, и вместо этого отображается метод «Вы нажали это».

Дальнейшие действия

Поздравляем! Вы прошли вступление в React! Есть еще чему поучиться. Следующие шаги включают:

• JSX
• Toolchains
• State vs. Props
• Свойства неизменяемы
• Component API
• Forms
• События

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

Продолжить чтение о React

• Эволюция React: V16 и не только
• Пять лучших практик для разработчиков React
• React перехватывает шаблоны проектирования и создание компонентов без классов