Как создать приложение React.js в macOS

Введение

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

Предпосылки

Во-первых, вам нужно убедиться, что на вашем компьютере установлена последняя версия macOS. Вы можете проверить версию своей macOS, щелкнув меню Apple в верхнем левом углу экрана компьютера и выбрав « Об этом Mac ». Убедитесь, что на вашем компьютере Mac установлен Node.js.Вы можете скачать Node.js для MacOS.

Вам также необходимо установить интегрированную среду разработки (IDE) для написания приложения React. Наиболее популярными вариантами являются WebStorm, Visual Studio Code, Atom и IntelliJ. Мы будем использовать WebStorm для этого урока. Вам нужно будет подписаться на бесплатную пробную версию, чтобы начать использовать эту IDE.

Установите Node.js и NPM

Во-первых, вам нужно установить Node.js и NPM на свой компьютер Mac.Для этого перейдите в терминал, введите следующую команду и нажмите Enter. Вы можете найти терминал, выполнив поиск «терминал» в меню поиска MacOS.

nvm install 16

Предполагая, что у вас уже установлен NVM в вашей системе macOS.

Установите модуль create-реагировать-приложение с NPM

После установки Node.js и NPM вы можете установить React CLI, введя следующую команду в терминале. Вы также можете установить его с веб-сайта NPM, нажав кнопку «Установить»:

npm install create-react-app --location=global

Создайте приложение React на macOS

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

Вы также можете изменить путь к любой другой папке. Но убедитесь, что вы выбрали путь, которого нет ни в одном репозитории git. Если путь к папке существует в любом репозитории git, вы получите сообщение о том, что путь находится в файле .gitignore и не может быть выбран.

Теперь создайте новое приложение React, введя следующую команду:

npx create-react-app my-app

Далее вы можете перемещаться по проекту из командной строки и запускать его с помощью npm:

cd my-app

npm start

Дождитесь запуска приложения.

Приложение по умолчанию будет прослушивать localhost:3000. Вы можете получить к нему доступ из веб-браузера.

Safari — это браузер по умолчанию для компьютера с macOS, но я рекомендую вам также использовать Chrome. Google Chrome предоставляет среду разработки и расширение Chrome для инструментов разработчика React.

Создайте React-приложение

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

npm run build

Приведенная выше команда создает ваше приложение React и создает папку с именем «build» в текущем каталоге. Папка сборки содержит код JavaScript и другие ресурсы, необходимые приложению.

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

Вывод

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