В прошлой статье мы узнали, как настроить базовый сервер, который будет предоставлять нам необходимые данные. Пришло время создать интерфейс, который пользователь действительно увидит, когда получит доступ к нашему приложению! Для этого урока я буду создавать очень простое приложение на React. Пора начинать ⚡️.

Уборка 🧹

Как всегда, перед тем, как отправиться в путь, нам нужно установить необходимые зависимости и запустить наше приложение React. Начнем с последнего. В React есть удобная CLI-команда, которая поможет вам в кратчайшие сроки создать шаблон вашего приложения. Перейдите в папку своего проекта и инициализируйте ее в папке npm (npm init -y ). Внутри той же папки просто запустите:

npx create-react-app client

и ждите, пока произойдет волшебство ✨. Когда сборка будет завершена, вы сможете сразу перейти к новому созданному приложению React, запустив cd client. Отсюда вы можете запустить npm start и увидеть, как ваше приложение React открыто в вашем браузере. Должно получиться так:

Теперь откройте ваш App.js файл, который React так красиво создал для вас, и удалите все содержимое между тегами <div>. В итоге у вас должно получиться что-то вроде этого:

Также удалите App.css file и перезапишите все, что вы найдете в index.css , следующим образом:

Молодец 😎 Прежде чем мы запачкаем руки, я хочу показать вам, как правильно настроить рабочую среду с помощью двух инструментов: ESLint и Prettier. Один поможет вам согласованно отформатировать код (Prettier), а другой будет кричать на вас каждый раз, когда в коде что-то не так (ESLint). Сначала они могут показаться раздражающими, но в конечном итоге они сэкономят вам массу времени и в целом сделают вас лучшим разработчиком.

Прежде всего, убедитесь, что в вашем VSCode установлены оба расширения. После этого создайте в корневом каталоге .eslintrc.json файл, который будет выглядеть так:

и .prettierrc.json файл, внутри которого будет только пустой объект. Теперь давайте инициализируем наш каталог в новый каталог npm, запустив npm init -y, чтобы мы могли установить необходимые зависимости. Теперь просто запустите:

npm i -D eslint eslint-config-prettier prettier

Убедитесь, что вы все еще находитесь в корневом каталоге, так как мы хотим, чтобы эти зависимости были доступны как для интерфейса, так и для серверной части!

Последний шаг (обещаю!), Откройте Настройки в VSCode (откройте его с помощью ⌘ + , на Mac) и отметьте опцию Format on Save.. Это укажет Prettier на автоматическое форматирование вашего кода при каждом сохранении: вам никогда не придется думать о неправильном отступе и странные конечные запятые когда-либо снова 🙌🏼.

Собираем наши первые компоненты 🧱

в React компоненты похожи на кирпичи для дома: они составляют наш фундамент. Давайте создадим в src папку с именем Components. Здесь давайте создадим LandingPage папку, внутри которой будет LandingPage.jsx файл. Наш компонент будет очень простым, он будет просто отображать заголовок:

Давайте сделаем его немного лучше, применив к нему какой-нибудь стиль, создав файл LandingPage.css в той же папке:

Я позволю вам поиграть с ним, если вы захотите еще больше стилизовать его! Теперь пора создать компонент, в котором будут публиковаться все темы, которые мы будем создавать: мы назовем его Dashboard. Вернитесь в папку Components и создайте другую папку с именем Dashboard, где, как и раньше, вы создадите файлы Dashboard.jsx и Dashboard.css ... вы начинаете видеть шаблон, а ?!

А вот и наш CSS-файл:

Наконец, мы хотим создать компонент, который будет представлять наши темы. А пока мы жестко закодируем значения. В следующей статье я покажу вам, как мы можем добавить несколько новых тем в серверную часть, чтобы наша панель управления была напрямую заполнена темами, которые наш сервер предоставит нам.

Итак, давайте создадим наш последний компонент на сегодня в TopicCard.jsx файле:

CSS для этого:

Теперь давайте посмотрим, как будет выглядеть наша панель с новыми карточками тем! Импортируйте компонент TopicCard в Dashboard и заполните div классом topics_grid некоторыми компонентами TopicCard. Теперь наша панель управления должна выглядеть примерно так:

Cooool! На данный момент нет взаимодействия между интерфейсом и сервером, поэтому все приложение статически типизировано. Однако в следующем уроке я покажу вам, как мы можем соединить обе части, чтобы создать динамическое приложение. Мы сможем опубликовать новую тему и удалить ее из нашей базы данных, при этом интерфейс будет обновляться с учетом последних изменений, которые мы вносим. Дикий 🤠

Если вам понравился этот пост, подпишитесь на меня в Twitter по адресу https://twitter.com/andrea_undecimo и здесь, на Medium. Я тоже учусь программировать, и я хочу помочь вам в этом 😁