как установить react js на windows
Установка React напрямую в Windows
В этом руководстве описывается, как напрямую установить React в Windows с помощью цепочки инструментов create-react-app.
Мы рекомендуем следовать этим инструкциям, если вы не знакомы с React. Если вы создаете одностраничное приложение (SPA), которое должно использовать команды или средства Bash, или планируете развертывание на сервере Linux, мы рекомендуем установить create-react-app в подсистеме Windows для Linux (WSL).
Дополнительные сведения о React, выборе между React (веб-приложения), React Native (мобильные приложения) и React Native для Windows (классические приложения) см. в статье Общие сведения о React.
Предварительные требования
Создание приложения React
Чтобы установить всю цепочку инструментов React в WSL, мы рекомендуем использовать create-react-app:
Откройте окно терминала (командная строка Windows или PowerShell).
Установите React с помощью средства create-react-app, которое устанавливает все зависимости для создания и запуска полноценного приложения React.js:
npx — это средство запуска пакетов, используемое npm для выполнения пакетов без глобальной установки. Оно по сути создает временную установку React, чтобы в каждом новом проекте использовалась последняя версия React (а не текущая версия, как при глобальной установке). Использование средства запуска пакетов npx для выполнения пакета также минимизирует вероятность установки нескольких пакетов на компьютере.
Запустите новое приложение React:
Эта команда запустит сервер Node.js и откроет новое окно браузера с приложением. Вы можете использовать клавиши CTRL+С, чтобы прерывать выполнение приложения React в командной строке.
Create React App включает в себя конвейер сборки интерфейсной части с использованием Babel и webpack, но не работает с серверной логикой или базами данных. Если вы хотите создать веб-сайт, поддерживающий отрисовку на сервере, с помощью React и серверной части Node.js, рекомендуем установить Next.js вместо средства create-react-app, которое в большей мере предназначено для одностраничных приложений. Вы также можете установить Gatsby, если хотите создать статический веб-сайт, ориентированный на содержимое.
1.2 Установка
1.2.1 Попробовать React
1.2.1.1 Онлайн
1.2.1.2 Минимальный HTML-шаблон
Если вы хотите использовать React для полноценного приложения, то переходите к изучению следующих разделов «Создание приложения на React» и «Добавление React в существующее приложение».
1.2.2 Следующие шаги
1.2.2.1 Быстрый старт
1.2.2.2 Полноценная среда разработки
Более легкие решения выше подходят, если вы новичок в React или просто экспериментируете.
Когда вы будете готовы создать свое первое приложение с помощью React, ознакомьтесь с руководствами по установке ниже. Эти настройки предназначены для того, чтобы вы могли работать, используя богатый опыт разработчиков и были готовы к продакшену. Они включают в себя встроенный линт, тестирование и оптимизацию, однако для их установки и конфигурации требуется больше времени и места на диске.
1.2.3 Добавить React в новое приложение
На данной странице описывается настройка одностраничного приложения со всем необходимым для удобного процесса разработки, включая линт, тестирование, оптимизацию продакшен и многое другое. Полнофункциональные инструменты, такие как эти, для установки требуют некоторое время и место на диске.
Если вы не создаете одностраничное приложение, вы можете либо добавить React в существующий конвейер сборки, либо использовать его из CDN без стадии сборки.
1.2.3.1 Создание React-приложения
Данный пример не работает с бекенд логикой или базой данных. Он просто создает начальный фронтенд каркас. Так что мы можем использовать его с любой бекенд логикой, которая необходима. Данный пример использует инструменты билда, такие как Babel и webpack, но работает с нулевой конфигурацией. Ее необходимо будет исправить под нужды вашего проекта.
1.2.3.2 Создание React-приложения
Они немного отличаются своим фокусом, но все они готовы к продакшену, хорошо поддерживаются и не требуют настройки для начала работы.
1.2.4 Добавление React в существующее приложение
Нет необходимости переписывать существующее приложение, чтобы начать использовать React. Вместо этого можно добавить React в маленькую часть существующего приложения, например, в какой-нибудь виджет. Таким образом, можно наблюдать за правильностью его работы.
React рекомендуется использовать вместе с инфраструктурой сборки проекта для повышения продуктивности разработки. Типичная современная инфраструктура сборки включает:
1.2.4.1 Установка React
Установив React, рекомендуется выставить production режим построения проекта. Это гарантирует использование быстрой версии React в production-версии проекта.
Для того, чтобы установить React с помощью Yarn, необходимо выполнить следующие команды в командной строке:
Для того, чтобы установить React с помощью npm, необходимо выполнить:
1.2.4.2 Возможность использования ES6 и JSX
Чтобы иметь возможность использовать в JS коде JSX и ES6, рекомендуется использовать Babel. ES6 содержит в себе множество современных JavaScript возможностей, которые упрощают разработку. В свою очередь JSX – это расширение языка JavaScript, которое работает с React и также упрощает разработку на нём.
1.2.4.3 Hello World с ES6 и JSX
Рекомендуется использовать бандлер, такой как webpack или Browserify, чтобы вы могли писать модульный код и объединять его в небольшие пакеты для оптимизации времени загрузки.
Наименьший пример кода на ReactJS выглядит примерно так:
Таким же образом вы можете отрисовывать React-компонент внутри DOM-элемента где-нибудь внутри существующего приложения, написанного с помощью какой-либо другой JavaScript UI библиотеки.
1.2.4.4 Development и Production версии проекта
По умолчанию React содержит много полезных предупреждений, которые очень помогают в разработке.
Тем не менее, они делают development-версию React-проекта больше и медленнее. Поэтому для развертывания приложения на сервере следует использовать production-версию проекта.
Изучите как узнать использует ли ваше приложение правильную версию React и как сконфигурировать production-сборку наиболее эффективно:
1.2.4.5 Использование CDN
Версии выше подходят только для разработки, но не для production-версии проекта. Минифицированные и оптимизированные production-версии React находятся здесь:
1.2.4.5.1 Что такое crossorigin атрибут?
Если вы подключаете React из CDN, разработчики рекомендуют установить значение атрибута crossorigin :
Также рекомендовано проверить, что используемый вами CDN устанавливает HTTP заголовок Access-Control-Allow-Origin: * :
Общие сведения о React
Что такое React JS?
React — это библиотека JavaScript с открытым кодом для создания внешних пользовательских интерфейсов. В отличие от других библиотек JavaScript, предоставляющих полноценную платформу приложений, React ориентируется исключительно на создание представлений приложений через инкапсулированные единицы (называются компонентами), которые сохраняют состояние и генерируют элементы пользовательского интерфейса. Вы можете разместить отдельный компонент на веб-странице или вложить иерархии компонентов для создания сложного пользовательского интерфейса.
Компоненты React часто пишутся на JavaScript и JSX (JavaScript XML), который является расширением JavaScript, очень похожим на HTML и включающим некоторые функции синтаксиса для оптимизированного выполнения распространенных задач, например регистрации обработчиков событий для элементов пользовательского интерфейса. Компонент React реализует метод отрисовки, который возвращает код JSX, представляющий пользовательский интерфейс компонента. В веб-приложении код JSX, возвращаемый компонентом, преобразуется в поддерживаемый браузером код HTML, который затем обрабатывается для отображения браузером.
Работает ли React в Windows?
Да. Windows 10 поддерживает две разных среды для разработки приложений React:
Чтобы понять, какую среду использовать, ознакомьтесь со статьей Выбор между установкой в Windows и подсистеме Windows для Linux.
Что можно делать с помощью React?
Windows 10 поддерживает широкий спектр сценариев для разработчиков React, в том числе следующие:
Базовые веб-приложения. Если вы не знакомы с React и в основном хотите узнать, как создать базовое веб-приложение с помощью React, мы рекомендуем установить create-react-app непосредственно в Windows. Если вы планируете создать веб-приложение, которое будет развернуто для рабочей среды, рекомендуем установить create-react-appcreate-react-app в подсистеме Windows для Linux (WSL), что позволит обеспечить повышенную производительность, совместимость системных вызовов и согласованность между локальной средой разработки и средой развертывания (в качестве которой часто используется сервер Linux).
Одностраничные приложения. Это веб-сайты, которые взаимодействуют с пользователем, динамически перезаписывая текущую веб-страницу с помощью новых данных с сервера (в отличие от поведения браузера по умолчанию с загрузкой целых новых страниц). Если вы хотите создать статический веб-сайт с ориентированным на содержимое одностраничным приложением, мы рекомендуем установить Gatsby в WSL. Если вы хотите создать веб-сайт с одностраничным приложением, которое отрисовывается на сервере, и серверной частью на Node.js, мы рекомендуем установить Next.js в WSL. (Хотя Next.js теперь также предлагает возможности по обработке статических файлов.)
Собственные классические приложения. React Native для Windows и macOS позволяет создавать собственные классические приложения с помощью JavaScript, которые выполняются на различных настольных компьютерах, ноутбуках, планшетах, устройствах Xbox и смешанной реальности. Он поддерживает как Windows SDK, так и macOS SDK.
Собственные мобильные приложения. React Native — это кросс-платформенное средство для создания приложений Android и iOS с помощью JavaScript, которые передают данные для отрисовки в собственный код пользовательского интерфейса платформы. React Native можно установить двумя способами: с помощью Expo CLI или React Native CLI. Вы можете изучить подробное сравнение двух этих средств на StackOverflow. Expo предоставляет клиентское приложение для мобильных устройств iOS и Android, позволяющее запускать и тестировать приложения. Инструкции по разработке приложения Android с помощью Windows, React Native и Expo CLI см. в статье React Native для разработки приложений Android в Windows.
Варианты установки
Существует несколько разных способов для установки React вместе с интегрированной цепочкой инструментов, лучше всего подходящими для вашего сценария использования. Ниже приведены самые популярные из них.
Средства React
Хотя написание простого компонента React в редакторе обычного текста — это хороший способ начать изучение React, созданный таким способом код будет громоздким и медленным, а также сложным в обслуживании и развертывании. Приложения в рабочей среде должны выполнять некоторые распространенные задачи. Такие задачи обрабатываются другими платформами JavaScript, которые принимаются приложением как зависимость. Ниже перечислены эти задачи.
В целом набор платформ, которые помогают создавать, компилировать и развертывать приложение, называются цепочкой инструментов. create-react-app — это удобная цепочка инструментов, позволяющая создать простое одностраничное приложение. Единственной средой, требующей использования create-react-app, является Node.js.
Каталог компонентов React Native
Ниже приведены компоненты, которые можно использовать в приложении React Native:
Каталог React Native предоставляет список библиотек компонентов, который можно отфильтровать по целевой платформе.
Варианты цепочки инструментов Fullstack React
React — это библиотека, а не платформа, поэтому для создания более сложных приложений могут потребоваться дополнительные инструменты. Вместе с React вы можете использовать такие средства:
Курсы и учебники по React
Ниже приведены некоторые рекомендуемые ресурсы для изучения React и создания примеров приложений:
Установка React в подсистеме Windows для Linux
В этом руководстве описывается, как установить React в дистрибутиве Linux (например, Ubuntu), выполняющемся в подсистеме Windows для Linux (WSL), с использованием цепочки инструментов create-react-app.
Мы рекомендуем использовать эти инструкции, если вы создаете одностраничное приложение (SPA), которое будет использоваться с командами или средствами Bash, а также планируете развертывание на сервере Linux или работу с контейнерами Docker. Если вы не работали с React и хотите узнать больше, вы можете выполнить установку с использованием create-react-app непосредственно в Window.
Дополнительные сведения о React, выборе между React (веб-приложения), React Native (мобильные приложения) и React Native для Windows (классические приложения) см. в статье Общие сведения о React.
Предварительные требования
При установке дистрибутива Linux в WSL будет создан каталог \\wsl\Ubuntu-20.04 для хранения файлов (замените Ubuntu-20.04 дистрибутивом Linux, который вы используете). Чтобы открыть этот каталог в проводнике Windows, откройте командную строку WSL, выберите корневой каталог с помощью команды cd
Установка React
Чтобы установить всю цепочку инструментов React в WSL, мы рекомендуем использовать create-react-app:
Откройте командную строку WSL (например, в Ubuntu).
Установите React с помощью npx:
npx — это средство запуска пакетов, используемое npm для выполнения пакетов без глобальной установки. Оно по сути создает временную установку React, чтобы в каждом новом проекте использовалась последняя версия React (а не текущая версия, как при глобальной установке). Использование средства запуска пакетов npx для выполнения пакета также минимизирует вероятность установки нескольких пакетов на компьютере.
Запустите новое приложение React:
Эта команда запустит сервер Node.js и откроет новое окно браузера с приложением. Вы можете использовать клавиши CTRL+С, чтобы прерывать выполнение приложения React в командной строке.
Create React App включает в себя конвейер сборки интерфейсной части с использованием Babel и webpack, но не работает с серверной логикой или базами данных. Если вы хотите создать веб-сайт, поддерживающий отрисовку на сервере, с помощью React и серверной части Node.js, рекомендуем установить Next.js вместо средства create-react-app, которое в большей мере предназначено для одностраничных приложений. Вы также можете установить Gatsby, если хотите создать статический веб-сайт, ориентированный на содержимое.
Включение React в существующее веб-приложение
Так как React является библиотекой JavaScript, т. е. по сути набором текстовых файлов, вы можете создавать приложения React без установки каких-либо средств или библиотек на своем компьютере. Возможно, вы хотите только немного расширить интерактивные возможности веб-страницы и вам не требуется инструментарий для сборки. Вы можете добавить компонент React, всего лишь указав простой тег на HTML-странице. Выполните инструкции по быстрому добавлению React из документации по React.
Для установки React для начала понадобится установить и настроить локальную среду разработки. Если вы занимаетесь разработкой, то у вас уже явно установлен локальный сервер. Также, можно попробовать React онлайн, прямо в браузере, подключив внешние файлы библиотеки и использовав следующий код:
Для установки React на локальном сервере, потребуется установка Node JS >= 6 версии.
Если у вас установлен npm 5.2.0+, вы можете использовать npx вместо этого.
Установленное React приложение создает конвейер сборки frontend и его можно использховать с любым backend.
В React используеются такие frontend инструменты, как Babel и webpack, но вы также можете использовать другие инструменты и настраивать конфигурацию приложения по своему усмотрению.
Когда приложение готово к развертыванию в производство, то запуск следующей команды приведет к созданию оптимизированной сборки вашего приложения в build каталоге.
Вам не нужно переписывать свое приложение, чтобы начать использовать React. Вы можете добавлять React в небольшую часть вашего приложения, например отдельный виджет, чтобы вы могли видеть, хорошо ли он подходит для вашего использования.
Хоть React и можно использовать без набора стартовой сборки, рекомендуется установить следующий набор для разработки:
Установка React
Чтобы установить React с npm, запустите:
Чтобы установить React с Yarn, выполните:
Включение ES6 и JSX
Hello World с ES6 и JSX
Самый маленький пример React выглядит так:
Этот код превращается в элемент DOM с идентификатором root и содержимым внутри него:
Аналогично, вы можете отобразить компонент React внутри элемента DOM где-то внутри вашего существующего приложения, написанного с помощью любой другой библиотеки пользовательского интерфейса JavaScript.
Разработка и производство
По умолчанию React содержит много полезных предупреждений. Эти предупреждения очень полезны в разработке.
Тем не менее, они делают версию разработки React более крупной и медленной, поэтому вы должны использовать производственную версию при развертывании приложения.
Использование CDN
Если вы не хотите использовать npm для управления пакетами клиента, react и react-dom пакеты, то можете подключать файлы из CDN.
UMD-сборки React и ReactDOM доступны через CDN.
Вышеупомянутые версии предназначены только для разработки и не подходят для производства. Минимизированные и оптимизированные производственные версии React доступны по адресу:
Чтобы загрузить определенную версию reactи react-dom, замените 16 номер версии.
Почему crossorigin атрибут?
Если вы используете React из CDN, то рекомендуется сохранить crossorigin атрибут:
Также рекомендуется проверить, что используемый CDN задает Access-Control-Allow-Origin: * HTTP-заголовок. Это позволяет улучшить обработку ошибок в React 16 и более поздних версиях.