React — это популярная библиотека JavaScript для создания пользовательских интерфейсов, и она отлично подходит для создания одностраничных приложений (SPA) и мобильных приложений. В этом руководстве мы рассмотрим шаги по настройке нового приложения React с помощью create-react-app, популярного инструмента, который создает начальный проект со всеми зависимостями и файлами конфигурации, необходимыми для быстрой установки и запуска.
Предпосылки
Прежде чем мы начнем, вам необходимо убедиться, что на вашем компьютере установлены следующие инструменты:
· Node.js: React построен на основе Node.js, поэтому вам необходимо установить его для запуска приложения React. Вы можете скачать последнюю версию Node.js с официального сайта (https://nodejs.org/) или использовать менеджер пакетов, например nvm (https://github.com/nvm-sh/nvm), чтобы установить его.
· npm: npm — это менеджер пакетов для Node.js, поставляемый вместе с Node.js. Вы можете использовать его для установки библиотек и фреймворков, таких как React.
Шаг 1: Установите приложение create-реагировать
Первым шагом к настройке нового приложения React является установка create-react-app, инструмента, который создает начальный проект со всеми необходимыми зависимостями и файлами конфигурации. Чтобы установить его, откройте окно терминала и выполните следующую команду:
npm install -g create-react-app
Это установит приложение create-react-app глобально на вашем компьютере, что означает, что вы можете использовать его для создания нового проекта React из любого каталога.
Шаг 2: Создайте новый проект
После установки приложения create-react-app вы можете использовать его для создания нового проекта React, выполнив следующую команду в своем терминале:
create-react-app my-project
Замените «мой-проект» на имя, которое вы хотите дать своему проекту. Это создаст новый каталог с тем же именем, что и ваш проект, и сгенерирует стартовый проект со всеми необходимыми файлами и зависимостями.
Шаг 3: Запустите сервер разработки
Теперь, когда у вас настроен новый проект React, вы можете запустить сервер разработки, перейдя в каталог проекта и выполнив следующую команду:
cd my-project npm start
Это запустит сервер разработки и откроет новое окно браузера с запущенным приложением React. Вы должны увидеть страницу приветствия по умолчанию с сообщением «Добро пожаловать в React».
Шаг 4: Отредактируйте код
Теперь, когда у вас есть работающее приложение React, вы можете приступить к редактированию кода, чтобы добавить свои собственные функции и возможности. Основной точкой входа для приложения является файл src/index.js, в который вы можете импортировать и отображать свои компоненты React. Вы также можете добавить новые компоненты, создав новые файлы в каталоге src/components.
Когда вы вносите изменения в код, сервер разработки автоматически перезагружает страницу и показывает ваши обновления в браузере.
Заключение
В этом руководстве вы узнали, как настроить новое приложение React с помощью create-react-app. Вы узнали, как запустить сервер разработки и как отредактировать код, чтобы добавить свои собственные функции и функции. Имея эту основу, вы теперь можете начать создавать свои собственные приложения React и изучать всю мощь платформы React.
