Как проверить версию react

Как проверить, установлен ли React js?

Если в проекте используется npm, то можно посмотреть в файле package.json в поле dependencies. Если есть нужный пакет в этом списке, то, соответственно, установлен. Можно вручную ещё поискать в папке node_modules. Если есть соответствующая папка, всё так же значит что установлен.

Отслеживать
ответ дан 30 мар 2021 в 15:13
user348432 user348432

• javascript
• reactjs

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как узнать текущую версию того или иного плагина в официальном репозитории?

Какая команда в консоли позволяет узнать текущую версию npm или bower плагина в официальном репозитории?

Чтобы сверить какая сейчас стоит версия в системе и какая последняя не посещая их сайт?

И вообще есть ли удобный интерфейс (команда) для получения информации об истории версий того или иного плагина, по аналогии git hist?

• Вопрос задан более трёх лет назад
• 12537 просмотров

Комментировать
Решения вопроса 1

littleguga @littleguga
Не стыдно не знать, а стыдно не интересоваться.

Чтобы узнать версию в репозитории:
npm info module version
например
npm info gulp version

upd:
npm outdated

Руководство по работе с React

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

Что такое React

React JS – это библиотека JavaScript для создания пользовательских интерфейсов (UI). Она предоставляет инструменты для построения эффективных и масштабируемых веб-приложений с динамическим и интерактивным пользовательским интерфейсом.

Вот некоторые ключевые характеристики React:

• Компонентный подход. React разбивает пользовательский интерфейс на небольшие, независимые компоненты. Каждый компонент представляет собой некоторую часть интерфейса и может включать в себя другие компоненты. Этот подход упрощает разработку, тестирование и поддержку приложения.
• Виртуальная DOM. React использует виртуальную DOM (объектную модель документа) для оптимизации производительности. Он создает в памяти представление текущего состояния DOM и сравнивает его с предыдущим состоянием, обновляя только те элементы, которые изменились. Это позволяет снизить количество операций и делает приложение более быстрым.
• Однонаправленный поток данных. Данные в React обычно передаются «вниз» по иерархии компонентов. Это означает, что данные всегда двигаются от родительского компонента к дочернему. Такой подход значительно облегчает отслеживание и управление состоянием приложения.
• JSX-синтаксис. React позволяет писать код с расширением, которое выглядит как комбинация JavaScript и HTML , – его называют JSX. Оно делает код более читаемым и понятным.
• Многоплатформенность. React может использоваться для разработки не только веб-, но и мобильных приложений с использованием React Native.
• Большое сообщество и экосистема. Сообщество разработчиков React очень активное, и существует множество сторонних библиотек и инструментов, которые расширяют возможности React.

React применяется во множестве крупных проектов, включая многие популярные сайты и приложения, такие как Airbnb, Netflix и многие другие.

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

Аренда виртуального сервера на базе Linux

В RU-CENTER вы можете арендовать мощные виртуальные серверы на базе Linux. Они оснащены серверными SSD-дисками и обеспечивают высочайшую производительность вашим проектам.

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

Свяжитесь с нашим менеджером для бесплатной консультации, и он обязательно поможет подобрать VDS/VPS-сервер под ваши задачи.

Как создать проект React

Для установки Create React App и создания React-приложения вам потребуется выполнить несколько шагов.

Шаг 1. Установка Create React App

1. Перед загрузкой Create React App убедитесь, что у вас установлен Node.js. Если это не так, установите его по нашей инструкции.

Вы также можете проверить, установлен ли Node.js, с помощью команды:

В выводе отобразится номер версии Node. Например:

1. После завершения установки Node.js вы сможете использовать npm (Node Package Manager) для установки новых пакетов – в том числе, Create React App.

Через терминал перейдите в папку, в которой вы хотите создать новое React-приложение. Для этого используйте команду «cd»:

1. Теперь выполните команду для глобальной установки Create React App с использованием npm:

npm install create-react-app -g

• «create-react-app» – это название пакета, который вы устанавливаете.
• «-g» — флаг, который указывает на глобальную установку. Это означает, что Create React App будет доступен системно, и вы сможете создавать новые проекты React где угодно на вашем сервере.

1. Дождитесь завершения установки. После успешной установки вы сможете создавать новые React-приложения с помощью Create React App.

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

1. Чтобы создать новое React-приложение, перейдите в папку, в которой вы хотите создать проект:

1. Введите следующую команду:

npx create-react-app your-react-app

Где «your-react-app» – это имя вашего нового React-проекта.

После выполнения этой команды Create React App начнет процесс создания нового проекта. Когда процесс успешно завершится, вы увидите примерно следующий вывод:

Success! Created your-react-app at /Users/lissa/Documents/React-app/your-react-app

Inside that directory, you can run several commands:

Starts the development server.

Bundles the app into static files for production.

Starts the test runner.

Removes this tool and copies build dependencies, configuration files

and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

Более подробно весь процесс описан здесь:

В этом выводе сообщается, что новый проект с именем «your-react-app» был успешно создан в указанной вами папке.

Теперь вы можете перейти в неё и начать работу над вашим React-приложением.

Шаг 3. Запуск созданного React-проекта в редакторе

Когда вы откроете ваш новый проект React в редакторе, то увидите две основные папки:

В ней находится файл «index.html», который критически важен для вашего React-приложения в браузере. С помощью него вы сможете изменить заголовок страницы, добавить метаданные и вставить другие статические ресурсы (например, изображения и иконки).

В этой папке содержится основной исходный код React-приложения.

Важно! Мы не рекомендуем изменять файл «index.js» внутри папки «src». Он выполняет важную роль: загружает главный компонент и вставляет его в «index.html».

В этой же папке находится файл «App.js» – главный компонент приложения. Вы можете редактировать его содержимое и создавать новые компоненты.

А похожий файл «App.css» предназначен для определения стилей компонентов, которые используются в «App.js».

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

Основные команды React

Команда «start»

C помощью команды «start» вы можете начать работу с вашим React-приложением:

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

Что ещё происходит при выполнении этой команды?

1. Ваш React-проект запускается в режиме разработки.
2. Например, если вы внесли изменения в файл «App.js» и удалили заголовок «», браузер автоматически обновит страницу, чтобы отразить эти изменения.
3. То же самое произойдет, если вы внесли изменения в файл «App.css».

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

Активация скрипта «start» делает ваше React-приложение доступным для редактирования и настройки, позволяя вам быстро приступить к разработке.

Команда «run build»

Команда «npm run build» используется, когда разработчик готов к созданию рабочей версии приложения. Она выполняет процесс сборки, который включает в себя группировку всех необходимых файлов.

После завершения сборки вы увидите сообщение:

The build folder is ready to be deployed.

Это означает, что сборка вашего приложения было минифицирована и теперь готова к развертыванию.

Кроме того, после создания сжатой версии приложения, система предложит возможность развернуть приложение вручную.

Для этого необходимо выполнить следующие команды:

npm install -g pushstate-server

• «npm install -g pushstate-server» устанавливает глобально утилиту «pushstate-server», которая используется для запуска сервера.
• «pushstate-server build» запускает сервер сборки вашего приложения.
• «start http://localhost:9000» открывает браузер и переходит по адресу «http://localhost:9000», где будет доступно ваше приложение.

Кроме того, после выполнения команды в вашем проекте появится дополнительная папка с названием «build», в которой будут храниться сгенерированные файлы.

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

Команда «test»

Команда «npm test» используется для проверки работы вашего приложения.

При выполнении этой команды активируется инструмент тестирования Jest, который начинает поиск файлов с расширениями «.spec.js» или «.test.js», а затем запускает все найденные тесты.

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

Команда «eject»

Команда «eject» применяется для извлечения настроек и скриптов, которые были скрыты при использовании Create React App. Она делает ваш проект более настраиваемым и предоставляет вам полный контроль над конфигурацией Babel, Webpack и другими инструментами, которые задействованы в React-проекте.

Как выполнить команду «eject»?

1. Откройте терминал и перейдите в корневую папку вашего React-проекта.
2. Выполните команду:

После выполнения этой команды система предупредит вас о том, что процесс является необратимым и запросит ваше подтверждение:

Are you sure you want to eject? This action is permanent. [y/N]

Если вы уверены, что хотите продолжить и извлечь конфигурации, введите «y» и нажмите Enter.

Важно! Будьте осторожны – процесс «eject» действительно необратим! Выполнив его, вы станете ответственны за все аспекты настройки и обновления вашего проекта.

Когда выполнение «eject» завершится, вы увидите новую директорию в вашем проекте – «config». Эта директория содержит конфигурационные файлы для Babel, Webpack и других инструментов, которые ранее были скрыты.

Скрипты «start» и «test» продолжат работать в том же режиме, что и раньше. Просто вы получите полный доступ к конфигурации и сможете вносить в неё изменения по своему усмотрению.

Как обновить версию React

1. Прежде чем выполнить обновление React, необходимо определить, какая версия React у вас установлена в настоящее время. Это можно сделать с помощью следующей команды:

В выводе вы увидите текущую версию React. Например:

1. Чтобы обновить React, пропишите:

npm install react@latest —save

Когда выполнение этой команды завершится, React будет обновлен до последней версии.

1. Затем важно проверить версию, чтобы убедиться, что она действительно была успешно обновлена.

Для этого можно снова использовать ту же команду, что и в первом шаге:

1. Обновите зависимости, так как новые версии React могут иметь иные требования к зависимостям.

Для этого воспользуйтесь следующей командой:

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

Как удалить React

Удаление React-приложения в Windows:

1. Откройте окно командной строки в Windows.
2. Перейдите в каталог вашего проекта React при помощи команды:

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

rm your-react-app -r -force

Где «your-react-app» – ваш React-проект.

Команда выше удалит каталог «your-react-app» вместе с его содержимым. Параметр «-force» подтвердит удаление.

Удаление React-приложения в Mac/Linux:

1. Откройте терминал на вашем Mac или Linux.
2. Перейдите в каталог вашего проекта React при помощи команды:

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

rm -rf your-react-app

Она удалит каталог «your-react-app» вместе со всем его содержимым.

Удаление Create React App из глобальных зависимостей:

Чтобы удалить инструмент Create React App из глобальных зависимостей, введите:

С помощью npm

npm uninstall -g create-react-app

С помощью Yarn

yarn global remove create-react-app

Эти команды удалят Create React App из глобальных пакетов, а значит, вы больше не сможете использовать этот инструмент.

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

Версии React

Полная история версий React доступна на GitHub.
Документация к последним версиям может быть также найдена ниже.

Примечание

Данная документация предназначениа для React 18. Документация для React 17 находится по адресу https://17.reactjs.org.

18.2.0

18.1.0

18.0.0

17.0.2

17.0.1

17.0.0

16.14.0

16.13.1

16.13.0

16.12.0

16.11

16.10.2

16.10.1

16.10

16.9

16.8

16.7

16.6

16.5

16.4

16.3

16.2

16.1

16.0

15.6

Документация
Сообщество
Дополнительно

Copyright © 2023 Meta Platforms, Inc.