Как установить react js ubuntu

Обновлено: 05.07.2024

В этом руководстве описывается, как установить 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.

Предварительные требования

Установите последнюю версию Windows 10 (версия 1903+, сборка 18362+). , включая дистрибутив Linux (например, Ubuntu), и убедитесь, что она работает в режиме WSL 2. что можно проверить, открыв PowerShell и выполнив команду wsl -l -v ; В этих инструкциях для установки используется nvm. Для выполнения create-react-app требуется последняя версия Node.js, а также последняя версия npm. Точные требования к версии см. в разделе о Create React App.

При установке дистрибутива Linux в WSL будет создан каталог \\wsl\Ubuntu-20.04 для хранения файлов (замените Ubuntu-20.04 дистрибутивом Linux, который вы используете). Чтобы открыть этот каталог в проводнике Windows, откройте командную строку WSL, выберите корневой каталог с помощью команды cd

, а затем введите команду explorer.exe . . Не устанавливайте Node.js и не настраивайте хранение файлов, с которыми вы будете работать, на подключенном диске C ( /mnt/c/Users/yourname$ ). Это существенно замедлит установку и сборку.

Установка React

Чтобы установить всю цепочку инструментов React в WSL, мы рекомендуем использовать create-react-app:

Откройте командную строку WSL (например, в Ubuntu).

Создайте новую папку проекта mkdir ReactProjects и войдите в этот каталог: cd ReactProjects .

Установите React с помощью npx:

npx — это средство запуска пакетов, используемое npm для выполнения пакетов без глобальной установки. Оно по сути создает временную установку React, чтобы в каждом новом проекте использовалась последняя версия React (а не текущая версия, как при глобальной установке). Использование средства запуска пакетов npx для выполнения пакета также минимизирует вероятность установки нескольких пакетов на компьютере.

Появится запрос на разрешение выполнить временную установку create-react-app и связанных пакетов. После завершения измените каталоги на каталоги нового приложения (my-app или любое другое выбранное вами имя): cd my-app .

Запустите новое приложение React:

Эта команда запустит сервер Node.js и откроет новое окно браузера с приложением. Вы можете использовать клавиши CTRL+С, чтобы прерывать выполнение приложения React в командной строке.

Create React App включает в себя конвейер сборки интерфейсной части с использованием Babel и webpack, но не работает с серверной логикой или базами данных. Если вы хотите создать веб-сайт, поддерживающий отрисовку на сервере, с помощью React и серверной части Node.js, рекомендуем установить Next.js вместо средства create-react-app, которое в большей мере предназначено для одностраничных приложений. Вы также можете установить Gatsby, если хотите создать статический веб-сайт, ориентированный на содержимое.

Когда вы будете готовы развернуть веб-приложение в рабочей среде, выполните npm run build , чтобы создать сборку приложения в папке build. Дополнительные сведения см. в руководстве пользователя по Create React App.

Включение React в существующее веб-приложение

Так как React является библиотекой JavaScript, т. е. по сути набором текстовых файлов, вы можете создавать приложения React без установки каких-либо средств или библиотек на своем компьютере. Возможно, вы хотите только немного расширить интерактивные возможности веб-страницы и вам не требуется инструментарий для сборки. Вы можете добавить компонент React, всего лишь указав простой тег <script> на HTML-странице. Выполните инструкции по быстрому добавлению React из документации по React.

Добавить в избранное

Главное меню » Ubuntu » Как установить ReactJS на Ubuntu 20.04

R eact или Reacts был запущен в 2011 году. Это интерфейсная библиотека JavaScript, которая используется для разработки компонентов пользовательского интерфейса. Он управляется Facebook и разработчиками с открытым исходным кодом.

Как установить ReactJS на Ubuntu 20.04?

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

Установка NPM

Чтобы установить npm, откройте терминал и введите следующую команду:

Чтобы убедиться, что установка завершилась успешно, проверьте версию npm с помощью команды:

Npm также установит библиотеку узлов. Чтобы подтвердить его версию, введите:

Установите инструмент Create-React-App

Установить приложение create-react-app помогает настроить все инструменты, необходимые для создания приложений React.

Выполните следующую команду npm, чтобы установить утилиту create-response-app:

Проверьте, обновлена ли версия с помощью команды:

Процесс загрузки завершен. Теперь вы можете создать React-Application.

Мы даем название приложению «andreyex». Выполните указанную ниже команду, чтобы создать приложение:

После получения всех пакетов измените каталог, используя:

Теперь, чтобы запустить приложение реагирования с именем andreyex, введите указанную команду:

И ваш браузер откроется и покажет вам, что приложение запущено и работает с локальным host-3000:

Вывод

Читать Мессенджер Telegram привлек 70 млн пользователей из-за отключения WhatsApp

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Если вы просто хотите побаловаться с 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 5.2.0+, вы можете использовать npx .

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

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

Данные менеджеры скачивают необходимые пакеты из реестра 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 выглядит примерно так:

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

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

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

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

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

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

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

Создание production-сборки с Create React App
Создание production-сборки с Single-File Builds
Создание production-сборки с Brunch
Создание production-сборки с Browserify
Создание production-сборки с Rollup
Создание production-сборки с Webpack

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

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

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

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

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

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

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

В следующей статье мы рассмотрим как мы можем создать наше первое приложение с ReactJS в Ubuntu 20.04, используя Create React App. ReactJS - это библиотека JavaScript с открытым исходным кодом, используемая для создания пользовательского интерфейса, поддерживаемая Facebook и сообществом разработчиков. ReactJS можно использовать при разработке веб-приложений или мобильных приложений.

В React, также известен как ReactJS, данные обрабатываются в DOM. Для запуска приложения React требуются дополнительные библиотеки для маршрутизации и управления состоянием. Некоторые примеры этих библиотек: Redux y React Router.

Установка React в Ubuntu 20.04

Чтобы установить React в нашей системе, мы должны сначала узнать, что такое npm, и понять, зачем они нам нужны. Npm - это аббревиатура от Node Package Manager., и это крупнейший в мире реестр программного обеспечения с открытым исходным кодом. Содержит более 800.000 XNUMX кодовых пакетов. Npm можно использовать бесплатно, и любое общедоступное программное обеспечение можно загрузить и использовать без регистрации или входа в систему.

Npm - это инструмент управления зависимостями для приложений javascript, который помогает установить все библиотеки и другие инструменты для поддержки разработки JS-приложений.

Установить npm

к установить nodejs, который включает npm, нам останется только открыть терминал (Ctrl + Alt + T) и выполнить следующую команду:

После завершения установки npm мы можем проверьте свою версию и версию узла. Сделать это можно с помощью команды:

Установленная версия npm зависит от даты установки, так как обновление выполняется часто. Необходимо, чтобы мы убедились, что у нас установлена версия выше 5.

к проверить установленную версию узла, используемая команда будет следующей:

Если в вашей системе не установлена последняя версия npm, вы можете обновить Node Package Manager (npm) до последней версии запуск этой команды в терминале:

Установите приложение create-response-app

Чтобы установить продуктивную среду React, нам нужно будет настроить такие инструменты, как babel, webpack и т. Д., Которые сложно настроить для новичков в мире React. Но мы можем найти несколько инструментов, которые помогут нам в настройке. Среди них мы найдем create-react-app - самый простой инструмент в использовании и настройке..

Create React App - удобная среда для изучения React, и это лучший способ начать создание нового одностраничного приложения с помощью React.

Create React App настройте вашу среду разработки так что вы можете использовать новейшие функции Javascript, обеспечивая хороший опыт разработки и оптимизируя ваше приложение для производства. Как указано на их веб-сайте, на вашем компьютере должны быть установлены Node> = 8.10 и npm> = 5.6.

Мы можем установить приложение create-response-app с помощью npm. Для этого в терминале (Ctrl + Alt + T) нам нужно будет только выполнить следующую команду установки:

После завершения установки приложения create-response-app в нашей системе мы можем проверьте установленную версию выполнив следующую команду:

Создание первого приложения React

Наше первое приложение React можно создать, просто используя create-react-app.. Нам нужно будет использовать только следующую команду:

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

Запуск приложения React

После создания проекта React нам нужно будет перейти в каталог проекта и запустить приложение React, используя следующую команду в терминале (Ctrl + Alt + T):

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

Удалите приложение create-response-app и npm

Пользователи мы можем удалить любую библиотеку, установленную из npm, используя команду npm uninstall. Выполните следующую команду в терминале (Ctrl + Alt + T), чтобы удалить создавать реагирующие-приложение:

Точно так же мы можем удалить npm используя эту другую команду в том же терминале:

Более подробную информацию об этой библиотеке JavaScript для создания пользовательских интерфейсов можно найти в проектная документация.

Содержание статьи соответствует нашим принципам редакционная этика. Чтобы сообщить об ошибке, нажмите здесь.

Полный путь к статье: Убунлог » Ubuntu » Создайте приложение React, создайте свое первое приложение с React Ubuntu 20.04

Читайте также: