Введение в React

1.2 Установка

1.2.1 Попробовать React

1.2.1.1 Онлайн

Если вы просто хотите побаловаться с React, то можете использовать онлайн-площадку для кода. Попробуйте пример Hello World на CodePen или CodeSandbox .

1.2.1.2 Минимальный HTML-шаблон

Если вы предпочитаете использовать собственный текстовый редактор, вы также можете загрузить этот HTML-файл , отредактировать и открыть его из локальной файловой системы в своем браузере. Он выполняет медленное runtime-преобразование кода, поэтому мы рекомендуем использовать его только для простых демонстраций.

Если вы хотите использовать React для полноценного приложения, то переходите к изучению следующих разделов «Создание приложения на React» и «Добавление React в существующее приложение».

1.2.2 Следующие шаги

1.2.2.1 Быстрый старт

Перейдите к разделу «Быстрый старт» для пошагового ознакомления с концепциями React.
Перейдите к разделу «Для продвинутых» для более глубокого изучения.

1.2.2.2 Полноценная среда разработки

Более легкие решения выше подходят, если вы новичок в React или просто экспериментируете.

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

Добавление React в новое приложение: создайте новое приложение с полнофункциональным стартовым комплектом.
Добавление React в существующее приложение: добавьте React в систему сборки или большее приложение.

1.2.3 Добавить React в новое приложение

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

Внимание!

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

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

1.2.3.1 Создание React-приложения

Пример Create React App - это лучший способ начать разработку нового одностраничного приложения React. Он настраивает вашу среду разработки, чтобы вы могли использовать новейшие функции JavaScript, предоставляет хороший опыт разработки и оптимизирует ваше приложение для продакшен. Вам понадобится Node >= 6 на вашем компьютере.

Код

    npm install -g create-react-app
    create-react-app my-app

    cd my-app
    npm start

Если у вас установлен npm 5.2.0+, вы можете использовать npx .

Код

    npx create-react-app my-app

    cd my-app
    npm start

Данный пример не работает с бекенд логикой или базой данных. Он просто создает начальный фронтенд каркас. Так что мы можем использовать его с любой бекенд логикой, которая необходима. Данный пример использует инструменты билда, такие как Babel и webpack, но работает с нулевой конфигурацией. Ее необходимо будет исправить под нужды вашего проекта.

Когда ваше приложение готово для разворачивания на продакшене, нужно запустить команду npm run build. Она создаст оптимизированный билд вашего приложения в папке build. Больше информации можно получить по ссылкам Read Me и User Guide .

1.2.3.2 Создание React-приложения

Мы создали кураторский список сторонних стартовых комплектов , которые официально рекомендуем.

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

Вы также можете просмотреть список других комплектов , предоставленных сообществом.

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, необходимо выполнить следующие команды в командной строке:

Код

    yarn init
    yarn add react react-dom

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

Код

    npm init
    npm install --save react react-dom

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

Внимание!

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

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

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

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

1.2.4.3 Hello World с ES6 и JSX

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

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

Код

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

    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    );

Данный код отрисовывается в DOM-элемент с атрибутом id="root". Поэтому все, что необходимо сделать - это разместить <div id="root"></div> где-нибудь в HTML-файле.

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

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

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

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

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

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

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

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

Код

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

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

Код

    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

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

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

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

Код

    <script crossorigin src="..."></script>

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

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

Keys	Action
`?`	Open this help
`n`	Next page
`p`	Previous page
`s`	Search