Как запустить React-приложение на хостинге

Boilerplate, конфигурация, начальная стоимость

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

• Next.js и Create React App идут вообще без конфигурации, просто разложите нужные файлы в соответствии с соглашением и все магически заработает
• Electrode идет в комплекте с генератором для Yeoman который выдает просто чудовищно огромную гору файлов, придется потратить время на то, чтоб привыкнуть, что где лежит. В этой горе буквально все: конфиги, код сервера, код для серверных страниц, клиентский код, и пока я не нашел способа хоть как то это оптимизировать.
• Кастом всегда будет иметь некоторое количество кода, от которого не избавиться. Но если вы делаете десятки проектов, то в какой-то момент у вас должны сформироваться некие повторяющиеся паттерны, которые можно переместить в абстракцию. И может даже опен-сорснуть ;). Честно говоря, это же можно сделать и с Electrode, и мне кажется, они и сами к этому придут.

ок.tech: Frontend Meetup #2: мини-интервью спикеров

Фронтенд — одно из самых быстроразвивающихся направлений разработки, вспомните разработку интерфейсов 3-х годичной давности и сравните её с тем, что происходит сейчас и сразу станет понятно — изменилось очень многое, если не совершенно все. С молниеносной скоростью устаревают подходы, считавшиеся передовыми, новый библиотеки становятся популярными буквально в считанные дни.
В преддверии второго митапа Одноклассников по фронтенду, который пройдет 26 ноября в нашем петербургском офисе, мы поговорили со спикерами об их пути в разработку интерфейсов, о том что они считают главными событиями индустрии за 2019 год и десятилетие, попытались понять какие проблемы стоят перед сообществом сейчас, а так же спросили как будет развиваться разработка интерфейсов в будущем.
Под катом ответы на многие интересующие вас вопросы.

1.2.2 Дополнительно: попробовать React с JSX

В приведенных выше примерах мы использовали только те функции, которые изначально
поддерживаются браузерами. Вот почему мы использовали вызов функции JavaScript
для сообщения библиотеке React, что именно необходимо отображать:

Код

Однако React также предлагает вариант использования JSX:

Код

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

Вы можете поиграть с JSX, используя данный .

1.2.2.1 Быстро попробовать JSX

Самый быстрый способ попробовать JSX в вашем проекте — добавить на страницу этот
тег :

Код

Теперь вы можете использовать JSX в любом теге , добавив к нему
атрибут . Вот пример HTML-файла
с JSX, который вы можете скачать и поиграться.

Такой подход хорош для изучения и создания простых демонстраций. Тем не менее,
он делает ваш сайт медленным и не подходит для продакшен. Когда вы будете готовы
двигаться дальше, удалите этот новый тег и добавленные вами
атрибуты . Вместо этого в следующем разделе вы настроите
препроцессор JSX для автоматического преобразования всех ваших тегов .

1.2.2.2 Добавить JSX в проект

Для добавления JSX в проект не требуются сложные инструменты, такие как сборщик
или сервер разработки. По сути, добавление JSX очень похоже на добавление препроцессора CSS.
Единственное требование — наличие Node.js на вашем компьютере.

Перейдите в папку вашего проекта в и вставьте эти две команды:

• Шаг 1: выполните (если не сработает, здесь исправление)

Подсказка

Здесь мы используем только для установки препроцессора JSX, ни
для чего больше. И React, и код приложения могут оставаться в виде
тегов без изменений.

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

1.2.2.3 Запустить JSX препроцессор

Создайте папку с названием и выполните следующую команду терминала:

Код

Внимание!

— это не опечатка — это инструмент для запуска пакетов,
который поставляется с npm 5.2+.

Если вы видите сообщение об ошибке «You have mistakenly installed the babel package», возможно,
вы пропустили . Выполните его в той же папке,
а затем повторите попытку.

Не ожидайте её завершения — эта команда запускает автоматический наблюдатель для JSX.

Если теперь вы создадите файл с названием с этим стартовым кодом JSX,
наблюдатель создаст предварительно обработанный с нативным кодом JavaScript,
понимаемым браузером. Когда вы редактируете исходный файл с JSX, преобразование
будет перезапущено автоматически.

В качестве бонуса это преобразование также позволяет вам использовать современные функции
синтаксиса JavaScript, такие как классы, не беспокоясь о поломке старых браузеров.
Инструмент, который мы только что использовали, называется Babel, и вы можете
узнать о нем больше из документации.

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

Занятие 1. Обзор курса и рекомендации по его освоению

ОригиналV School

▍Состав курса и предварительные требования

• Компоненты. Говоря о React, нельзя избежать обсуждения концепции компонентов. Компоненты в React — это основной строительный блок для создания фрагментов HTML-кода, подходящих для повторного использования. И практически всё остальное, о чём мы будем говорить, имеет отношение к тому, как использовать эти компоненты для построения веб-приложений.
• JSX. Это — синтаксическое расширение JavaScript, которое позволяет создавать компоненты, используя возможности HTML и JavaScript.
• Стилизация компонентов. Стилизация позволяет придать компонентам привлекательный внешний вид.
• Свойства и обмен данными в приложении. Свойства используются для передачи данных между компонентами.
• Состояние. Механизмы состояния компонентов используются для хранения данных в приложении и для управления ими.
• Обработка событий. События позволяют наладить интерактивные взаимоотношения с пользователями приложений.
• Методы жизненного цикла компонентов. Эти методы позволяют программисту влиять на различные события, происходящие с компонентами.
• Загрузка данных из внешних API с использованием протокола HTTP.
• Работа с формами.

1.2.4 Добавление React в существующее приложение

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

React рекомендуется использовать вместе с инфраструктурой сборки проекта для повышения продуктивности разработки. Типичная
современная инфраструктура сборки включает:

• Менеджер пакетов, такой как

  Yarn
  или

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

• Сборщик. Например

  webpack
  ,

  Browserify
  или

  gulp
  . Он позволяет разбивать код на модули и затем
  связывать их в небольшие пакеты для оптимизации времени загрузки.

• Компилятор. Такой как

  Babel
  . Он позволяет
  писать современный JS код, который будет работать в старых браузерах.

1.2.4.1 Установка React

Внимание!

Установив React, рекомендуется выставить production режим построения проекта. Это гарантирует
использование быстрой версии React в production-версии проекта.

Для управления front-end зависимостями рекомендуется использовать

Yarn
или

npm
. Если вы
впервые сталкиваетесь с такими инструментами, можете изучить соответствующие документации.

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

Код

Для того, чтобы установить React с помощью npm, необходимо выполнить:

Код

Данные менеджеры скачивают необходимые пакеты из

реестра npm
.

Внимание!

Чтобы предотвратить потенциальные несовместимости, все React пакеты должны использовать
одну и ту же версию. (Сюда входят , , и т.д.)

1.2.4.2 Возможность использования ES6 и JSX

Чтобы иметь возможность использовать в JS коде JSX и ES6, рекомендуется использовать
Babel. ES6 содержит в себе множество современных JavaScript возможностей,
которые упрощают разработку. В свою очередь JSX – это расширение языка JavaScript, которое
работает с React и также упрощает разработку на нём.

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

.babelrc конфигурации
.

1.2.4.3 Hello World с ES6 и JSX

Рекомендуется использовать бандлер, такой как webpack или Browserify, чтобы
вы могли писать модульный код и объединять его в небольшие пакеты для оптимизации времени загрузки.

Наименьший пример кода на ReactJS выглядит примерно так:

Код

Данный код отрисовывается в DOM-элемент с атрибутом . Поэтому все, что необходимо
сделать — это разместить где-нибудь в HTML-файле.

Таким же образом вы можете отрисовывать React-компонент внутри DOM-элемента где-нибудь внутри существующего
приложения, написанного с помощью какой-либо другой JavaScript UI библиотеки.

Дополнительно об интеграции React с существующим кодом можно
изучить

здесь
.

1.2.4.4 Development и Production версии проекта

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

Тем не менее, они делают development-версию React-проекта больше и медленнее.
Поэтому для развертывания приложения на сервере следует использовать production-версию проекта.

Изучите как узнать использует ли ваше приложение правильную версию React и как
сконфигурировать production-сборку наиболее эффективно:

1.2.4.5 Использование CDN

Если вы не хотите использовать npm для управления пакетами клиента, то и
npm пакеты также предоставляют единые файлы-дистрибутивы в
папках , которые размещены на CDN:

Код

Версии выше подходят только для разработки, но не для production-версии проекта.
Минифицированные и оптимизированные production-версии React находятся здесь:

Код

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

1.2.4.5.1 Что такое crossorigin атрибут?

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

Код

Также рекомендовано проверить, что используемый вами CDN устанавливает HTTP
заголовок :

Это обеспечивает улучшенную

обработку ошибок в React
,
начиная с 16 версии.

Как создать и развернуть Full-Stack React-приложение

Привет, Хабр! Представляю вашем вниманию перевод статьи «How to Build and Deploy a Full-Stack React-App» автора Frank Zickert.
Компоненты инфраструктуры позволяют легко создавать, запускать и развертывать полноценное React-приложение. С этими React-компонентами вы можете сосредоточиться на написании бизнес-логики вашего приложения. Вам не нужно беспокоиться о его конфигурации.
Хотите стать full-stack разработчиком? Full-stack приложение дополняет интерактивный веб-интерфейс React сервером и базой данных. Но такое приложение требует гораздо больше настроек, чем простое одностраничное приложение.

Сравнение

Вердикт

Если вы не собираетесь заниматься серверным рендерингом (вы ничего не продаете, приложение не индексируется гуглом, и вообще приватное), то можете смело смотреть в сторону Create React App, он самый популярный и простой. Его даже можно немножечко кастомизировать. Только eject не делайте, оно того не стоит.

Если серверный рендеринг нужен, и вы готовы смириться с кое-какими ограничениями, то выбирайте Electrode (в качестве условия вас так же не должны пугать большое количество файлов, словоблудность и конфигурации). Это так же хороший выбор, если вас беспокоит производительность.

Если вы готовы мириться с еще большими ограничениями и любите минимализм, то присмотритесь к Next.js.

Ну и наконец, всегда есть кастом. К счастью, библиотеки типа Webpack Blocks, Create React Server, React Router, Redux и прочие делают жизнь сильно проще. Единственная проблема это обмен знаниями и выработка процессов для быстрого создания приложений без повторения одного и того же кода каждый раз.

Структура проекта

Пойдем по порядку.

node_modules/ — в этой папке лежат все зависимости проекта, перечисленные в package.json и устанавливающиеся при запуске npm install.

public/ — содержимое этой папки — это то, что нужно чтобы отрендерить страницу с приложением: public/index.html — шаблон приложения и favicon.ico — фавиконка.

src/ — тут лежат все исходники, т.е. те файлы, которые мы будем непосредственно изменять

Пожалуй, самое важное, что здесь лежит — это src/index.js — входная точка нашего проекта. Откроем его и посмотрим на содержимое:

import React from 'react';import ReactDOM from 'react-dom';import App from './App';import './index.css';ReactDOM.render(,  document.getElementById('root'));

Первые 2 строки

import React from 'react';import ReactDOM from 'react-dom';

это подключение компонент React и ReactDOM из установленных node-модулей.

Далее подключается компонент App.js:

import App from './App';

Внутри одного модуля, в свою очередь, могут импортиться другие модули.

Строка

import './index.css';

подключает CSS файл с базовыми стилями проекта.

Теперь разберемся с этой частью

ReactDOM.render(,  document.getElementById('root'));

render() — метод ReactDOM, который принимает 2 аргумента: компонент, который надо отрендерить, и обертку, в которую надо “положить” результат. В нашем случае в качестве обертки будет элемент с id=“root”, который задан в public/index.html.

Штука, похожая на HTML-тег

это компонент App.js, объявленный при помощи JSX — JavaScript Syntax Extension (расширение синтаксиса JS). Он был придуман, для того, чтобы можно было использовать HTML-подобный синтаксис для создания реакт-компонент. По внешнему виду он очень похож на обычный HTML, но стоит отметить несколько моментов:

1.3.2 Рекомендуемые наборы инструментов

Команда React в первую очередь рекомендует следующие решения:

• Если вы изучаете React или создаете новое , используйте .
• Если вы создаете отрисовываемый на сервере веб-сайт с Node.js,
  попробуйте .
• Если вы создаете статический контент-ориентированный сайт, попробуйте
  .
• Если вы создаете библиотеку компонентов или интегрируетесь с существующей
  кодовой базой, попробуйте .

1.3.2.1 Create React App

Приложение Create React App — удобная среда для изучения React и лучший способ начать
создание нового на React.

Оно настраивает вашу среду разработки, так что вы можете использовать новейшие функции
JavaScript, обеспечивает удобство разработки и оптимизирует ваше приложение для продакшен.
Вам потребуются Node >= 6 и npm >= 5.2. Чтобы создать проект, запустите:

Код

Внимание!

— это не опечатка — это инструмент для запуска пакетов,
который поставляется с npm 5.2+.

Create React App не обрабатывает бэкэнд-логику или базы данных. Он просто создает
фронтэнд каркас, так что вы можете использовать его с любым бэкэндом. Под капотом он
использует Babel и webpack,
но вам даже не нужно ничего знать о них.

Когда ваше приложение готово для разворачивания на продакшене, нужно запустить команду .
Она создаст оптимизированный билд вашего приложения в папке build.
Больше информации по Create React App можно получить по ссылкам и
.

1.3.2.2 Next.js

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

Узнайте больше о Next.js из его официальной докумментации.

1.3.2.3 Gatsby

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

Узнайте больше о Gatsby из его официальной докумментации
и галерее стартовых комплектов.

1.3.2.4 Более гибкие наборы инструментов

Следующие наборы инструментов предоставляют больше гибкости и выбора.
Мы рекомендуем их более опытным пользователям:

• Neutrino сочетает в себе мощь webpack с простотой предустановок. Включает
  предустановку для приложений React и компонентов React.
• nwb особенно хорош для .
  Его также и для создания приложений React.
• Parcel — быстрый сборщик веб-приложений с нулевой
  конфигурацией, .
• Razzle — это фреймворк для серверной отрисовки, не требующий какой-либо настройки,
  но предлагающий большую гибкость, чем Next.js.

Итоги

1. Измерьте производительность компонентов приложения, воспользовавшись одним из следующих инструментов:
   • Панель Performance инструментов разработчика Chrome.
   • Профилировщик инструментов разработчика React.
2. Минимизируйте число ненужных операций повторного рендеринга компонентов
   • Там, где это применимо, воспользуйтесь методом жизненного цикла компонента .
   • Для компонентов, основанных на классах, используйте .
   • Для функциональных компонентов используйте .
   • Воспользуйтесь технологией мемоизации селекторов Redux (например, с помощью ).
   • Примените технологии виртуализации при выводе очень длинных списков (например, с помощью ).
3. Измерьте общую производительность приложения с помощью Lighthouse.
4. Улучшите общую производительность приложения, применив следующие подходы к оптимизации:
   • Если вы не пользуетесь серверным рендерингом — подумайте о разбиении кода компонентов с помощью .
   • Если вы пользуетесь серверным рендерингом — разделяйте код компонентов с использованием библиотеки наподобие .
   • Используйте сервис-воркеры для кэширования материалов, которые стоит кэшировать. Вам в этом может серьёзно помочь .
   • Если вы пользуетесь серверным рендерингом — используйте потоки вместо строк (с помощью и ).
   • Серверный рендеринг вам не подходит? Тогда задействуйте предварительный рендеринг с использованием библиотек наподобие .
   • Извлекайте самые важные стили при использовании библиотек, нацеленных на реализацию технологии CSS-in-JS.
   • Постарайтесь сделать так, чтобы ваши приложения были бы доступны как можно более широкому кругу пользователей. Рассмотрите возможность использования библиотек и .
   • Оснастите свой проект манифестом веб-приложения в том случае, если полагаете, что мобильным пользователям будет удобно работать с ним, вызывая его с домашнего экрана их устройств.

• Улучшение его API, идущее через создание средств, упрощающих создание приложений.
• Появление библиотек сторонних разработчиков, которые, опять же, упрощают создание приложений.

Итоги

• Я открыл себе выход даже не на одну, а на две мобильные платформы (iOS и Android), доведя число платформ, для которых я могу разрабатывать приложения, до трёх.
• Я более глубоко изучил JavaScript. Мне понадобилось пересмотреть многие концепции, которые я воспринимал как данность, разрабатывая проекты в ограниченном разного рода соглашениями пространстве Ember.js.
• До этого у меня был весьма скромный опыт работы с обычной библиотекой React.js, а теперь я чувствую, что у меня есть всё необходимое для создания достаточно масштабных React-приложений, рассчитанных на работу в браузере. Как результат, теперь я владею двумя JS-библиотеками/фреймворками.
• Я ознакомился с функциональным программированием и философией иммутабельности, связанной с управлением состоянием в Redux.
• Я многое узнал о DevOps и об управлении проектами.
• Я научился лучше анализировать чужой код, исследуя репозитории плохо документированных библиотек.
• Я вырос в сфере UI/UX.
• И, что самое главное, я теперь гораздо сильнее, чем раньше, уверен в том, что смогу самостоятельно изучить любую технологию, которую мне захочется освоить, и смогу обойти любые препятствия, которые встретятся мне на пути к цели.