React JS для новичков: приложение погоды

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

Подготовка к работе

Для работы необходимы знания HTML, CSS и основ JavaScript. Незнание JavaScript затруднит освоение синтаксиса React; рекомендуется предварительно изучить JavaScript (ссылка на курс доступна на сайте). Для создания приложения потребуется пакет Create React App (ссылка на страницу пакета в описании). Он позволяет создать проект, запустить его и сервер.

Установка необходимых инструментов

Для установки create-react-app необходим менеджер пакетов npm (Node Package Manager), поставляемый с Node.js. Установите Node.js с официального сайта (ссылка в описании); npm установится автоматически. Затем установите create-react-app глобально:

npm install -g create-react-app

Проверьте версию установленного пакета:

npx create-react-app --version

Создание и запуск проекта

Создайте проект в нужной директории:

npx create-react-app cities

(Замените cities на желаемое имя). Перейдите в созданную папку:

cd cities

И запустите локальный сервер:

npm start

Сервер запустится на localhost:3000.

Структура проекта

Базовая страница React отобразится после запуска. Проект содержит:

public: Статические файлы (например, index.html, логотип). index.html — основной HTML-файл, содержимое которого динамически меняется компонентами React.
src: Исходный код на JavaScript (компоненты, стили). Базовый код может быть удален для создания приложения с нуля. Файлы App.css, App.test.js, index.css, logo.svg, serviceWorker.js можно удалить или оставить. setupTests.js предназначен для тестирования и в этом курсе не используется.
package.json: Описание проекта, зависимости и скрипты. Здесь указаны используемые библиотеки (React, React-DOM), команды для запуска, сборки и других действий.

В этом уроке мы установили Create React App и создали базовый проект. В следующих уроках начнем работу с компонентами и создадим приложение для отображения погоды.