Как установить React на Windows? Полное руководство

ReactJS — это бесплатная библиотека JavaScript с открытым исходным кодом, которая значительно изменила вековые методы разработки внешнего интерфейса. Обнародованный в 2013 году, React был внутренним проектом Facebook. С тех пор React был принят различными организациями и стартапами. Frontend-разработчики, обладающие достаточными знаниями JavaScript, HTML и CSS, могут создавать интерактивные пользовательские интерфейсы как для веб-приложений, так и для мобильных приложений. Одним из самых больших преимуществ ReactJS является его компонентный подход. Создание инкапсулированных многократно используемых компонентов с собственным независимым состоянием упрощает сложные пользовательские интерфейсы.

Интересно, что все, что мы пишем в ReactJS, может показаться HTML, но это не так. Он известен как JSX, файл JavaScript XML. Этот JSX создает «элементы» React, которые визуализируются в объектной модели документа. С точки зрения непрофессионала, JSX позволяет нам писать логику JavaScript внутри тела HTML. Таким образом, React становится намного проще и понятнее.

Чтобы идеально использовать его, давайте углубимся, чтобы узнать, как установить React JS в Windows.

Как установить React JS в Windows?

Системные требования для Windows

Хотя использование ReactJs довольно безболезненно, процесс установки React JS в Windows может быть довольно утомительным. Поскольку ReactJS — это проект с открытым исходным кодом, это не так просто, как загрузить программное обеспечение из Интернета. Прежде всего, есть некоторые предварительные условия для использования ReactJS в вашей Windows.

1. Версия Windows: Windows XP, Windows 7 (32/64 бит) или выше.
2. Требуется минимум 4 ГБ оперативной памяти.
3. Не менее 10 ГБ свободного места на жестком диске.
4. Интернет-браузер, такой как Chrome, Microsoft Edge, Firefox и т. д.
5. Один редактор для отладки и тестирования кода, написанного на ReactJS.

Изучайте онлайн-курсы по разработке программного обеспечения в лучших университетах мира. Участвуйте в программах Executive PG, Advanced Certificate Programs или Master Programs, чтобы ускорить свою карьеру.

Загрузка и установка Node.js

Node.js — это сервер, который помогает вам запускать код ReactJS в вашей системе. Как и ReactJS, он также имеет открытый исходный код. Установщик Node.js включает NPM (диспетчер пакетов узла), который содержит различные модули узла, которые разработчики используют для размещения и публикации своих собственных модулей в сообществах с открытым исходным кодом. Таким образом, узел работает бок о бок с реестром NPM, что упрощает установку любого пакета с помощью интерфейса командной строки NPM. Node также объединяет приложение ReactJS в единое целое, используя веб-пакеты для легкой установки.

Вот пошаговая процедура загрузки и установки Node.js:

1. Чтобы установить Node.js, перейдите по ссылке https://nodejs.org/en/ .
2. В зависимости от версии вашей ОС Windows вы должны выбрать подходящий установщик.
3. На домашней странице Node.js рекомендуется версия LTS в зависимости от вашей операционной системы. При нажатии на нее автоматически начнется загрузка.
4. Вы найдете установщик в папке загрузок. Запустите установщик.
5. На экране появится мастер установки, который запросит лицензионное соглашение с конечным пользователем. Примите условия, чтобы продолжить установку.
6. Затем пользователь должен выбрать папку назначения с путем установки по умолчанию. Нажмите «Далее», чтобы продолжить.
7. Затем установщик показывает функции, которые будут установлены, а также задает переменные пути среды для командной строки. Нажмите «Далее», чтобы начать установку.
8. После завершения установки проверьте наличие Node.js в вашей системе с помощью командной строки.
9. Введите «node -v» в командной строке, чтобы проверить установленную версию Node.js.
10. Введите «npm -v» в командной строке, чтобы также проверить установку npm.

Установка Реакта

После установки Node.js мы можем установить React JS в Windows двумя способами:

• Использование веб-пакета и Babel

1. Создание корневой папки

Перед установкой ReactJS создайте корневую папку с именем «reactFile», используя следующие команды в командной строке.

C:\Users\имя_пользователя\Desktop>mkdir реагирующий файл

C:\Users\имя_пользователя\Desktop>cd файл реакции

После создания каталога создайте файл package.json с помощью следующей команды в командной строке. Файл package.json помогает создавать модули.

C:\Users\имя пользователя\Desktop>reactFile> инициализация npm

Затем командная строка запрашивает информацию о модуле; пропустите его, выбрав опцию «-y».

2. Установите React и реактивный дом

Установите пакеты React и react-dom с помощью следующих команд npm и добавьте пакеты в файл package.json с помощью команды «-save».

C:\Users\имя пользователя\Desktop>reactFile> npm install реагировать – сохранить

C:\Users\имя пользователя\Desktop>reactFile> npm install react-dom – сохранить

Изучите наши бесплатные курсы по разработке программного обеспечения

3. Установите веб-пакет

Установите webpack, webpack-dev-server и webpack-cli, используя следующие команды.

C:\Users\имя пользователя\Desktop>reactFile> npm install webpack webpack-dev-server webpack-cli –save

4. Установите Бабель

Babel — это транспилятор, который преобразует код JavaScript во что-то, понятное браузеру. Таким образом, установка Babel и его следующих плагинов, а именно babel-loader, babel-preset-env, babel-preset-react и html-webpack-plugin, очень важна.

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

C:\Users\имя пользователя\Desktop\reactFile>npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin –save-dev

5. Создайте файлы ReactJS

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

C:\Users\имя пользователя\Desktop\reactFile> введите nul> index.html

C:\Users\имя пользователя\Desktop\reactFile> введите nul> App.js

C:\Users\имя пользователя\Desktop\reactFile> введите nul > main.js

C:\Users\имя пользователя\Desktop\reactFile> введите nul > webpack.config.js

C:\Users\имя пользователя\Desktop\reactFile> введите nul > .babelrc

6. Настройка компилятора, серверов и загрузчиков

Как только эти файлы ReactJS будут созданы в папке «reactFile», вы можете подготовить сервер развертывания, настроив его на порт 8001 или любой другой порт, который вы хотите в webpack.-config.js.

Используйте следующий код в файле webpack-config.js:

постоянный путь = требуется ('путь');

const HtmlWebpackPlugin = require('html-webpack-plugin');

модуль.экспорт = {

запись: './main.js',

выход: {

путь: path.join(__dirname, '/bundle'),

имя файла: 'index_bundle.js'

},

Сервер разработки: {

встроенный: правда,

порт: 8001

},

модуль: {

правила: [

{

тест: /\.jsx?$/,

исключить: /node_modules/,

загрузчик: 'babel-loader',

запрос: {

пресеты: ['es2015', 'реагировать']

}

}

]

},

плагины: [

новый HtmlWebpackPlugin({

шаблон: './index.html'

})

]

}

7. Настройка index.html

Внутри index.html напишите обычный HTML-код с div id="app" в качестве корневого элемента, а затем добавьте скрипт index_bundle.js в тело HTML.

Востребованные навыки разработки программного обеспечения

8. Настройка App.js и main.js

Напишите компонент React внутри App.js для отображения класса или функции. Вставьте текст, который вы хотите отобразить, внутрь компонента, который появится в браузере после компиляции. Затем импортируйте компонент в наш корневой элемент App внутри main.js, чтобы результаты отображались в браузере.

Создайте файл «.babelrc» и вставьте следующие строки кода:

{

«пресеты»: [«env», «реагировать»]

}

9. Отображение контента на веб-странице

Настройка, наконец, завершена, и сервер будет запущен, как только вы введете следующую команду в командной строке.

C:\Users\имя пользователя\Desktop\reactFile> запуск npm

Как только вы нажмете Enter, браузер покажет вам сообщение, которое вы отобразили внутри компонента.

• Использование команды create-реагировать на приложение

1. Установите приложение для создания реакции

Откройте командную строку и напишите следующий код, чтобы установить приложение create-react-app.

C:\Users\имя пользователя\Desktop>npx create-реагировать-приложение мое-приложение

Эта команда устанавливает все необходимые файлы и папки в папку «my-app» на рабочем столе. Эта одна строка кода завершает установку React в вашей системе за несколько минут.

2. Запустите сервер

Перейдите в командную строку и введите

C:\Users\имя пользователя\Desktop>cd my-app

C:\Users\Tutorialspoint\Desktop>мое-приложение> запуск npm

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

Изучите наши популярные курсы по программной инженерии

Заключение

ReactJS изменил подход к разработке внешнего интерфейса с момента своего выпуска и превратился в одну из самых популярных библиотек JavaScript с открытым исходным кодом. Несколько компаний, таких как Meta, Netflix и Slack, используют ReactJS. Одним из самых больших преимуществ является возможность повторного использования компонентов для отображения изменений на веб-странице. Несколько приложений React развернуты в Azure Web App с помощью Azure DevOps. Сейчас это один из самых востребованных навыков в ИТ-индустрии.

Если вы являетесь разработчиком React, вы можете улучшить свой набор навыков, изучив Azure DevOps в рамках расширенной программы сертификатов upGrad в DevOps от IIIT Bangalore . Курс предлагает более 250 часов учебных модулей, а также руководство по подготовке к собеседованию. Вы также сможете посетить занятия по карьерному наставничеству с экспертами DevOps, которые могут дать вам четкую дорожную карту того, что ожидает отрасль. Вы получаете сертификат и статус выпускника IIITB в конце курса, что делает его исключительным дополнением к вашему резюме!