Разработка React JS — Настройка среды

Разработка React JS — Настройка среды

От автора: в этой главе мы покажем, как создать среду для того, чтобы разработка React js была успешной. Обратите внимание, что существуют также дополнительные этапы, которые позже помогают ускорить процесс разработки. Нам понадобится NodeJS, поэтому, если вы его не установили, по ссылке ниже вы сможете узнать, как это сделать.

NodeJS и NPM

NodeJS — это платформа, необходимая для разработки на ReactJS. Ознакомьтесь с нашим руководством NodeJS — Установка среды.

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

Корневая папка будет называться reactApp, и мы разместим ее на рабочем столе. После создания папки нам нужно открыть ее и создать внутри пустой файл package.json, выполнив npm init из командной строки и следуя инструкциям.

Шаг 2 — Установка глобальных пакетов

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

Шаг 3 — Добавление зависимостей и плагинов

В этом руководстве мы будем использовать пакет webpack. Давайте установим webpack и webpack-dev-сервер.

Поскольку мы хотим использовать React, нам нужно сначала установить его. Команда -save добавит эти пакеты в файл package.json.

Как уже упоминалось, нам понадобятся некоторые плагины для babel, поэтому давайте установим их.

Шаг 4. Создание файлов.

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

Альтернативный способ создания файлов, которые нам нужны

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

Откройте файл webpack.config.js и добавьте в него следующий код. Мы устанавливаем точку входа webpack в main.js. Путь вывода — это место, где будет обслуживаться упакованное приложение. Мы также устанавливаем сервер разработки на порт 8080. Вы можете выбрать любой порт, который хотите.

И, наконец, мы устанавливаем загрузчики Babel для поиска js-файлов и используем пресеты es2015 и react, которые мы установили ранее.

webpack.config.js

Откройте package.json и удалите «test» «echo \»Error: no test specified\» && exit 1″ внутри объекта «scripts». Мы удаляем эту строку, поскольку в этом руководстве не будем проводить тестирование. Давайте вместо этого добавим команду start.

Перед вышеуказанным шагом потребуется webpack-dev-server. Для установки webpack-dev-server используйте следующую команду.

Теперь мы можем использовать команду npm start для запуска сервера. Команда —hot добавляет интерактивную перезагрузку после того, как что-то изменяется внутри наших файлов, поэтому нам не нужно обновлять браузер каждый раз, когда мы меняем наш код.

Шаг 6 — index.html

Это просто обычный HTML. Мы устанавливаем div id = «app» в качестве корневого элемента для нашего приложения и добавляем скрипт index.js, который является вложенным файлом приложения.

Шаг 7 — App.jsx и main.js

Это первый компонент React. Мы подробно объясним компоненты React в следующей главе. Этот компонент отображает «Hello World !!!».

App.jsx

Нам нужно импортировать этот компонент и отобразить его в корневом элементе приложения, чтобы его можно было просматривать в браузере.

main.js

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

Шаг 8 — Запуск сервера

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

В результате будет отображен порт, который нам нужно открыть в браузере. В нашем случае это http://localhost:8080/. Открыв его, мы получим следующий вывод.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Фреймворк VUE JS

VUE JS - полное руководство для современной веб-разработки

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree