Введение
React — одна из самых популярных интерфейсных библиотек JavaScript для создания динамических веб-приложений. Он предлагает разработчикам надежный набор инструментов для создания многоразовых и эффективных компонентов пользовательского интерфейса.
Если вы начинаете с React, самый простой способ настроить базовое приложение — использовать инструмент create-react-app. В этом руководстве я проведу вас через настройку базового приложения React с помощью create-react-app.
Шаг 1. Установите Node.js и npm
Перед настройкой приложения React на вашем компьютере должны быть установлены Node.js и npm. Node.js — это среда выполнения JavaScript, построенная на движке Chrome V8 JavaScript, а npm — менеджер пакетов для Node.js. Вы можете скачать и установить Node.js и npm с официального сайта Node.js.
Шаг 2. Установите приложение create-react-app
После установки Node.js и npm вы можете глобально установить инструмент create-react-app с помощью npm. Для этого откройте окно терминала и введите следующую команду:
npm install -g create-react-app
Это установит приложение create-react-app глобально на ваш компьютер, что сделает его доступным из любого места вашего терминала.
Шаг 3. Создайте новое приложение React
Установив приложение create-react-app, вы теперь можете создать новое приложение React, выполнив следующую команду:
create-react-app my-app
Это создаст новый каталог с именем my-app.
. Заполните текущий рабочий каталог всеми необходимыми файлами и папками, чтобы запустить базовое приложение React.
ПРИМЕЧАНИЕ. Каталог — это ИМЯ папки вашего проекта. Вы можете изменить имя каталога на то, что вы выберете для своего проекта.
Шаг 4. Запустите сервер разработки
После создания приложения перейдите в каталог my-app
или любое другое конкретное имя, которое вы выбрали для папки проекта, и запустите сервер разработки, выполнив следующую команду.
cd my-app npm start
Это запустит сервер разработки и откроет новое окно браузера с запущенным приложением React. Вы должны увидеть заголовок базового шаблона React «Добро пожаловать в React».
Шаг 5. Внесите изменения и посмотрите на результаты
Когда сервер разработки запущен, вы можете начать изменять свое приложение React. Откройте файл src/App.js
в текстовом редакторе и измените текст внутри тега h1
. Сохраните файл; вы должны сразу же увидеть изменения, отраженные в окне браузера, без обновления страницы.
Поздравляем! Вы успешно настроили базовое приложение React, используя create-react-app. Отсюда вы можете приступить к созданию своего приложения, создавая новые компоненты, добавляя стили с помощью CSS и интегрируясь с внутренними API.
Заключение
В заключение, создание базового приложения React с помощью create-react-app — это быстрый и простой способ начать работу с React. При работающем сервере разработки вы можете экспериментировать с изменениями и видеть результаты в режиме реального времени, что делает процесс разработки более быстрым и эффективным. Это руководство помогло вам начать работу с React!
Мира и любви, Tech Heads!
Подписано,
Гламурный Техник