В прошлой статье мы узнали, как настроить базовый сервер, который будет предоставлять нам необходимые данные. Пришло время создать интерфейс, который пользователь действительно увидит, когда получит доступ к нашему приложению! Для этого урока я буду создавать очень простое приложение на 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. Я тоже учусь программировать, и я хочу помочь вам в этом 😁