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

Я создал базовое приложение 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 сервером и базой данных. Но такое приложение требует гораздо больше настроек, чем простое одностраничное приложение.

Сравнение

Дисциплина \ Название React App Electrode Next.js Custom
Dynamic Routes да да DIY да
Server rendering нет да да DIY
SSR optimization нет SSR да нет DIY
CSS да да ночной кошмар DIY легко
Preprocessors ночной кошмар ночной кошмар ночной кошмар DIY легко
Critical CSS DIY плагин нет DIY
Сообщество большое есть есть ты сам по себе
Тесты jest phantom DIY DIY
Код основы ноль много ноль очень много
Конфигурация ноль много ноль очень много
Документация хорошая так себе в наличии разрозненная
Обучение простому сел и поехал приемлемо легко ночной кошмар
Дальнейшее обучение проще умереть тяжело тяжело ночной кошмар
Движок сервера nginx node node node
Кастомизация eject и смерть приемлемо ночной кошмар все что угодно
Первоначальная установка легко словоблудно легко ночной кошмар
Предсказуемость хорошая так себе плохая ночной кошмар
Апгрейды шикарно неплохо так себе ночной кошмар

Вердикт

Если вы не собираетесь заниматься серверным рендерингом (вы ничего не продаете, приложение не индексируется гуглом, и вообще приватное), то можете смело смотреть в сторону 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.
  • И, что самое главное, я теперь гораздо сильнее, чем раньше, уверен в том, что смогу самостоятельно изучить любую технологию, которую мне захочется освоить, и смогу обойти любые препятствия, которые встретятся мне на пути к цели.

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий